Update src/components/shared/SvgTextLogo/SvgTextLogo.tsx

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fef5f8;
+  --background: #fde8f3;
   --card: #ffffff;
-  --foreground: #6b2d52;
-  --primary-cta: #ec4899;
+  --foreground: #5a1f42;
+  --primary-cta: #d946a6;
   --primary-cta-text: #ffffff;
   --secondary-cta: #ffffff;
   --secondary-cta-text: #5a1f42;
   --accent: #f472b6;
-  --background-accent: #fbcfe8;
+  --background-accent: #ec4899;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/components/shared/SvgTextLogo/SvgTextLogo.tsx

@@ -6,6 +6,7 @@ interface SvgTextLogoProps {
   fontSize?: number;
   fontWeight?: number | string;
   letterSpacing?: number;
+  fill?: string;
 }
 
 const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
@@ -14,22 +15,22 @@ const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
   fontSize = 48,
   fontWeight = 700,
   letterSpacing = 0,
+  fill = 'currentColor',
 }) => {
   return (
     <svg
-      viewBox={`0 0 ${text.length * fontSize * 0.6} ${fontSize * 1.5}`}
-      className={className}
+      viewBox={`0 0 ${text.length * fontSize * 0.6} ${fontSize * 1.2}`}
+      className={`h-auto w-auto ${className}`}
       xmlns="http://www.w3.org/2000/svg"
     >
       <text
-        x="50%"
-        y="50%"
-        textAnchor="middle"
-        dominantBaseline="central"
+        x="0"
+        y={fontSize}
         fontSize={fontSize}
         fontWeight={fontWeight}
         letterSpacing={letterSpacing}
-        fill="currentColor"
+        fill={fill}
+        dominantBaseline="hanging"
       >
         {text}
       </text>