Replace inline frontend styles with makeStyles and design tokens

frontend/src/components/blocklist/BlocklistScheduleSection.tsx

@@ -166,7 +166,7 @@ export function BlocklistScheduleSection({ onRunImport, runImportRunning }: Sche
               </>
             )}
 
-            <Button appearance="primary" onClick={handleSave} disabled={saving} style={{ alignSelf: "flex-end" }}>
+            <Button appearance="primary" className={styles.saveButton} onClick={handleSave} disabled={saving}>
               {saving ? <Spinner size="tiny" /> : "Save Schedule"}
             </Button>
           </div>

frontend/src/components/blocklist/BlocklistSourcesSection.tsx

@@ -118,7 +118,7 @@ export function BlocklistSourcesSection({ onRunImport, runImportRunning }: Sourc
         <Text size={500} weight="semibold">
           Blocklist Sources
         </Text>
-        <div style={{ display: "flex", gap: "8px" }}>
+        <div className={styles.headerActions}>
           <Button icon={<PlayRegular />} appearance="secondary" onClick={onRunImport} disabled={runImportRunning}>
             {runImportRunning ? <Spinner size="tiny" /> : "Run Now"}
           </Button>

frontend/src/components/blocklist/PreviewDialog.tsx

@@ -11,6 +11,8 @@ import {
   MessageBarBody,
   Spinner,
   Text,
+  makeStyles,
+  tokens,
 } from "@fluentui/react-components";
 import type { BlocklistSource, PreviewResponse } from "../../types/blocklist";
 
@@ -21,7 +23,25 @@ interface PreviewDialogProps {
   fetchPreview: (id: number) => Promise<PreviewResponse>;
 }
 
+const useStyles = makeStyles({
+  centeredLoader: {
+    textAlign: "center",
+    padding: tokens.spacingVerticalL,
+  },
+  previewStack: {
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingVerticalXS,
+  },
+  previewEntries: {
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingVerticalXS,
+  },
+});
+
 export function PreviewDialog({ open, source, onClose, fetchPreview }: PreviewDialogProps): React.JSX.Element {
+  const styles = useStyles();
   const [data, setData] = useState<PreviewResponse | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -49,7 +69,7 @@ export function PreviewDialog({ open, source, onClose, fetchPreview }: PreviewDi
           <DialogTitle>Preview — {source?.name ?? ""}</DialogTitle>
           <DialogContent>
             {loading && (
-              <div style={{ textAlign: "center", padding: "16px" }}>
+              <div className={styles.centeredLoader}>
                 <Spinner label="Downloading…" />
               </div>
             )}
@@ -59,11 +79,11 @@ export function PreviewDialog({ open, source, onClose, fetchPreview }: PreviewDi
               </MessageBar>
             )}
             {data && (
-              <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+              <div className={styles.previewStack}>
                 <Text size={300}>
                   {data.valid_count} valid IPs / {data.skipped_count} skipped of {data.total_lines} total lines. Showing first {data.entries.length}:
                 </Text>
-                <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+                <div className={styles.previewEntries}>
                   {data.entries.map((entry) => (
                     <div key={entry}>{entry}</div>
                   ))}

frontend/src/components/blocklist/SourceFormDialog.tsx

@@ -12,6 +12,8 @@ import {
   MessageBar,
   MessageBarBody,
   Switch,
+  makeStyles,
+  tokens,
 } from "@fluentui/react-components";
 
 interface SourceFormValues {
@@ -30,6 +32,14 @@ interface SourceFormDialogProps {
   onSubmit: (values: SourceFormValues) => void;
 }
 
+const useStyles = makeStyles({
+  contentStack: {
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingVerticalL,
+  },
+});
+
 export function SourceFormDialog({
   open,
   mode,
@@ -39,6 +49,7 @@ export function SourceFormDialog({
   onClose,
   onSubmit,
 }: SourceFormDialogProps): React.JSX.Element {
+  const styles = useStyles();
   const [values, setValues] = useState<SourceFormValues>(initial);
 
   const handleOpen = useCallback((): void => {
@@ -56,7 +67,7 @@ export function SourceFormDialog({
         <DialogBody>
           <DialogTitle>{mode === "add" ? "Add Blocklist Source" : "Edit Blocklist Source"}</DialogTitle>
           <DialogContent>
-            <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+            <div className={styles.contentStack}>
               {error && (
                 <MessageBar intent="error">
                   <MessageBarBody>{error}</MessageBarBody>

frontend/src/components/blocklist/blocklistStyles.ts

@@ -9,7 +9,8 @@ export const useBlocklistStyles = makeStyles({
 
   tableWrapper: { overflowX: "auto" },
   actionsCell: { display: "flex", gap: tokens.spacingHorizontalS, flexWrap: "wrap" },
-  mono: { fontFamily: "Consolas, 'Courier New', monospace", fontSize: "12px" },
+  headerActions: { display: "flex", gap: tokens.spacingHorizontalS },
+  mono: { fontFamily: tokens.fontFamilyMonospace, fontSize: tokens.fontSizeBase200 },
   centred: {
     display: "flex",
     justifyContent: "center",
@@ -22,13 +23,14 @@ export const useBlocklistStyles = makeStyles({
     alignItems: "flex-end",
   },
   scheduleField: { minWidth: "140px" },
+  saveButton: { alignSelf: "flex-end" },
   metaRow: {
     display: "flex",
     gap: tokens.spacingHorizontalL,
     flexWrap: "wrap",
     paddingTop: tokens.spacingVerticalS,
   },
-  metaItem: { display: "flex", flexDirection: "column", gap: "2px" },
+  metaItem: { display: "flex", flexDirection: "column", gap: tokens.spacingHorizontalXXS },
   runResult: {
     display: "flex",
     flexDirection: "column",