website refactor

apps/website/ui/InfoItem.tsx

@@ -4,33 +4,32 @@ import { Text } from './Text';
 import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
 
-interface InfoItemProps {
-  icon: LucideIcon;
+export interface InfoItemProps {
   label: string;
   value: string | number;
+  icon: LucideIcon;
+  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'high' | 'med' | 'low';
 }
 
-export function InfoItem({ icon, label, value }: InfoItemProps) {
+export const InfoItem = ({ 
+  label, 
+  value, 
+  icon, 
+  intent = 'med' 
+}: InfoItemProps) => {
   return (
-    <Box display="flex" alignItems="start" gap={2.5}>
-      <Box 
-        display="flex" 
-        h="7" 
-        w="7" 
-        alignItems="center" 
-        justifyContent="center" 
-        rounded="lg" 
-        bg="bg-iron-gray/60" 
-        flexShrink={0}
-      >
-        <Icon icon={icon} size={3.5} color="text-gray-500" />
+    <Box display="flex" alignItems="center" gap={3}>
+      <Box padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
+        <Icon icon={icon} size={4} intent={intent as any} />
       </Box>
-      <Box flexGrow={1} minWidth="0">
-        <Text size="xs" color="text-gray-500" block mb={0.5} style={{ fontSize: '10px' }}>{label}</Text>
-        <Text size="xs" weight="medium" color="text-gray-300" block className="truncate">
+      <Box>
+        <Text size="xs" variant="low" block marginBottom={0.5} style={{ fontSize: '10px' }}>
+          {label}
+        </Text>
+        <Text size="xs" weight="medium" variant="high" block className="truncate">
           {value}
         </Text>
       </Box>
     </Box>
   );
-}
+};