chore: verify and finalize task completion for existing refactor tasks

frontend/src/pages/HistoryPage.tsx

@@ -36,6 +36,7 @@ import {
   makeStyles,
   tokens,
 } from "@fluentui/react-components";
+import { useCardStyles } from "../theme/commonStyles";
 import {
   ArrowCounterclockwiseRegular,
   ArrowLeftRegular,
@@ -118,9 +119,6 @@ const useStyles = makeStyles({
     gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
     gap: tokens.spacingVerticalM,
     padding: tokens.spacingVerticalM,
-    background: tokens.colorNeutralBackground2,
-    borderRadius: tokens.borderRadiusMedium,
-    border: `1px solid ${tokens.colorNeutralStroke1}`,
     marginBottom: tokens.spacingVerticalM,
   },
   detailField: {
@@ -222,6 +220,7 @@ interface IpDetailViewProps {
 
 function IpDetailView({ ip, onBack }: IpDetailViewProps): React.JSX.Element {
   const styles = useStyles();
+  const cardStyles = useCardStyles();
   const { detail, loading, error, refresh } = useIpHistory(ip);
 
   if (loading) {
@@ -278,7 +277,7 @@ function IpDetailView({ ip, onBack }: IpDetailViewProps): React.JSX.Element {
       </div>
 
       {/* Summary grid */}
-      <div className={styles.detailGrid}>
+      <div className={`${cardStyles.card} ${styles.detailGrid}`}>
         <div className={styles.detailField}>
           <span className={styles.detailLabel}>Total Bans</span>
           <span className={styles.detailValue}>{String(detail.total_bans)}</span>