style upgrades

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

@@ -8,6 +8,7 @@ import { Suspense } from "react";
 import { useSheet } from "@/hooks/use-sheet";
 import Sheet from "@/components/sheet/sheet";
 import TeamHeadToHeadSheet from "./team-head-to-head-sheet";
+import AnimatedScore from "./animated-score";
 
 interface MatchCardProps {
   match: Match;
@@ -146,14 +147,13 @@ const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
                   </Text>
                 ))}
               </Stack>
-              <Text
+              <AnimatedScore
                 size="xl"
                 fw={700}
                 c={"dimmed"}
                 display={match.status === "ended" ? undefined : "none"}
-              >
-                {match.home_cups}
-              </Text>
+                value={match.home_cups}
+              />
             </Group>
 
             <Group justify="space-between" align="center">
@@ -192,14 +192,13 @@ const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
                   </Text>
                 ))}
               </Stack>
-              <Text
+              <AnimatedScore
                 size="xl"
                 fw={700}
                 c={"dimmed"}
                 display={match.status === "ended" ? undefined : "none"}
-              >
-                {match.away_cups}
-              </Text>
+                value={match.away_cups}
+              />
             </Group>
           </Stack>
         </Paper>