styling

src/features/tournaments/components/started-tournament/carousel.module.css

@@ -0,0 +1,25 @@
+.indicators.indicators {
+    position: static;
+    transform: none;
+    justify-content: center;
+    margin-top: var(--mantine-spacing-xs);
+    gap: 6px;
+}
+
+.indicator.indicator {
+    width: 6px;
+    height: 6px;
+    border-radius: 3px;
+    background-color: var(--mantine-color-default-border);
+}
+
+.indicator.indicator[data-active] {
+    width: 16px;
+    background-color: var(--mantine-primary-color-filled);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .indicator.indicator {
+        transition: background-color 150ms ease-out, width 150ms ease-out;
+    }
+}

src/features/tournaments/components/started-tournament/header.tsx

@@ -14,7 +14,6 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
     <Stack px="sm" align="center" gap={0}>
       <GlitchAvatar
         name={tournament.name}
-        contain
         src={
           tournament.logo
             ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
@@ -27,8 +26,6 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
         }
         radius="md"
         size={250}
-        px="xs"
-        withBorder={false}
       >
         <TrophyIcon size={32} />
       </GlitchAvatar>

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

@@ -1,8 +1,9 @@
 import { useMemo } from "react";
 import { Tournament } from "../../types";
 import { useAuth } from "@/contexts/auth-context";
-import { Box, Divider, Stack, Text, Card, Center } from "@mantine/core";
+import { Box, Divider, Stack, Text, Card, Center, Group, Indicator } from "@mantine/core";
 import { Carousel } from "@mantine/carousel";
+import carouselClasses from "./carousel.module.css";
 import ListLink from "@/components/list-link";
 import { TreeStructureIcon, UsersIcon, ClockIcon, ListDashes } from "@phosphor-icons/react";
 import TeamListButton from "../upcoming-tournament/team-list-button";
@@ -47,10 +48,27 @@ const StartedTournament: React.FC<{ tournament: Tournament }> = ({
 
       {startedMatches.length > 0 ? (
         <Box>
+          <Group gap={10} px="md" mb={6} align="center" wrap="nowrap">
+            <Indicator
+              size={8}
+              color="red"
+              processing
+              position="middle-start"
+              offset={0}
+            />
+            <Text size="xs" fw={700} c="dimmed" tt="uppercase" lts="0.05em">
+              Live Matches{startedMatches.length > 1 && ` · ${startedMatches.length}`}
+            </Text>
+          </Group>
           <Carousel
-            slideSize="95%"
+            slideSize="90%"
             slideGap="xs"
             withControls={false}
+            withIndicators={startedMatches.length > 1}
+            classNames={{
+              indicators: carouselClasses.indicators,
+              indicator: carouselClasses.indicator,
+            }}
           >
             {startedMatches.map((match, index) => (
               <Carousel.Slide key={match.id}>

src/features/tournaments/components/started-tournament/skeleton.tsx

@@ -4,14 +4,9 @@ const StartedTournamentSkeleton = () => {
   return (
     <Stack gap="lg">
       {/* Header skeleton */}
-      <Stack px="md">
-        <Group justify="space-between" align="flex-start">
-          <Box style={{ flex: 1 }}>
-            <Skeleton height={32} width="60%" mb="xs" />
-            <Skeleton height={16} width="40%" />
-          </Box>
-          <Skeleton height={60} width={60} radius="md" />
-        </Group>
+      <Stack px="md" align="center" gap="xs">
+        <Skeleton height={268} width={268} radius="lg" />
+        <Skeleton height={16} width="55%" />
       </Stack>
 
       {/* Match carousel skeleton */}

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

@@ -19,7 +19,6 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
     <Stack align="center" gap={16}>
       <GlitchAvatar
         name={tournament.name}
-        contain
         src={
           tournament.logo
             ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
@@ -32,8 +31,6 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
         }
         radius="md"
         size={300}
-        px="xs"
-        withBorder={false}
       >
         <TrophyIcon size={32} />
       </GlitchAvatar>

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

@@ -57,12 +57,11 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
 
         <Card
           withBorder
-          radius="lg"
           p="lg"
           style={{
+            borderRadius:
+              "2px 2px var(--mantine-radius-lg) var(--mantine-radius-lg)",
             borderTop: "3px solid var(--mantine-primary-color-filled)",
-            backgroundImage:
-              "linear-gradient(to bottom, var(--mantine-primary-color-light), transparent 110px)",
           }}
         >
           <Stack gap="xs">

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

@@ -4,7 +4,7 @@ const UpcomingTournamentSkeleton = () => {
   return (
     <Stack gap="lg">
       <Flex px="md" justify="center" w="100%">
-        <Skeleton height={200} width={240} radius="md" />
+        <Skeleton height={318} width={318} radius="lg" />
       </Flex>
         <Stack align="center" gap={2}>
           <Skeleton height={16} w="30%" mb="md" />
@@ -12,7 +12,14 @@ const UpcomingTournamentSkeleton = () => {
         </Stack>
 
       <Stack px="md">
-        <Card withBorder radius="lg" p="lg">
+        <Card
+          withBorder
+          p="lg"
+          style={{
+            borderRadius:
+              "2px 2px var(--mantine-radius-lg) var(--mantine-radius-lg)",
+          }}
+        >
           <Skeleton height={14} width="80%" mb={16} />
           <Group mb="sm" gap="xs" align="center">
             <Skeleton height={32} width={16} />