Update appearance

Author: rossta

src/components/EnumerationDemo.tsx

@@ -515,19 +515,7 @@ const EnumerationDemo: React.FC<EnumerationDemoProps> = ({
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div
-          className='h-12 mb-4 text-lg font-medium text-center'
-          style={{ color: theme.text }}
-        >
-          {narration.title}
-          <div
-            className='text-sm font-normal'
-            style={{ color: `${theme.text}88` }}
-          >
-            {narration.description}
-          </div>
-        </div>
-        <svg viewBox='0 0 400 400' className='w-full h-80 mb-4'>
+        <svg viewBox='0 0 400 400' className='w-full h-33 mb-4'>
           {columns.map((col, i) => (
             <text
               key={i}
@@ -541,14 +529,14 @@ const EnumerationDemo: React.FC<EnumerationDemoProps> = ({
             </text>
           ))}
 
-          {Array(4)
+          {Array(5)
             .fill(null)
             .map((_, i) => (
               <line
                 key={i}
-                x1={100 + i * 100}
+                x1={i * 100}
                 y1={40}
-                x2={100 + i * 100}
+                x2={i * 100}
                 y2={360}
                 stroke={theme.gridLines}
                 strokeDasharray='4,4'
@@ -594,7 +582,18 @@ const EnumerationDemo: React.FC<EnumerationDemoProps> = ({
             );
           })}
         </svg>
-
+        <div
+          className='h-12 mb-4 text-lg font-medium text-center'
+          style={{ color: theme.text }}
+        >
+          {narration.title}
+          <div
+            className='text-sm font-normal'
+            style={{ color: `${theme.text}88` }}
+          >
+            {narration.description}
+          </div>
+        </div>
         <div className='space-y-4'>
           {!demoType && (
             <div className='flex items-center justify-between mb-4'>

src/components/ui/card.tsx

@@ -50,7 +50,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn('text-m text-muted-foreground', className)}
     {...props}
   />
 ));

src/index.css

@@ -12,16 +12,16 @@
     --popover-foreground: 224 71.4% 4.1%;
     --primary: 220.9 39.3% 11%;
     --primary-foreground: 210 20% 98%;
-    --secondary: 220 14.3% 95.9%;
+    --secondary: 230, 13%, 81%;
     --secondary-foreground: 220.9 39.3% 11%;
     --muted: 220 14.3% 95.9%;
     --muted-foreground: 220 8.9% 46.1%;
     --accent: 220 14.3% 95.9%;
     --accent-foreground: 220.9 39.3% 11%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 20% 98%;
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
+    --border: 230 13% 81%;
+    --input: 230 13% 81%;
     --ring: 224 71.4% 4.1%;
     --radius: 0.5rem;
   }
@@ -35,16 +35,16 @@
     --popover-foreground: 210 20% 98%;
     --primary: 210 20% 98%;
     --primary-foreground: 220.9 39.3% 11%;
-    --secondary: 215 27.9% 16.9%;
+    --secondary: 250, 3%, 47%;
     --secondary-foreground: 210 20% 98%;
-    --muted: 215 27.9% 16.9%;
+    --muted: 250, 3%, 47%;
     --muted-foreground: 217.9 10.6% 64.9%;
-    --accent: 215 27.9% 16.9%;
+    --accent: 250, 3%, 47%;
     --accent-foreground: 210 20% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 20% 98%;
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
+    --border: 250, 3%, 47%;
+    --input: 250, 3%, 47%;
     --ring: 216 12.2% 83.9%;
   }
 }
@@ -120,8 +120,8 @@
 }
 
 /* Add responsive utilities */
-.h-80 {
-  height: 20rem;
+.h-33 {
+  height: 33rem;
 }
 
 .w-full {