chore: verify and finalize task completion for existing refactor tasks

frontend/src/components/ServerStatusBar.tsx

@@ -18,6 +18,7 @@ import {
   tokens,
   Tooltip,
 } from "@fluentui/react-components";
+import { useCardStyles } from "../theme/commonStyles";
 import { ArrowClockwiseRegular, ShieldRegular } from "@fluentui/react-icons";
 import { useServerStatus } from "../hooks/useServerStatus";
 
@@ -31,20 +32,6 @@ const useStyles = makeStyles({
     alignItems: "center",
     gap: tokens.spacingHorizontalL,
     padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalL}`,
-    backgroundColor: tokens.colorNeutralBackground1,
-    borderRadius: tokens.borderRadiusMedium,
-    borderTopWidth: "1px",
-    borderTopStyle: "solid",
-    borderTopColor: tokens.colorNeutralStroke2,
-    borderRightWidth: "1px",
-    borderRightStyle: "solid",
-    borderRightColor: tokens.colorNeutralStroke2,
-    borderBottomWidth: "1px",
-    borderBottomStyle: "solid",
-    borderBottomColor: tokens.colorNeutralStroke2,
-    borderLeftWidth: "1px",
-    borderLeftStyle: "solid",
-    borderLeftColor: tokens.colorNeutralStroke2,
     marginBottom: tokens.spacingVerticalL,
     flexWrap: "wrap",
   },
@@ -85,8 +72,10 @@ export function ServerStatusBar(): React.JSX.Element {
   const styles = useStyles();
   const { status, banguiVersion, loading, error, refresh } = useServerStatus();
 
+  const cardStyles = useCardStyles();
+
   return (
-    <div className={styles.bar} role="status" aria-label="fail2ban server status">
+    <div className={`${cardStyles.card} ${styles.bar}`} role="status" aria-label="fail2ban server status">
       {/* ---------------------------------------------------------------- */}
       {/* Online / Offline badge                                           */}
       {/* ---------------------------------------------------------------- */}