website refactor

apps/website/components/leagues/TransactionRow.tsx

@@ -2,7 +2,6 @@
 
 import React from 'react';
 import { ArrowUpRight, ArrowDownRight, DollarSign, TrendingUp, LucideIcon } from 'lucide-react';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
@@ -46,10 +45,10 @@ export function TransactionRow({ transaction }: TransactionRowProps) {
     >
       <Stack direction="row" align="center" justify="between">
         <Stack direction="row" align="center" gap={3}>
-          <Box flexShrink={0}>
+          <Stack flexShrink={0}>
             <Icon icon={getTransactionIcon(transaction.type)} size={4} color={transaction.typeColor} />
-          </Box>
-          <Box minWidth="0" flexGrow={1}>
+          </Stack>
+          <Stack minWidth="0" flexGrow={1}>
             <Text size="sm" weight="medium" color="text-white" block truncate>
               {transaction.description}
             </Text>
@@ -64,14 +63,14 @@ export function TransactionRow({ transaction }: TransactionRowProps) {
                 {transaction.status}
               </Text>
             </Stack>
-          </Box>
+          </Stack>
         </Stack>
 
-        <Box textAlign="right">
+        <Stack textAlign="right">
           <Text size="lg" weight="semibold" color={transaction.amountColor}>
             {transaction.formattedAmount}
           </Text>
-        </Box>
+        </Stack>
       </Stack>
     </Surface>
   );