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:
@@ -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' }}
|
||||||
|
|||||||
Reference in New Issue
Block a user