feat(ui): add reduced-motion floor and tasteful hover micro-interactions
Global @media (prefers-reduced-motion: reduce) rule in MuiCssBaseline collapses every animation/transition duration to near-zero at once -- covers MUI's own Dialog/Menu/Collapse/ripple transitions and every hover-lift added below, so accessibility doesn't need re-checking per-component as more motion gets added later. Dashboard stat tiles and Kanban cards get a subtle hover lift (shadow deepens, translateY(-2px)/-1px), matching the hover pattern the landing page's feature cards already had -- these are the two places a small lift reads as an affordance rather than noise: stat tiles are dashboard-customization-adjacent, and kanban cards are literally draggable, so the lift reinforces the existing grab-cursor signal instead of competing with it. Left everything else alone -- most cards on this app hold passive content, not something to invite a hover response.
This commit is contained in:
@@ -199,6 +199,9 @@ export default function KanbanBoard() {
|
||||
cursor: "grab",
|
||||
borderRadius: 2.5,
|
||||
borderLeft: `4px solid ${c}`,
|
||||
transition: "box-shadow .15s, transform .15s",
|
||||
"&:hover": { boxShadow: 4, transform: "translateY(-1px)" },
|
||||
"&:active": { cursor: "grabbing" },
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ p: 1.25, "&:last-child": { pb: 1.25 } }}>
|
||||
|
||||
Reference in New Issue
Block a user