chore: verify and finalize task completion for existing refactor tasks

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}>