Replace inline frontend styles with makeStyles and design tokens

frontend/src/components/TopCountriesPieChart.tsx

@@ -16,6 +16,7 @@ import type { LegendPayload } from "recharts/types/component/DefaultLegendConten
 import type { TooltipContentProps } from "recharts/types/component/Tooltip";
 import { tokens, makeStyles, Text } from "@fluentui/react-components";
 import { CHART_PALETTE, resolveFluentToken } from "../utils/chartTheme";
+import { ChartTooltip } from "./ChartTooltip";
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -107,22 +108,13 @@ function PieTooltip(props: TooltipContentProps): React.JSX.Element | null {
   const banCount = entry.value;
   const displayName: string = entry.name?.toString() ?? "";
   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>{displayName}</strong>
       <br />
       {banCount != null
         ? `${String(banCount)} ban${banCount === 1 ? "" : "s"}`
         : ""}
-    </div>
+    </ChartTooltip>
   );
 }