From 02b21a2cfef96987f26b6ce7d8fe73a896d5a8fa Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Thu, 23 Apr 2026 10:43:07 +1000
Subject: [PATCH] CompareBar: bump sizes, drop Compare icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Badge: small (22px) → medium (26px)
- Typography: body2 (14px) → body1 (16px)
- Compare Button: small (32px) → medium (40px)
- Container padding: px 2.5 → 3, py 1.25 → 1.5 for proportional breathing
- maxWidth: md 420 → 460 to accommodate larger Button + padding
- gap: 1.5 → 2 between elements
- Drop CompareArrowsIcon from the Compare button — the label alone
  reads clearly at the new size and removes visual noise

Positioning unchanged: the fixed bottom-centre pill defaults stay in
the component (it IS a floating compare pill — that's definitional),
with the caller's `sx` merged after so any page can override
(`sx={{ bottom: 96 }}`) when it needs to dodge another fixed element.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../molecules/CompareBar/CompareBar.tsx        | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/molecules/CompareBar/CompareBar.tsx b/src/components/molecules/CompareBar/CompareBar.tsx
index 76795a6..deebc8d 100644
--- a/src/components/molecules/CompareBar/CompareBar.tsx
+++ b/src/components/molecules/CompareBar/CompareBar.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import Paper from '@mui/material/Paper';
 import Slide from '@mui/material/Slide';
-import CompareArrowsIcon from '@mui/icons-material/CompareArrows';
 import type { SxProps, Theme } from '@mui/material/styles';
 import { Typography } from '../../atoms/Typography';
 import { Button } from '../../atoms/Button';
@@ -67,22 +66,22 @@ export const CompareBar = React.forwardRef<HTMLDivElement, CompareBarProps>(
               borderRadius: '9999px',
               display: 'flex',
               alignItems: 'center',
-              gap: 1.5,
-              px: 2.5,
-              py: 1.25,
-              maxWidth: { xs: 'calc(100vw - 32px)', md: 420 },
+              gap: 2,
+              px: 3,
+              py: 1.5,
+              maxWidth: { xs: 'calc(100vw - 32px)', md: 460 },
             }),
             ...(Array.isArray(sx) ? sx : [sx]),
           ]}
         >
           {/* Fraction badge — 1/3, 2/3, 3/3 */}
-          <Badge color="brand" variant="soft" size="small" sx={{ flexShrink: 0 }}>
+          <Badge color="brand" variant="soft" size="medium" sx={{ flexShrink: 0 }}>
             {count}/3
           </Badge>
 
           {/* Status text */}
           <Typography
-            variant="body2"
+            variant="body1"
             role={error ? 'alert' : undefined}
             sx={{
               fontWeight: 500,
@@ -93,11 +92,10 @@ export const CompareBar = React.forwardRef<HTMLDivElement, CompareBarProps>(
             {error || statusText}
           </Typography>
 
-          {/* Compare CTA */}
+          {/* Compare CTA — icon dropped; label alone at medium size is enough */}
           <Button
             variant="contained"
-            size="small"
-            startIcon={<CompareArrowsIcon />}
+            size="medium"
             onClick={onCompare}
             disabled={!canCompare}
             sx={{ flexShrink: 0, borderRadius: '9999px' }}