Replace inline frontend styles with makeStyles and design tokens

frontend/src/components/TopCountriesBarChart.tsx

@@ -20,6 +20,7 @@ import {
   CHART_GRID_LINE_TOKEN,
   resolveFluentToken,
 } from "../utils/chartTheme";
+import { ChartTooltip } from "./ChartTooltip";
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -60,6 +61,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 = 140;
+
 const useStyles = makeStyles({
   wrapper: {
     width: "100%",
@@ -106,30 +111,18 @@ function buildEntries(
 // Custom tooltip
 // ---------------------------------------------------------------------------
 
-function BarTooltip(
-  props: TooltipContentProps,
-): React.JSX.Element | null {
+function BarTooltip(props: TooltipContentProps): React.JSX.Element | null {
   const { active, payload } = props;
   if (!active || payload.length === 0) return null;
   const entry = payload[0];
   if (entry == null) return null;
-  // `fullName` is stored as an extra field on the payload item.
   const fullName = (entry.payload as BarEntry).fullName;
   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(entry.value)} ban{entry.value === 1 ? "" : "s"}
-    </div>
+    </ChartTooltip>
   );
 }
 
@@ -171,20 +164,20 @@ export function TopCountriesBarChart({
         <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={140}
-            tick={{ fill: axisColour, fontSize: 12 }}
+            width={Y_AXIS_WIDTH}
+            tick={{ fill: axisColour, fontSize: CHART_TICK_FONT_SIZE }}
             axisLine={false}
             tickLine={false}
           />