Added colour to SignalR LIVE/DOWN badges

Author: JaiZed

frontend/src/App/Navbar.tsx

@@ -260,6 +260,40 @@ const NavbarItem: FunctionComponent<NavbarItemProps> = ({
     return true;
   }, [badge]);
 
+  const isSignalRBadge = useMemo(() => {
+    return link === "/series" || link === "/movies";
+  }, [link]);
+
+  // Compute explicit background and text style objects safely
+  const badgeStyle = useMemo(() => {
+    if (!isSignalRBadge) return {};
+
+    if (badge === "LIVE") {
+      return {
+        // Subtle background colours that adapt to light/dark mode
+        backgroundColor:
+          "light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6))",
+
+        // Softened high-contrast text colors
+        color:
+          "light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-5))",
+
+        border: "none",
+      };
+    }
+
+    if (badge === "DOWN") {
+      return {
+        // more noticeable background colors for "DOWN" status, still adapting to theme
+        backgroundColor:
+          "light-dark(var(--mantine-color-red-6), var(--mantine-color-red-8))",
+        color: "var(--mantine-color-white)",
+      };
+    }
+
+    return {};
+  }, [badge, isSignalRBadge]);
+
   return (
     <NavLink
       to={link}
@@ -295,13 +329,17 @@ const NavbarItem: FunctionComponent<NavbarItemProps> = ({
         )}
         {name}
         {!shouldHideBadge && (
-          <Badge className={styles.badge} radius="xs">
+          <Badge
+            className={styles.badge}
+            radius="xs"
+            // We apply the explicit styling overrides here
+            style={badgeStyle}
+          >
             {badge}
           </Badge>
         )}
       </Text>
     </NavLink>
   );
 };
-
 export default AppNavbar;