website refactor

apps/website/components/notifications/ModalNotification.tsx

@@ -4,6 +4,9 @@ import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { Modal } from '@/ui/Modal';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Grid } from '@/ui/Grid';
+import { Surface } from '@/ui/Surface';
 import { NotificationStat, NotificationDeadline } from '@/ui/NotificationContent';
 import {
     AlertCircle,
@@ -144,17 +147,19 @@ export function ModalNotification({
       </Text>
 
       {isRaceNotification && (
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginTop: '1.5rem' }}>
-          <NotificationStat 
-            label="POSITION" 
-            value={notification.data?.position === 'DNF' ? 'DNF' : `P${notification.data?.position || '?'}`} 
-          />
-          <NotificationStat 
-            label="RATING" 
-            value={`${ratingChange >= 0 ? '+' : ''}${ratingChange}`}
-            intent={ratingChange >= 0 ? 'success' : 'critical'}
-          />
-        </div>
+        <Box marginTop={6}>
+          <Grid cols={2} gap={4}>
+            <NotificationStat 
+              label="POSITION" 
+              value={notification.data?.position === 'DNF' ? 'DNF' : `P${notification.data?.position || '?'}`} 
+            />
+            <NotificationStat 
+              label="RATING" 
+              value={`${ratingChange >= 0 ? '+' : ''}${ratingChange}`}
+              intent={ratingChange >= 0 ? 'success' : 'critical'}
+            />
+          </Grid>
+        </Box>
       )}
 
       {hasDeadline && !isRaceNotification && (
@@ -166,18 +171,24 @@ export function ModalNotification({
       )}
 
       {protestId && (
-        <div style={{ marginTop: '1.5rem', padding: '0.75rem', backgroundColor: 'var(--ui-color-bg-base)', border: '1px solid var(--ui-color-border-default)', borderRadius: 'var(--ui-radius-sm)' }}>
+        <Surface 
+          marginTop={6} 
+          padding={3} 
+          variant="dark" 
+          border 
+          rounded="sm"
+        >
           <Text size="xs" variant="low" weight="bold" uppercase block marginBottom={1}>PROTEST ID</Text>
           <Text size="xs" variant="med" font="mono" block>{protestId}</Text>
-        </div>
+        </Surface>
       )}
 
       {notification.requiresResponse && !isRaceNotification && (
-        <div style={{ marginTop: '1rem', textAlign: 'center' }}>
+        <Box marginTop={4} textAlign="center">
           <Text size="xs" variant="critical" weight="medium">
             This action is required to continue
           </Text>
-        </div>
+        </Box>
       )}
     </Modal>
   );

apps/website/components/notifications/ToastNotification.tsx

@@ -3,6 +3,8 @@
 import { Icon } from '@/ui/Icon';
 import { Toast } from '@/ui/Toast';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
 import {
     AlertTriangle,
     Bell,
@@ -95,15 +97,16 @@ export function ToastNotification({
         {notification.message}
       </Text>
       {notification.actionUrl && (
-        <div 
-          onClick={handleClick}
-          style={{ marginTop: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.25rem', cursor: 'pointer' }}
-        >
-          <Text size="xs" weight="medium" variant="primary">
-            View details
-          </Text>
-          <Icon icon={ExternalLink} size={3} intent="primary" />
-        </div>
+        <Box marginTop={2}>
+          <Box onClick={handleClick} style={{ cursor: 'pointer' }}>
+            <Group gap={1}>
+              <Text size="xs" weight="medium" variant="primary">
+                View details
+              </Text>
+              <Icon icon={ExternalLink} size={3} intent="primary" />
+            </Group>
+          </Box>
+        </Box>
       )}
     </Toast>
   );