styling

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} />