chore: verify and finalize task completion for existing refactor tasks

frontend/src/pages/BlocklistsPage.tsx

@@ -37,6 +37,7 @@ import {
   makeStyles,
   tokens,
 } from "@fluentui/react-components";
+import { useCommonSectionStyles } from "../theme/commonStyles";
 import {
   AddRegular,
   ArrowClockwiseRegular,
@@ -69,35 +70,7 @@ const useStyles = makeStyles({
     flexDirection: "column",
     gap: tokens.spacingVerticalXL,
   },
-  section: {
-    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,
-    display: "flex",
-    flexDirection: "column",
-    gap: tokens.spacingVerticalS,
-  },
-  sectionHeader: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingBottom: tokens.spacingVerticalS,
-    borderBottomWidth: "1px",
-    borderBottomStyle: "solid",
-    borderBottomColor: tokens.colorNeutralStroke2,
-  },
+
   tableWrapper: { overflowX: "auto" },
   actionsCell: { display: "flex", gap: tokens.spacingHorizontalS, flexWrap: "wrap" },
   mono: { fontFamily: "Consolas, 'Courier New', monospace", fontSize: "12px" },
@@ -400,6 +373,7 @@ interface SourcesSectionProps {
 
 function SourcesSection({ onRunImport, runImportRunning }: SourcesSectionProps): React.JSX.Element {
   const styles = useStyles();
+  const sectionStyles = useCommonSectionStyles();
   const { sources, loading, error, refresh, createSource, updateSource, removeSource, previewSource } =
     useBlocklists();
 
@@ -471,8 +445,8 @@ function SourcesSection({ onRunImport, runImportRunning }: SourcesSectionProps):
   }, []);
 
   return (
-    <div className={styles.section}>
-      <div className={styles.sectionHeader}>
+    <div className={sectionStyles.section}>
+      <div className={sectionStyles.sectionHeader}>
         <Text size={500} weight="semibold">
           Blocklist Sources
         </Text>
@@ -631,6 +605,7 @@ interface ScheduleSectionProps {
 
 function ScheduleSection({ onRunImport, runImportRunning }: ScheduleSectionProps): React.JSX.Element {
   const styles = useStyles();
+  const sectionStyles = useCommonSectionStyles();
   const { info, loading, error, saveSchedule } = useSchedule();
   const [saving, setSaving] = useState(false);
   const [saveMsg, setSaveMsg] = useState<string | null>(null);
@@ -663,8 +638,8 @@ function ScheduleSection({ onRunImport, runImportRunning }: ScheduleSectionProps
   }, [draft, saveSchedule]);
 
   return (
-    <div className={styles.section}>
-      <div className={styles.sectionHeader}>
+    <div className={sectionStyles.section}>
+      <div className={sectionStyles.sectionHeader}>
         <Text size={500} weight="semibold">
           Import Schedule
         </Text>
@@ -810,11 +785,12 @@ function ScheduleSection({ onRunImport, runImportRunning }: ScheduleSectionProps
 
 function ImportLogSection(): React.JSX.Element {
   const styles = useStyles();
+  const sectionStyles = useCommonSectionStyles();
   const { data, loading, error, page, setPage, refresh } = useImportLog(undefined, 20);
 
   return (
-    <div className={styles.section}>
-      <div className={styles.sectionHeader}>
+    <div className={sectionStyles.section}>
+      <div className={sectionStyles.sectionHeader}>
         <Text size={500} weight="semibold">
           Import Log
         </Text>