website refactor

apps/website/components/achievements/AchievementCard.tsx

@@ -1,6 +1,7 @@
 import { Card } from '@/ui/Card';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Group } from '@/ui/Group';
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
 
 interface AchievementCardProps {
   title: string;
@@ -10,13 +11,6 @@ interface AchievementCardProps {
   rarity: 'common' | 'rare' | 'epic' | 'legendary';
 }
 
-const rarityColors = {
-  common: 'border-gray-500 bg-gray-500/10',
-  rare: 'border-blue-400 bg-blue-400/10',
-  epic: 'border-purple-400 bg-purple-400/10',
-  legendary: 'border-warning-amber bg-warning-amber/10'
-};
-
 export function AchievementCard({
   title,
   description,
@@ -24,27 +18,27 @@ export function AchievementCard({
   unlockedAt,
   rarity,
 }: AchievementCardProps) {
+  const rarityVariantMap = {
+    common: 'rarity-common',
+    rare: 'rarity-rare',
+    epic: 'rarity-epic',
+    legendary: 'rarity-legendary'
+  } as const;
+
   return (
     <Card
-      p={4}
-      rounded="lg"
-      variant="outline"
-      className={rarityColors[rarity]}
+      variant={rarityVariantMap[rarity]}
     >
-      <Stack direction="row" align="start" gap={3}>
+      <Group direction="row" align="start" gap={3}>
         <Text size="3xl">{icon}</Text>
-        <Stack gap={1} flexGrow={1}>
-          <Text weight="medium" color="text-white">{title}</Text>
-          <Text size="xs" color="text-gray-400">{description}</Text>
-          <Text size="xs" color="text-gray-500">
-            {new Date(unlockedAt).toLocaleDateString('en-US', {
-              month: 'short',
-              day: 'numeric',
-              year: 'numeric'
-            })}
+        <Group direction="column" gap={1}>
+          <Text weight="medium" variant="high">{title}</Text>
+          <Text size="xs" variant="med">{description}</Text>
+          <Text size="xs" variant="low">
+            {DateDisplay.formatShort(unlockedAt)}
           </Text>
-        </Stack>
-      </Stack>
+        </Group>
+      </Group>
     </Card>
   );
 }

apps/website/components/achievements/AchievementGrid.tsx

@@ -1,11 +1,12 @@
 import { AchievementDisplay } from '@/lib/display-objects/AchievementDisplay';
 import { Card } from '@/ui/Card';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Group } from '@/ui/Group';
 import { Text } from '@/ui/Text';
 import { Award, Crown, Medal, Star, Target, Trophy, Zap } from 'lucide-react';
+import React from 'react';
 
 interface Achievement {
   id: string;
@@ -35,44 +36,44 @@ function getAchievementIcon(icon: string) {
 export function AchievementGrid({ achievements }: AchievementGridProps) {
   return (
     <Card>
-      <Stack mb={4}>
-        <Stack direction="row" align="center" justify="between">
-          <Heading level={2} icon={<Icon icon={Award} size={5} color="#facc15" />}>
-            Achievements
-          </Heading>
-          <Text size="sm" color="text-gray-500" weight="normal">{achievements.length} earned</Text>
-        </Stack>
-      </Stack>
+      <Group direction="column" gap={4} fullWidth>
+        <Group direction="row" align="center" justify="between" fullWidth>
+          <Group direction="row" align="center" gap={2}>
+            <Icon icon={Award} size={5} intent="warning" />
+            <Heading level={2}>
+              Achievements
+            </Heading>
+          </Group>
+          <Text size="sm" variant="low" weight="normal">{achievements.length} earned</Text>
+        </Group>
+      </Group>
       <Grid cols={1} gap={4}>
         {achievements.map((achievement) => {
           const AchievementIcon = getAchievementIcon(achievement.icon);
-          const rarity = AchievementDisplay.getRarityColor(achievement.rarity);
+          const rarity = AchievementDisplay.getRarityVariant(achievement.rarity);
           return (
             <Card
               key={achievement.id}
-              variant="outline"
-              p={4}
-              rounded="xl"
-              className={rarity.surface === 'muted' ? 'bg-panel-gray/40' : ''}
+              variant={rarity.surface}
             >
-              <Stack direction="row" align="start" gap={3}>
-                <Stack bg="panel-gray/40" rounded="lg" p={3} align="center" justify="center">
-                  <Icon icon={AchievementIcon} size={5} color={rarity.icon} />
-                </Stack>
-                <Stack flex={1}>
-                  <Text weight="semibold" size="sm" color="text-white" block>{achievement.title}</Text>
-                  <Text size="xs" color="text-gray-400" block mt={1}>{achievement.description}</Text>
-                  <Stack direction="row" align="center" gap={2} mt={2}>
-                    <Text size="xs" color={rarity.text} weight="medium">
-                      {achievement.rarity.toUpperCase()}
+              <Group direction="row" align="start" gap={3}>
+                <Card variant="default" style={{ padding: '0.75rem' }}>
+                  <Icon icon={AchievementIcon} size={5} intent={rarity.iconIntent} />
+                </Card>
+                <Group direction="column" fullWidth>
+                  <Text weight="semibold" size="sm" variant="high" block>{achievement.title}</Text>
+                  <Text size="xs" variant="med" block>{achievement.description}</Text>
+                  <Group direction="row" align="center" gap={2}>
+                    <Text size="xs" variant={rarity.text} weight="medium" uppercase>
+                      {achievement.rarity}
                     </Text>
-                    <Text size="xs" color="text-gray-500">•</Text>
-                    <Text size="xs" color="text-gray-500">
+                    <Text size="xs" variant="low">•</Text>
+                    <Text size="xs" variant="low">
                       {AchievementDisplay.formatDate(achievement.earnedAt)}
                     </Text>
-                  </Stack>
-                </Stack>
-              </Stack>
+                  </Group>
+                </Group>
+              </Group>
             </Card>
           );
         })}

apps/website/components/achievements/MilestoneItem.tsx

@@ -1,5 +1,7 @@
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Group } from '@/ui/Group';
+import { Card } from '@/ui/Card';
+import React from 'react';
 
 interface MilestoneItemProps {
   label: string;
@@ -9,12 +11,14 @@ interface MilestoneItemProps {
 
 export function MilestoneItem({ label, value, icon }: MilestoneItemProps) {
   return (
-    <Stack direction="row" align="center" justify="between" p={3} rounded="md" bg="bg-deep-graphite" border borderColor="border-charcoal-outline">
-      <Stack direction="row" align="center" gap={3}>
-        <Text size="xl">{icon}</Text>
-        <Text size="sm" color="text-gray-400">{label}</Text>
-      </Stack>
-      <Text size="sm" weight="medium" color="text-white">{value}</Text>
-    </Stack>
+    <Card variant="dark">
+      <Group direction="row" align="center" justify="between" fullWidth>
+        <Group direction="row" align="center" gap={3}>
+          <Text size="xl">{icon}</Text>
+          <Text size="sm" variant="low">{label}</Text>
+        </Group>
+        <Text size="sm" weight="medium" variant="high">{value}</Text>
+      </Group>
+    </Card>
   );
 }