website refactor

apps/website/components/races/RaceJoinButton.tsx

@@ -1,10 +1,10 @@
 
 
 import { Button } from '@/ui/Button';
+import { ButtonGroup } from '@/ui/ButtonGroup';
 import { Icon } from '@/ui/Icon';
 import { InfoBanner } from '@/ui/InfoBanner';
-import { Stack } from '@/ui/primitives/Stack';
-import { CheckCircle2, PlayCircle, UserMinus, UserPlus, XCircle } from 'lucide-react';
+import { PlayCircle, UserMinus, UserPlus, XCircle, CheckCircle2 } from 'lucide-react';
 
 interface RaceJoinButtonProps {
   raceStatus: 'scheduled' | 'running' | 'completed' | 'cancelled';
@@ -56,8 +56,8 @@ export function RaceJoinButton({
 
     if (isUserRegistered) {
       return (
-        <Stack gap={3} fullWidth>
-          <InfoBanner type="success" icon={CheckCircle2}>
+        <ButtonGroup alignment="start" gap={3}>
+          <InfoBanner type="success">
             You&apos;re Registered
           </InfoBanner>
           <Button
@@ -69,7 +69,7 @@ export function RaceJoinButton({
           >
             {isLoading.withdraw ? 'Withdrawing...' : 'Withdraw'}
           </Button>
-        </Stack>
+        </ButtonGroup>
       );
     }