website refactor

apps/website/templates/LeagueWalletTemplate.tsx

@@ -2,15 +2,13 @@
 
 import { WalletSummaryPanel } from '@/components/leagues/WalletSummaryPanel';
 import type { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
-import { 
-  SharedBox, 
-  SharedButton, 
-  SharedStack, 
-  SharedText, 
-  SharedIcon,
-  SharedContainer
-} from '@/components/shared/UIComponents';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 import { Download } from 'lucide-react';
 import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
 
@@ -21,23 +19,23 @@ interface LeagueWalletTemplateProps extends TemplateProps<LeagueWalletViewData>
   transactions: any[];
 }
 
-export function LeagueWalletTemplate({ viewData, onExport, transactions }: LeagueWalletTemplateProps) {
+export function LeagueWalletTemplate({ viewData, onExport }: LeagueWalletTemplateProps) {
   return (
-    <SharedContainer size="lg">
-      <SharedBox paddingY={8}>
+    <Container size="lg">
+      <Box paddingY={8}>
         {/* Header */}
-        <SharedBox display="flex" alignItems="center" justifyContent="between" mb={8}>
-          <SharedBox>
+        <Box display="flex" alignItems="center" justifyContent="between" mb={8}>
+          <Box>
             <Heading level={1}>League Wallet</Heading>
-            <SharedText color="text-gray-400">Manage your league's finances and payouts</SharedText>
-          </SharedBox>
-          <SharedButton variant="secondary" onClick={onExport}>
-            <SharedStack direction="row" align="center" gap={2}>
-              <SharedIcon icon={Download} size={4} />
-              <SharedText>Export</SharedText>
-            </SharedStack>
-          </SharedButton>
-        </SharedBox>
+            <Text color="text-gray-400">Manage your league's finances and payouts</Text>
+          </Box>
+          <Button variant="secondary" onClick={onExport}>
+            <Stack direction="row" align="center" gap={2}>
+              <Icon icon={Download} size={4} />
+              <Text>Export</Text>
+            </Stack>
+          </Button>
+        </Box>
 
         <WalletSummaryPanel 
           formattedBalance={viewData.formattedBalance}
@@ -48,13 +46,13 @@ export function LeagueWalletTemplate({ viewData, onExport, transactions }: Leagu
         />
 
         {/* Alpha Notice */}
-        <SharedBox mt={6} rounded="lg" bg="bg-warning-amber/10" border borderColor="border-warning-amber/30" p={4}>
-          <SharedText size="xs" color="text-gray-400">
-            <SharedText weight="bold" color="text-warning-amber">Alpha Note:</SharedText> Wallet management is demonstration-only.
+        <Box mt={6} rounded="lg" bg="rgba(245,158,11,0.1)" border borderColor="rgba(245,158,11,0.3)" p={4}>
+          <Text size="xs" color="text-gray-400">
+            <Text weight="bold" color="warning-amber">Alpha Note:</Text> Wallet management is demonstration-only.
             Real payment processing and bank integrations will be available when the payment system is fully implemented.
-          </SharedText>
-        </SharedBox>
-      </SharedBox>
-    </SharedContainer>
+          </Text>
+        </Box>
+      </Box>
+    </Container>
   );
 }