chore: verify and finalize task completion for existing refactor tasks

frontend/src/components/DashboardFilterBar.tsx

@@ -14,6 +14,7 @@ import {
   makeStyles,
   tokens,
 } from "@fluentui/react-components";
+import { useCardStyles } from "../theme/commonStyles";
 import type { BanOriginFilter, TimeRange } from "../types/ban";
 import {
   BAN_ORIGIN_FILTER_LABELS,
@@ -57,20 +58,6 @@ const useStyles = makeStyles({
     alignItems: "center",
     flexWrap: "wrap",
     gap: tokens.spacingVerticalS,
-    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,
     paddingTop: tokens.spacingVerticalS,
     paddingBottom: tokens.spacingVerticalS,
     paddingLeft: tokens.spacingHorizontalM,
@@ -107,9 +94,10 @@ export function DashboardFilterBar({
   onOriginFilterChange,
 }: DashboardFilterBarProps): React.JSX.Element {
   const styles = useStyles();
+  const cardStyles = useCardStyles();
 
   return (
-    <div className={styles.container}>
+    <div className={`${styles.container} ${cardStyles.card}`}>
       {/* Time-range group */}
       <div className={styles.group}>
         <Text weight="semibold" size={300}>

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                                           */}
       {/* ---------------------------------------------------------------- */}

frontend/src/components/WorldMap.tsx

@@ -11,6 +11,7 @@ import { createPortal } from "react-dom";
 import { useCallback, useState } from "react";
 import { ComposableMap, ZoomableGroup, Geography, useGeographies } from "react-simple-maps";
 import { Button, makeStyles, tokens } from "@fluentui/react-components";
+import { useCardStyles } from "../theme/commonStyles";
 import type { GeoPermissibleObjects } from "d3-geo";
 import { ISO_NUMERIC_TO_ALPHA2 } from "../data/isoNumericToAlpha2";
 import { getBanCountColor } from "../utils/mapColors";
@@ -30,9 +31,6 @@ const useStyles = makeStyles({
   mapWrapper: {
     width: "100%",
     position: "relative",
-    backgroundColor: tokens.colorNeutralBackground2,
-    borderRadius: tokens.borderRadiusMedium,
-    border: `1px solid ${tokens.colorNeutralStroke1}`,
     overflow: "hidden",
   },
   countLabel: {
@@ -290,6 +288,7 @@ export function WorldMap({
   thresholdHigh = 100,
 }: WorldMapProps): React.JSX.Element {
   const styles = useStyles();
+  const cardStyles = useCardStyles();
   const [zoom, setZoom] = useState<number>(1);
   const [center, setCenter] = useState<[number, number]>([0, 0]);
 
@@ -308,7 +307,7 @@ export function WorldMap({
 
   return (
     <div
-      className={styles.mapWrapper}
+      className={`${cardStyles.card} ${styles.mapWrapper}`}
       role="img"
       aria-label="World map showing banned IP counts by country. Click a country to filter the table below."
     >

frontend/src/components/jail/BannedIpsSection.tsx

@@ -32,6 +32,7 @@ import {
   type TableColumnDefinition,
   createTableColumn,
 } from "@fluentui/react-components";
+import { useCommonSectionStyles } from "../../theme/commonStyles";
 import { formatTimestamp } from "../../utils/formatDate";
 import {
   ArrowClockwiseRegular,
@@ -54,26 +55,6 @@ const PAGE_SIZE_OPTIONS = [10, 25, 50, 100] as const;
 // ---------------------------------------------------------------------------
 
 const useStyles = makeStyles({
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    gap: tokens.spacingVerticalS,
-    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,
-    padding: tokens.spacingVerticalM,
-  },
   header: {
     display: "flex",
     alignItems: "center",
@@ -243,6 +224,7 @@ export function BannedIpsSection({
   onUnban,
 }: BannedIpsSectionProps): React.JSX.Element {
   const styles = useStyles();
+  const sectionStyles = useCommonSectionStyles();
 
   const rows: BanRow[] = items.map((ban) => ({
     ban,
@@ -252,7 +234,7 @@ export function BannedIpsSection({
   const totalPages = pageSize > 0 ? Math.ceil(total / pageSize) : 1;
 
   return (
-    <div className={styles.root}>
+    <div className={sectionStyles.section}>
       {/* Section header */}
       <div className={styles.header}>
         <div className={styles.headerLeft}>