Move constant inline styles into makeStyles

frontend/src/pages/MapPage.tsx

@@ -14,6 +14,7 @@ import {
   Spinner,
   Text,
   makeStyles,
+  mergeClasses,
   tokens,
 } from "@fluentui/react-components";
 import {
@@ -71,6 +72,29 @@ const useStyles = makeStyles({
     borderRadius: tokens.borderRadiusMedium,
     backgroundColor: tokens.colorNeutralBackground2,
   },
+  headerActions: {
+    display: "flex",
+    alignItems: "center",
+    gap: tokens.spacingHorizontalM,
+    flexWrap: "wrap",
+  },
+  initialLoad: {
+    display: "flex",
+    justifyContent: "center",
+    padding: tokens.spacingVerticalXL,
+  },
+  summaryRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: tokens.spacingHorizontalS,
+  },
+  summaryText: {
+    color: tokens.colorNeutralForeground3,
+  },
+  tableWrapperLoading: {
+    opacity: 0.5,
+    transition: "opacity 150ms",
+  },
   pagination: {
     display: "flex",
     alignItems: "center",
@@ -158,7 +182,7 @@ export function MapPage(): React.JSX.Element {
           World Map
         </Text>
 
-        <div style={{ display: "flex", alignItems: "center", gap: tokens.spacingHorizontalM, flexWrap: "wrap" }}>
+        <div className={styles.headerActions}>
           <DashboardFilterBar
             timeRange={range}
             onTimeRangeChange={(value) => {
@@ -193,7 +217,7 @@ export function MapPage(): React.JSX.Element {
 
       {/* Initial load spinner — only shown before the first data arrives. */}
       {loading && !error && !hasLoadedOnce && (
-        <div style={{ display: "flex", justifyContent: "center", padding: tokens.spacingVerticalXL }}>
+        <div className={styles.initialLoad}>
           <Spinner label="Loading map data…" />
         </div>
       )}
@@ -242,8 +266,8 @@ export function MapPage(): React.JSX.Element {
       {/* Summary line                                                      */}
       {/* ---------------------------------------------------------------- */}
       {!error && hasLoadedOnce && (
-        <div style={{ display: "flex", alignItems: "center", gap: tokens.spacingHorizontalS }}>
-          <Text size={300} style={{ color: tokens.colorNeutralForeground3 }}>
+        <div className={styles.summaryRow}>
+          <Text size={300} className={styles.summaryText}>
             {String(total)} total ban{total !== 1 ? "s" : ""} in the selected period
             {" · "}
             {String(Object.keys(countries).length)} countr{Object.keys(countries).length !== 1 ? "ies" : "y"} affected
@@ -256,7 +280,7 @@ export function MapPage(): React.JSX.Element {
       {/* Companion bans table                                              */}
       {/* ---------------------------------------------------------------- */}
       {!error && hasLoadedOnce && (
-        <div className={styles.tableWrapper} style={{ opacity: loading ? 0.5 : 1, transition: "opacity 150ms" }}>
+        <div className={mergeClasses(styles.tableWrapper, loading && styles.tableWrapperLoading)}>
           <MapBansTable
             pageBans={pageBans}
             visibleCount={visibleBans.length}