style upgrades

src/features/tournaments/components/tournament-card.tsx

@@ -20,6 +20,27 @@ interface TournamentCardProps {
   tournament: TournamentInfo;
 }
 
+const tournamentCardCss = `
+.flxn-tournament-card {
+  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
+}
+@media (hover: hover) {
+  .flxn-tournament-card.flxn-tournament-card:hover {
+    border-color: color-mix(in srgb, var(--mantine-primary-color-filled) 40%, var(--mantine-color-default-border));
+    box-shadow: var(--mantine-shadow-sm);
+  }
+}
+.flxn-tournament-card.flxn-tournament-card:active {
+  border-color: color-mix(in srgb, var(--mantine-primary-color-filled) 55%, var(--mantine-color-default-border));
+  box-shadow: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .flxn-tournament-card {
+    transition: none;
+  }
+}
+`;
+
 export const TournamentCard = ({ tournament }: TournamentCardProps) => {
   const navigate = useNavigate();
 
@@ -29,15 +50,15 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
       onClick={() => navigate({ to: `/tournaments/${tournament.id}` })}
       style={{ borderRadius: "var(--mantine-radius-md)" }}
     >
+      <style href="flxn-tournament-card" precedence="medium">
+        {tournamentCardCss}
+      </style>
       <Card
         withBorder
         radius="md"
         p="lg"
         w="100%"
-        style={{
-          transition: "all 0.15s ease",
-          border: "1px solid var(--mantine-color-default-border)",
-        }}
+        className="flxn-tournament-card"
       >
         <Group justify="space-between" align="center">
           <Group gap="md" align="center">