diff --git a/frontend/src/components/StarToggle.tsx b/frontend/src/components/StarToggle.tsx index f164864..8e5fadc 100644 --- a/frontend/src/components/StarToggle.tsx +++ b/frontend/src/components/StarToggle.tsx @@ -49,8 +49,8 @@ type Props = { onClick: () => void; disabled?: boolean; ariaLabel: string; - /** The pen's own accent was an arbitrary demo purple (#ca12ea) -- gold reads as "starred" - * without needing to look up what an app-specific brand purple would even mean here. */ + /** The pen's own accent was an arbitrary demo purple (#ca12ea) -- this app's brand orange reads + * as "starred" instead. */ activeColor?: string; /** Needs to be readable against whatever backdrop this instance sits on -- e.g. white over * ModelCard's dark hover scrim, vs. a neutral grey over FavoriteButton's plain page bg. */ @@ -73,7 +73,7 @@ export default function StarToggle({ onClick, disabled, ariaLabel, - activeColor = "#e0a52c", + activeColor = "#f6a800", inactiveColor = "text.disabled", size = 20, sx, diff --git a/frontend/src/pages/ModelDetailPage/ModelSidePanel.tsx b/frontend/src/pages/ModelDetailPage/ModelSidePanel.tsx index 1a5fd56..b93d469 100644 --- a/frontend/src/pages/ModelDetailPage/ModelSidePanel.tsx +++ b/frontend/src/pages/ModelDetailPage/ModelSidePanel.tsx @@ -49,7 +49,12 @@ export default function ModelSidePanel({ print, onSelectCategory, onUnauthorized const goToCategory = () => { if (!print.category_id) return; onSelectCategory(print.category_id); - navigate("/models"); + // Carries the category straight into the URL instead of navigating to plain "/models" and + // letting ModelsPage's mount-time effects reconcile categoryId against the (momentarily + // absent) ?category= param -- those two effects each only no-op once state and URL already + // agree, so landing with them disagreeing made the grid flicker between the category and + // "All" for a render or two before settling. + navigate(`/models?category=${print.category_id}`); }; const importedDate = print.source_provider diff --git a/frontend/src/pages/ModelsPage/ModelCard.tsx b/frontend/src/pages/ModelsPage/ModelCard.tsx index 005a425..4c85003 100644 --- a/frontend/src/pages/ModelsPage/ModelCard.tsx +++ b/frontend/src/pages/ModelsPage/ModelCard.tsx @@ -45,6 +45,9 @@ const overlayButtonSx = { padding: 0, borderRadius: "50%", bgcolor: "background.paper", + // IconButton's own hover state otherwise tints its background on top of this -- keep it flat + // no matter which state (hover, focus-visible, actively pressed) triggers that. + "&:hover, &.Mui-focusVisible, &:active": { bgcolor: "background.paper" }, } as const; export default function ModelCard({ diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts index cf7bb7f..ce95568 100644 --- a/frontend/src/theme.ts +++ b/frontend/src/theme.ts @@ -162,18 +162,17 @@ export function buildTheme(id: ResolvedTheme): Theme { MuiButton: { styleOverrides: { root: { borderRadius: 8 } } }, MuiChip: { styleOverrides: { root: { borderRadius: 6 } } }, MuiTooltip: { styleOverrides: { tooltip: { backgroundColor: d.panelStrong, color: d.text } } }, + // A success toast (see ToastProvider) should always read as "this worked" in the brand + // green (#00b800) with white text -- e.g. favoriting a model -- not MUI's own default + // success palette, in either theme. + MuiAlert: { styleOverrides: { filledSuccess: { backgroundColor: d.accent, color: d.accentContrast } } }, // Dark mode is deliberately square everywhere -- corners, chips, avatars, the back-to-top // FAB, all of it. `sx`-set radii (the vast majority of them: cards, panels, the info box, // etc.) beat theme.shape.borderRadius and component styleOverrides alike, so nothing short // of an !important global rule reaches all of them; MuiCssBaseline's styleOverrides is // exactly the escape hatch for page-level CSS the theme needs to own like this. ...(d.mode === "dark" - ? { - MuiCssBaseline: { styleOverrides: "*, *::before, *::after { border-radius: 0 !important; }" }, - // A success toast (see ToastProvider) should read as "this worked" in the brand - // green, not MUI's own default success palette -- e.g. favoriting a model. - MuiAlert: { styleOverrides: { filledSuccess: { backgroundColor: d.accent, color: d.accentContrast } } }, - } + ? { MuiCssBaseline: { styleOverrides: "*, *::before, *::after { border-radius: 0 !important; }" } } : {}), }, thingport: {