Clean up changes

Author: simonkellly

next-frontend/src/components/live/ConnectionPulse.tsx

@@ -7,54 +7,33 @@ import {
   ConnectionState,
 } from "@/lib/hooks/useResultsSubscription";
 import { Tooltip } from "@/components/ui/tooltip";
-import { Badge, Box, Status, Text } from "@chakra-ui/react";
+import { Badge, Status, Text } from "@chakra-ui/react";
 import { useT } from "@/lib/i18n/useI18n";
 
 export default function ConnectionPulse({
   connectionState,
 }: {
   connectionState: ConnectionState;
-  animationDuration?: number;
 }) {
   const { t } = useT();
 
-  const connectionColor = CONNECTION_COLORS[connectionState];
-  const mainLabel = t(
-    `competitions.live.connection.status.${CONNECTION_TRANSLATION_KEYS[connectionState]}`,
-  );
+  const translationKey = CONNECTION_TRANSLATION_KEYS[connectionState];
+  const isConnected = connectionState === CONNECTION_STATE_CONNECTED;
 
   return (
-    <Status.Root colorPalette={connectionColor} display="inline-flex">
+    <Status.Root
+      colorPalette={CONNECTION_COLORS[connectionState]}
+      display="inline-flex"
+    >
       <Tooltip
-        content={t(
-          `competitions.live.connection.${CONNECTION_TRANSLATION_KEYS[connectionState]}`,
-        )}
+        content={t(`competitions.live.connection.${translationKey}`)}
         showArrow
         openDelay={200}
       >
         <Badge variant="solid" display="inline-flex" gap={2} size="sm">
-          <Box
-            boxSize={{ base: "1.5", sm: "2" }}
-            borderRadius="full"
-            bg="colorPalette.contrast"
-            animationName={
-              connectionState === CONNECTION_STATE_CONNECTED
-                ? "pulse"
-                : undefined
-            }
-            animationDuration="1.5s"
-            animationTimingFunction="ease-in-out"
-            animationIterationCount="infinite"
-            animationDirection="alternate"
-          />
-          <Text
-            as="span"
-            fontSize="inherit"
-            fontWeight="medium"
-            textTransform="uppercase"
-            lineHeight="1"
-          >
-            {mainLabel}
+          <Status.Indicator animation={isConnected ? "pulse" : undefined} />
+          <Text>
+            {t(`competitions.live.connection.status.${translationKey}`)}
           </Text>
         </Badge>
       </Tooltip>

next-frontend/src/components/live/LiveUpdatingResultsTable.tsx

@@ -56,12 +56,7 @@ export default function LiveUpdatingResultsTable({
   return (
     <VStack align="left">
       <HStack>
-        <Heading
-          textStyle={{ sm: "h3", md: "h2", lg: "h1" }}
-          textTransform="uppercase"
-        >
-          {title}
-        </Heading>
+        <Heading textStyle={{ sm: "h3", md: "h2", lg: "h1" }}>{title}</Heading>
         <Spacer flex={1} />
         <ConnectionPulse connectionState={connectionState} />
         {isLinkedRound && (