chore: verify and finalize task completion for existing refactor tasks

frontend/src/pages/JailDetailPage.tsx

@@ -23,6 +23,7 @@ import {
   makeStyles,
   tokens,
 } from "@fluentui/react-components";
+import { useCommonSectionStyles } from "../theme/commonStyles";
 import {
   ArrowClockwiseRegular,
   ArrowLeftRegular,
@@ -53,36 +54,7 @@ const useStyles = makeStyles({
     alignItems: "center",
     gap: tokens.spacingHorizontalS,
   },
-  section: {
-    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,
-  },
-  sectionHeader: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: tokens.spacingHorizontalM,
-    paddingBottom: tokens.spacingVerticalS,
-    borderBottomWidth: "1px",
-    borderBottomStyle: "solid",
-    borderBottomColor: tokens.colorNeutralStroke2,
-  },
+
   headerRow: {
     display: "flex",
     alignItems: "center",
@@ -181,6 +153,7 @@ interface JailInfoProps {
 
 function JailInfoSection({ jail, onRefresh, onStart, onStop, onSetIdle, onReload }: JailInfoProps): React.JSX.Element {
   const styles = useStyles();
+  const sectionStyles = useCommonSectionStyles();
   const navigate = useNavigate();
   const [ctrlError, setCtrlError] = useState<string | null>(null);
 
@@ -206,8 +179,8 @@ function JailInfoSection({ jail, onRefresh, onStart, onStop, onSetIdle, onReload
     };
 
   return (
-    <div className={styles.section}>
-      <div className={styles.sectionHeader}>
+    <div className={sectionStyles.section}>
+      <div className={sectionStyles.sectionHeader}>
         <div className={styles.headerRow}>
           <Text
             size={600}
@@ -334,10 +307,10 @@ function JailInfoSection({ jail, onRefresh, onStart, onStop, onSetIdle, onReload
 // ---------------------------------------------------------------------------
 
 function PatternsSection({ jail }: { jail: Jail }): React.JSX.Element {
-  const styles = useStyles();
+  const sectionStyles = useCommonSectionStyles();
   return (
-    <div className={styles.section}>
-      <div className={styles.sectionHeader}>
+    <div className={sectionStyles.section}>
+      <div className={sectionStyles.sectionHeader}>
         <Text as="h2" size={500} weight="semibold">
           Log Paths &amp; Patterns
         </Text>
@@ -374,12 +347,13 @@ function PatternsSection({ jail }: { jail: Jail }): React.JSX.Element {
 
 function BantimeEscalationSection({ jail }: { jail: Jail }): React.JSX.Element | null {
   const styles = useStyles();
+  const sectionStyles = useCommonSectionStyles();
   const esc = jail.bantime_escalation;
   if (!esc?.increment) return null;
 
   return (
-    <div className={styles.section}>
-      <div className={styles.sectionHeader}>
+    <div className={sectionStyles.section}>
+      <div className={sectionStyles.sectionHeader}>
         <Text as="h2" size={500} weight="semibold">
           Ban-time Escalation
         </Text>
@@ -445,6 +419,7 @@ function IgnoreListSection({
   onToggleIgnoreSelf,
 }: IgnoreListSectionProps): React.JSX.Element {
   const styles = useStyles();
+  const sectionStyles = useCommonSectionStyles();
   const [inputVal, setInputVal] = useState("");
   const [opError, setOpError] = useState<string | null>(null);
 
@@ -470,8 +445,8 @@ function IgnoreListSection({
   };
 
   return (
-    <div className={styles.section}>
-      <div className={styles.sectionHeader}>
+    <div className={sectionStyles.section}>
+      <div className={sectionStyles.sectionHeader}>
         <div style={{ display: "flex", alignItems: "center", gap: tokens.spacingHorizontalM }}>
           <Text as="h2" size={500} weight="semibold">
             Ignore List (IP Whitelist)