website refactor

apps/website/ui/Icon.tsx

@@ -6,6 +6,7 @@ interface IconProps extends Omit<BoxProps<'svg'>, 'children' | 'as'> {
   icon: LucideIcon;
   size?: number | string;
   color?: string;
+  strokeWidth?: number;
 }
 
 export function Icon({ icon: LucideIcon, size = 4, color, className = '', style, ...props }: IconProps) {
@@ -25,13 +26,17 @@ export function Icon({ icon: LucideIcon, size = 4, color, className = '', style,
 
   const sizeClass = sizeMap[size] || 'w-4 h-4';
   
-  const combinedStyle = color ? { color, ...style } : style;
+  // If color starts with 'text-', it's a tailwind class, so pass it as color prop to Box
+  const isTailwindColor = typeof color === 'string' && color.startsWith('text-');
+  const combinedStyle = color && !isTailwindColor ? { color, ...style } : style;
+  const boxColor = isTailwindColor ? color : undefined;
 
   return (
     <Box
       as={LucideIcon}
       className={`${sizeClass} ${className}`}
       style={combinedStyle}
+      color={boxColor}
       {...props}
     />
   );