website refactor

apps/website/components/profile/MembershipPanel.tsx

@@ -2,9 +2,9 @@
 
 import { LeagueListItem } from '@/components/leagues/LeagueListItem';
 import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 import { ProfileSection } from './ProfileSection';
+import React from 'react';
 
 interface League {
   leagueId: string;
@@ -22,23 +22,23 @@ interface MembershipPanelProps {
 
 export function MembershipPanel({ ownedLeagues, memberLeagues }: MembershipPanelProps) {
   return (
-    <Stack gap={8}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
       <ProfileSection 
         title="Leagues You Own" 
         description="Manage the leagues you have created and lead."
       >
         {ownedLeagues.length === 0 ? (
           <Card>
-            <Text size="sm" color="text-gray-400">
+            <Text size="sm" variant="low">
               You don&apos;t own any leagues yet.
             </Text>
           </Card>
         ) : (
-          <Stack gap={3}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
             {ownedLeagues.map((league) => (
               <LeagueListItem key={league.leagueId} league={league} isAdmin />
             ))}
-          </Stack>
+          </div>
         )}
       </ProfileSection>
 
@@ -48,18 +48,18 @@ export function MembershipPanel({ ownedLeagues, memberLeagues }: MembershipPanel
       >
         {memberLeagues.length === 0 ? (
           <Card>
-            <Text size="sm" color="text-gray-400">
+            <Text size="sm" variant="low">
               You&apos;re not a member of any other leagues yet.
             </Text>
           </Card>
         ) : (
-          <Stack gap={3}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
             {memberLeagues.map((league) => (
               <LeagueListItem key={league.leagueId} league={league} />
             ))}
-          </Stack>
+          </div>
         )}
       </ProfileSection>
-    </Stack>
+    </div>
   );
 }