Replace inline frontend styles with makeStyles and design tokens

frontend/src/components/ChartTooltip.tsx

@@ -0,0 +1,23 @@
+import { makeStyles, tokens } from "@fluentui/react-components";
+
+const useStyles = makeStyles({
+  tooltip: {
+    backgroundColor: tokens.colorNeutralBackground1,
+    border: `1px solid ${tokens.colorNeutralStroke2}`,
+    borderRadius: tokens.borderRadiusSmall,
+    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,
+    color: tokens.colorNeutralForeground1,
+    fontSize: tokens.fontSizeBase200,
+  },
+});
+
+interface ChartTooltipProps {
+  active: boolean;
+  children: React.ReactNode;
+}
+
+export function ChartTooltip({ active, children }: ChartTooltipProps): React.JSX.Element | null {
+  const styles = useStyles();
+  if (!active) return null;
+  return <div className={styles.tooltip}>{children}</div>;
+}