Refactor BlocklistsPage into section components and fix frontend lint issues

frontend/src/components/blocklist/blocklistStyles.ts

@@ -0,0 +1,62 @@
+import { makeStyles, tokens } from "@fluentui/react-components";
+
+export const useBlocklistStyles = makeStyles({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingVerticalXL,
+  },
+
+  tableWrapper: { overflowX: "auto" },
+  actionsCell: { display: "flex", gap: tokens.spacingHorizontalS, flexWrap: "wrap" },
+  mono: { fontFamily: "Consolas, 'Courier New', monospace", fontSize: "12px" },
+  centred: {
+    display: "flex",
+    justifyContent: "center",
+    padding: tokens.spacingVerticalL,
+  },
+  scheduleForm: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: tokens.spacingHorizontalM,
+    alignItems: "flex-end",
+  },
+  scheduleField: { minWidth: "140px" },
+  metaRow: {
+    display: "flex",
+    gap: tokens.spacingHorizontalL,
+    flexWrap: "wrap",
+    paddingTop: tokens.spacingVerticalS,
+  },
+  metaItem: { display: "flex", flexDirection: "column", gap: "2px" },
+  runResult: {
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingVerticalXS,
+    maxHeight: "320px",
+    overflowY: "auto",
+  },
+  pagination: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: tokens.spacingHorizontalS,
+    alignItems: "center",
+    paddingTop: tokens.spacingVerticalS,
+  },
+  dialogForm: {
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingVerticalM,
+    minWidth: "380px",
+  },
+  previewList: {
+    fontFamily: "Consolas, 'Courier New', monospace",
+    fontSize: "12px",
+    maxHeight: "280px",
+    overflowY: "auto",
+    backgroundColor: tokens.colorNeutralBackground3,
+    padding: tokens.spacingVerticalS,
+    borderRadius: tokens.borderRadiusMedium,
+  },
+  errorRow: { backgroundColor: tokens.colorStatusDangerBackground1 },
+});