Merge branch 'style' into development

src/features/tournaments/components/upcoming-tournament/enrolled-free-agent.tsx

@@ -98,7 +98,7 @@ const EnrolledFreeAgent: React.FC<{ tournamentId: string, isRegional?: boolean }
             {freeAgents
               .filter(agent => agent.player)
               .map((agent) => (
-                <Group key={agent.id} justify="space-between" align="center" wrap="nowrap" p="xs" style={{ borderRadius: '8px', backgroundColor: 'var(--mantine-color-gray-0)' }}>
+                <Group key={agent.id} justify="space-between" align="center" wrap="nowrap" p="xs" style={{ borderRadius: '8px', backgroundColor: 'var(--mantine-color-default-hover)' }}>
                   <Text size="sm" fw={500} truncate>
                     {agent.player?.first_name} {agent.player?.last_name}
                   </Text>
@@ -107,6 +107,7 @@ const EnrolledFreeAgent: React.FC<{ tournamentId: string, isRegional?: boolean }
                       <ActionIcon
                         variant="subtle"
                         size="sm"
+                        aria-label="Copy phone number"
                         onClick={() => copyToClipboard(agent.phone!)}
                         style={{ cursor: 'pointer' }}
                       >

src/features/tournaments/components/upcoming-tournament/index.tsx

@@ -55,7 +55,16 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
       <Stack px="xs">
         {tournament.desc && <Text px="md" ta="center" size="sm" style={{ whiteSpace: 'pre-wrap' }}>{tournament.desc}</Text>}
 
-        <Card withBorder radius="lg" p="lg">
+        <Card
+          withBorder
+          radius="lg"
+          p="lg"
+          style={{
+            borderTop: "3px solid var(--mantine-primary-color-filled)",
+            backgroundImage:
+              "linear-gradient(to bottom, var(--mantine-primary-color-light), transparent 110px)",
+          }}
+        >
           <Stack gap="xs">
             <Group gap="xs" align="center">
               <UsersIcon size={16} />

src/features/tournaments/components/upcoming-tournament/unenroll-team.tsx

@@ -13,7 +13,7 @@ interface UnenrollTeamProps {
 
 const UnenrollTeam = ({ tournamentId, teamId, onSubmit }: UnenrollTeamProps) => {
   const { open, isOpen, toggle } = useSheet();
-  const { mutate: unenrollTeam } = useUnenrollTeam();
+  const { mutate: unenrollTeam, isPending } = useUnenrollTeam();
   const handleUnenrollTeam = useCallback(
     async () => {
       await unenrollTeam({ tournamentId, teamId }, {
@@ -35,8 +35,8 @@ const UnenrollTeam = ({ tournamentId, teamId, onSubmit }: UnenrollTeamProps) =>
       <Sheet title={"Unenroll Team"} opened={isOpen} onChange={toggle}>
         <Stack gap='xs'>
           <Text size="sm" fw={500}>Are you sure you want to unenroll from this tournament? You can enroll again at any point before the deadline.</Text>
-          <Button onClick={handleUnenrollTeam}>Confirm</Button>
-          <Button variant="subtle" color="red" onClick={toggle}>Cancel</Button>
+          <Button onClick={handleUnenrollTeam} loading={isPending}>Confirm</Button>
+          <Button variant="subtle" color="red" onClick={toggle} disabled={isPending}>Cancel</Button>
         </Stack>
       </Sheet>
     </>