Refactor: Replace inline style objects with makeStyles classes

Moved all static layout properties (display, gap, margin, padding, colour) from inline style props to makeStyles classes in: - MapBansTable.tsx: Pagination row flexbox layout - JailDetailPage.tsx: Link styling for textDecoration - HistoryPage.tsx: Summary text styling - IpDetailView.tsx: Loading container and text formatting Kept inline styles only for genuinely dynamic values: - WorldMap.tsx: Tooltip position (follows mouse) - TopCountriesPieChart.tsx: Legend color (from recharts data) - TopCountriesBarChart.tsx: Chart height (derives from data length) This change improves performance by leveraging Griffel's atomic CSS cache and ensures consistency with the established Fluent UI pattern. Updated Docs/Web-Development.md with explicit rule: inline styles only for runtime-dynamic values, all static properties go in makeStyles. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-04-25 19:48:25 +02:00
parent c1135150c3
commit 045c8048fe
6 changed files with 74 additions and 40 deletions
--- a/frontend/src/pages/HistoryPage.tsx
+++ b/frontend/src/pages/HistoryPage.tsx
@@ -116,6 +116,9 @@ const useStyles = makeStyles({
    fontFamily: "Consolas, 'Courier New', monospace",
    fontSize: "0.85rem",
  },
+  summaryText: {
+    color: tokens.colorNeutralForeground3,
+  },
 });

 // ---------------------------------------------------------------------------
