Replace inline frontend styles with makeStyles and design tokens

frontend/src/components/JailDistributionChart.tsx

@@ -16,10 +16,7 @@ import {
   YAxis,
 } from "recharts";
 import type { TooltipContentProps } from "recharts/types/component/Tooltip";
-import {
-  tokens,
-  makeStyles,
-} from "@fluentui/react-components";
+import { makeStyles } from "@fluentui/react-components";
 import {
   CHART_AXIS_TEXT_TOKEN,
   CHART_GRID_LINE_TOKEN,
@@ -27,6 +24,7 @@ import {
   resolveFluentToken,
 } from "../utils/chartTheme";
 import { ChartStateWrapper } from "./ChartStateWrapper";
+import { ChartTooltip } from "./ChartTooltip";
 import { useJailDistribution } from "../hooks/useJailDistribution";
 import type { BanOriginFilter, TimeRange } from "../types/ban";
 
@@ -69,6 +67,10 @@ interface BarEntry {
 // Styles
 // ---------------------------------------------------------------------------
 
+const CHART_TICK_FONT_SIZE = 12;
+const CHART_MARGIN = { top: 4, right: 16, bottom: 4, left: 8 };
+const Y_AXIS_WIDTH = 160;
+
 const useStyles = makeStyles({
   wrapper: {
     width: "100%",
@@ -106,20 +108,11 @@ function JailTooltip(props: TooltipContentProps): React.JSX.Element | null {
 
   const { fullName, value } = entry.payload as BarEntry;
   return (
-    <div
-      style={{
-        backgroundColor: resolveFluentToken(tokens.colorNeutralBackground1),
-        border: `1px solid ${resolveFluentToken(tokens.colorNeutralStroke2)}`,
-        borderRadius: "4px",
-        padding: "8px 12px",
-        color: resolveFluentToken(tokens.colorNeutralForeground1),
-        fontSize: "13px",
-      }}
-    >
+    <ChartTooltip active={active}>
       <strong>{fullName}</strong>
       <br />
       {String(value)} ban{value === 1 ? "" : "s"}
-    </div>
+    </ChartTooltip>
   );
 }
 
@@ -162,20 +155,20 @@ export function JailDistributionChart({
           <BarChart
             layout="vertical"
             data={entries}
-            margin={{ top: 4, right: 16, bottom: 4, left: 8 }}
+            margin={CHART_MARGIN}
           >
             <CartesianGrid strokeDasharray="3 3" stroke={gridColour} horizontal={false} />
             <XAxis
               type="number"
-              tick={{ fill: axisColour, fontSize: 12 }}
+              tick={{ fill: axisColour, fontSize: CHART_TICK_FONT_SIZE }}
               axisLine={{ stroke: gridColour }}
               tickLine={false}
             />
             <YAxis
               type="category"
               dataKey="name"
-              width={160}
-              tick={{ fill: axisColour, fontSize: 12 }}
+              width={Y_AXIS_WIDTH}
+              tick={{ fill: axisColour, fontSize: CHART_TICK_FONT_SIZE }}
               axisLine={false}
               tickLine={false}
             />