Replace inline frontend styles with makeStyles and design tokens

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