@@ -292,7 +295,7 @@ export function HistoryPage(): React.JSX.Element {
      {/* Summary                                                           */}
      {/* ---------------------------------------------------------------- */}
      {!loading && !error && (
-        <Text size={300} style={{ color: tokens.colorNeutralForeground3 }}>
+        <Text size={300} className={styles.summaryText}>
          {String(total)} record{total !== 1 ? "s" : ""} found ·
          Page {String(currentPage)} of {String(totalPages)} ·
          Rows highlighted in yellow have {String(HIGH_BAN_THRESHOLD)}+ repeat bans
--- a/frontend/src/pages/JailDetailPage.tsx
+++ b/frontend/src/pages/JailDetailPage.tsx
@@ -5,7 +5,7 @@
 * identified by the `:name` route parameter.
 */

-import { Button, MessageBar, MessageBarBody, Spinner, Text } from "@fluentui/react-components";
+import { Button, MessageBar, MessageBarBody, Spinner, Text, makeStyles } from "@fluentui/react-components";
 import { ArrowLeftRegular } from "@fluentui/react-icons";
 import { Link, useParams } from "react-router-dom";
 import { useJailData } from "../hooks/useJailData";
@@ -18,7 +18,14 @@ import { BantimeEscalationSection } from "../components/jail/BantimeEscalationSe
 import { IgnoreListSection } from "../components/jail/IgnoreListSection";
 import { useJailDetailPageStyles } from "../components/jail/jailDetailPageStyles";

+const useLinkStyles = makeStyles({
+  link: {
+    textDecoration: "none",
+  },
+});
+
 export function JailDetailPage(): React.JSX.Element {
+  const linkStyles = useLinkStyles();
  const styles = useJailDetailPageStyles();
  const { name = "" } = useParams<{ name: string }>();
  const { jail, ignoreList, ignoreSelf, loading, error, refresh } = useJailData(name);
@@ -50,7 +57,7 @@ export function JailDetailPage(): React.JSX.Element {
  if (error) {
    return (
      <div className={styles.root}>
-        <Link to="/jails" style={{ textDecoration: "none" }}>
+        <Link to="/jails" className={linkStyles.link}>
          <Button appearance="subtle" icon={<ArrowLeftRegular />}>
            Back to Jails
          </Button>
@@ -67,7 +74,7 @@ export function JailDetailPage(): React.JSX.Element {
  return (
    <div className={styles.root}>
      <div className={styles.breadcrumb}>
-        <Link to="/jails" style={{ textDecoration: "none" }}>
+        <Link to="/jails" className={linkStyles.link}>
          <Button appearance="subtle" size="small" icon={<ArrowLeftRegular />}>
            Jails
          </Button>
--- a/frontend/src/pages/history/IpDetailView.tsx
+++ b/frontend/src/pages/history/IpDetailView.tsx
@@ -67,6 +67,24 @@ const useStyles = makeStyles({
    borderRadius: tokens.borderRadiusMedium,
    border: `1px solid ${tokens.colorNeutralStroke1}`,
  },
+  loadingContainer: {
+    display: "flex",
+    justifyContent: "center",
+    padding: tokens.spacingVerticalXL,
+  },
+  headerControls: {
+    display: "flex",
+    alignItems: "center",
+    gap: tokens.spacingHorizontalM,
+  },
+  dimmedText: {
+    color: tokens.colorNeutralForeground3,
+  },
+  monoPreformatted: {
+    fontFamily: "Consolas, 'Courier New', monospace",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-all",
+  },
 });

 export function IpDetailView({ ip, onBack }: IpDetailViewProps): React.JSX.Element {
@@ -76,7 +94,7 @@ export function IpDetailView({ ip, onBack }: IpDetailViewProps): React.JSX.Eleme

  if (loading) {
    return (
-      <div style={{ display: "flex", justifyContent: "center", padding: tokens.spacingVerticalXL }}>
+      <div className={styles.loadingContainer}>
        <Spinner label={`Loading history for ${ip}…`} />
      </div>
    );
@@ -101,7 +119,7 @@ export function IpDetailView({ ip, onBack }: IpDetailViewProps): React.JSX.Eleme
  return (
    <div className={styles.root}>
      <div className={styles.header}>
-        <div style={{ display: "flex", alignItems: "center", gap: tokens.spacingHorizontalM }}>
+        <div className={styles.headerControls}>
          <Button icon={<ArrowLeftRegular />} appearance="subtle" onClick={onBack}>
            Back to list
          </Button>
@@ -176,17 +194,13 @@ export function IpDetailView({ ip, onBack }: IpDetailViewProps): React.JSX.Eleme
                <TableCell>
                  <TableCellLayout>
                    {event.matches.length === 0 ? (
-                      <Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
+                      <Text size={200} className={styles.dimmedText}>
                        —
                      </Text>
                    ) : (
                      <Text
                        size={100}
-                        style={{
-                          fontFamily: "Consolas, 'Courier New', monospace",
-                          whiteSpace: "pre-wrap",
-                          wordBreak: "break-all",
-                        }}
+                        className={styles.monoPreformatted}
                      >
                        {event.matches.join("\n")}
                      </Text>
--- a/frontend/src/pages/map/MapBansTable.tsx
+++ b/frontend/src/pages/map/MapBansTable.tsx
@@ -10,6 +10,7 @@ import {
  TableRow,
  Text,
  Tooltip,
+  makeStyles,
  tokens,
 } from "@fluentui/react-components";
 import { ChevronLeftRegular, ChevronRightRegular } from "@fluentui/react-icons";
@@ -27,6 +28,33 @@ interface MapBansTableProps {
  onPageSizeChange: (pageSize: number) => void;
 }

+const useStyles = makeStyles({
+  paginationRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: tokens.spacingHorizontalS,
+    marginTop: tokens.spacingVerticalS,
+  },
+  paginationLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: tokens.spacingHorizontalS,
+  },
+  pageSize: {
+    display: "flex",
+    alignItems: "center",
+    gap: tokens.spacingHorizontalS,
+  },
+  paginationButtons: {
+    display: "flex",
+    gap: tokens.spacingHorizontalXS,
+  },
+  dimmedText: {
+    color: tokens.colorNeutralForeground3,
+  },
+});
+
 export function MapBansTable({
  pageBans,
  visibleCount,
@@ -38,6 +66,7 @@ export function MapBansTable({
  onPageChange,
  onPageSizeChange,
 }: MapBansTableProps): React.JSX.Element {
+  const styles = useStyles();
  return (
    <>
      <Table size="small" aria-label="Bans list">
@@ -56,7 +85,7 @@ export function MapBansTable({
            <TableRow>
              <TableCell colSpan={6}>
                <TableCellLayout>
-                  <Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
+                  <Text size={200} className={styles.dimmedText}>
                    No bans found.
                  </Text>
                </TableCellLayout>
@@ -83,7 +112,7 @@ export function MapBansTable({
                        content="Country could not be resolved — will retry automatically."
                        relationship="description"
                      >
-                        <Text style={{ color: tokens.colorNeutralForeground3 }}>—</Text>
+                        <Text className={styles.dimmedText}>—</Text>
                      </Tooltip>
                    )}
                  </TableCellLayout>
@@ -108,14 +137,14 @@ export function MapBansTable({
      </Table>

      {visibleCount > 0 && (
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: tokens.spacingHorizontalS, marginTop: tokens.spacingVerticalS }}>
-          <div style={{ display: "flex", alignItems: "center", gap: tokens.spacingHorizontalS }}>
-            <Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
+        <div className={styles.paginationRow}>
+          <div className={styles.paginationLeft}>
+            <Text size={200} className={styles.dimmedText}>
              Showing {pageBans.length} of {visibleCount} filtered ban{visibleCount !== 1 ? "s" : ""}
              {" · "}Page {page} of {totalPages}
            </Text>
-            <div style={{ display: "flex", alignItems: "center", gap: tokens.spacingHorizontalS }}>
-              <Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
+            <div className={styles.pageSize}>
+              <Text size={200} className={styles.dimmedText}>
                Page size
              </Text>
              <select
@@ -134,7 +163,7 @@ export function MapBansTable({
            </div>
          </div>

-          <div style={{ display: "flex", gap: tokens.spacingHorizontalXS }}>
+          <div className={styles.paginationButtons}>
            <Button
              icon={<ChevronLeftRegular />}
              appearance="subtle"