CompareBar: bump sizes, drop Compare icon

- 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>
This commit is contained in:
2026-04-23 10:43:07 +10:00
parent a7db1974c3
commit 02b21a2cfe

View File

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