work on team enrollment

src/features/matches/components/match-card.tsx

@@ -7,6 +7,7 @@ import {
   Indicator,
   Box,
   Badge,
+  Skeleton,
 } from "@mantine/core";
 import { TrophyIcon, CrownIcon } from "@phosphor-icons/react";
 import { useNavigate } from "@tanstack/react-router";
@@ -54,7 +55,7 @@ const MatchCard = ({ match }: MatchCardProps) => {
             </Text>
             <Text c="dimmed">-</Text>
             <Text size="xs" c="dimmed">
-              Round {match.round}
+              Round {match.round + 1}
               {match.is_losers_bracket && " (Losers)"}
             </Text>
           </Group>
@@ -81,7 +82,7 @@ const MatchCard = ({ match }: MatchCardProps) => {
                 )}
               </Box>
               <Text
-                size="sm"
+                size="md"
                 fw={600}
                 lineClamp={1}
                 style={{ minWidth: 0, flex: 1 }}
@@ -89,42 +90,17 @@ const MatchCard = ({ match }: MatchCardProps) => {
                 {match.home?.name!}
               </Text>
             </Group>
+            <Text
+              size="xl"
+              fw={700}
+              c={"dimmed"}
+            >
+              {match.home_cups}
+            </Text>
+          </Group>
 
-            <Group gap="sm" align="center">
-              <Text
-                size="md"
-                fw={700}
-                c={"dimmed"}
-              >
-                {match.home_cups}
-              </Text>
-              <Text size="md" c="dimmed" fw={500}>
-                -
-              </Text>
-              <Text
-                size="md"
-                fw={700}
-                c={"dimmed"}
-              >
-                {match.away_cups}
-              </Text>
-              {match.ot_count > 0 && (
-                <Badge size="xs" color="orange" variant="light">
-                  {match.ot_count}OT
-                </Badge>
-              )}
-            </Group>
-
-            <Group gap="sm" style={{ flex: 1 }} justify="flex-end">
-              <Text
-                size="sm"
-                fw={600}
-                lineClamp={1}
-                ta="right"
-                style={{ minWidth: 0, flex: 1 }}
-              >
-                {match.away?.name}
-              </Text>
+          <Group justify="space-between" align="center">
+            <Group gap="sm" style={{ flex: 1 }}>
               <Box
                 style={{ position: "relative", cursor: "pointer" }}
                 onClick={handleAwayTeamClick}
@@ -135,8 +111,8 @@ const MatchCard = ({ match }: MatchCardProps) => {
                     style={{
                       position: "absolute",
                       top: -10,
-                      right: -4,
-                      transform: "rotate(25deg)",
+                      left: -4,
+                      transform: "rotate(-25deg)",
                       color: "gold",
                     }}
                   >
@@ -144,7 +120,22 @@ const MatchCard = ({ match }: MatchCardProps) => {
                   </Box>
                 )}
               </Box>
+              <Text
+                size="md"
+                fw={600}
+                lineClamp={1}
+                style={{ minWidth: 0, flex: 1 }}
+              >
+                {match.away?.name}
+              </Text>
             </Group>
+            <Text
+              size="xl"
+              fw={700}
+              c={"dimmed"}
+            >
+              {match.away_cups}
+            </Text>
           </Group>
         </Stack>
       </Paper>

src/features/matches/components/match-list.tsx

@@ -1,5 +1,4 @@
-import { Stack, Text, ThemeIcon, Box } from "@mantine/core";
-import { TrophyIcon } from "@phosphor-icons/react";
+import { Stack } from "@mantine/core";
 import { motion, AnimatePresence } from "framer-motion";
 import { Match } from "../types";
 import MatchCard from "./match-card";
@@ -14,20 +13,11 @@ const MatchList = ({ matches }: MatchListProps) => {
   ) || [];
 
   if (!filteredMatches.length) {
-    return (
-      <Box ta="center" py="xl">
-        <ThemeIcon size="xl" variant="light" radius="md" mb="md">
-          <TrophyIcon size={32} />
-        </ThemeIcon>
-        <Text c="dimmed" size="lg">
-          No matches found
-        </Text>
-      </Box>
-    );
+    return undefined;
   }
 
   return (
-    <Stack gap="sm">
+    <Stack p="md" gap="sm">
       <AnimatePresence>
         {filteredMatches.map((match, index) => (
           <motion.div