chore: verify and finalize task completion for existing refactor tasks

frontend/src/components/WorldMap.tsx

@@ -11,6 +11,7 @@ import { createPortal } from "react-dom";
 import { useCallback, useState } from "react";
 import { ComposableMap, ZoomableGroup, Geography, useGeographies } from "react-simple-maps";
 import { Button, makeStyles, tokens } from "@fluentui/react-components";
+import { useCardStyles } from "../theme/commonStyles";
 import type { GeoPermissibleObjects } from "d3-geo";
 import { ISO_NUMERIC_TO_ALPHA2 } from "../data/isoNumericToAlpha2";
 import { getBanCountColor } from "../utils/mapColors";
@@ -30,9 +31,6 @@ const useStyles = makeStyles({
   mapWrapper: {
     width: "100%",
     position: "relative",
-    backgroundColor: tokens.colorNeutralBackground2,
-    borderRadius: tokens.borderRadiusMedium,
-    border: `1px solid ${tokens.colorNeutralStroke1}`,
     overflow: "hidden",
   },
   countLabel: {
@@ -290,6 +288,7 @@ export function WorldMap({
   thresholdHigh = 100,
 }: WorldMapProps): React.JSX.Element {
   const styles = useStyles();
+  const cardStyles = useCardStyles();
   const [zoom, setZoom] = useState<number>(1);
   const [center, setCenter] = useState<[number, number]>([0, 0]);
 
@@ -308,7 +307,7 @@ export function WorldMap({
 
   return (
     <div
-      className={styles.mapWrapper}
+      className={`${cardStyles.card} ${styles.mapWrapper}`}
       role="img"
       aria-label="World map showing banned IP counts by country. Click a country to filter the table below."
     >