website refactor

apps/website/components/profile/MembershipPanel.tsx

@@ -3,6 +3,7 @@
 import { LeagueListItem } from '@/components/leagues/LeagueListItem';
 import { Card } from '@/ui/Card';
 import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
 import { ProfileSection } from './ProfileSection';
 import React from 'react';
 
@@ -22,7 +23,7 @@ interface MembershipPanelProps {
 
 export function MembershipPanel({ ownedLeagues, memberLeagues }: MembershipPanelProps) {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+    <Stack gap={8}>
       <ProfileSection 
         title="Leagues You Own" 
         description="Manage the leagues you have created and lead."
@@ -34,11 +35,11 @@ export function MembershipPanel({ ownedLeagues, memberLeagues }: MembershipPanel
             </Text>
           </Card>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+          <Stack gap={3}>
             {ownedLeagues.map((league) => (
               <LeagueListItem key={league.leagueId} league={league} isAdmin />
             ))}
-          </div>
+          </Stack>
         )}
       </ProfileSection>
 
@@ -53,13 +54,13 @@ export function MembershipPanel({ ownedLeagues, memberLeagues }: MembershipPanel
             </Text>
           </Card>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+          <Stack gap={3}>
             {memberLeagues.map((league) => (
               <LeagueListItem key={league.leagueId} league={league} />
             ))}
-          </div>
+          </Stack>
         )}
       </ProfileSection>
-    </div>
+    </Stack>
   );
 }