fix: couple minor UX issues

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,

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

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({

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: {