mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-10 13:22:14 +00:00
style: one spacing, title and skeleton language across the app
Icons inside buttons drop their manual margins in favour of the button's built-in gap (two hundred call sites), form field stacks settle on one spacing step, card titles on exactly two sizes, inline field errors on one text size, and a dozen hand-rolled loading pulses move onto the shared skeleton primitive while keeping their silhouettes. The intake dialog wording joins the rest of the app on 'übersprungen', and the UI guidelines now document the two deliberate footer and touch-target systems.
This commit is contained in:
1 parent
4ca3de5ff3
commit
04765ea8ac
92 files changed
+1433
-1445
No files matched your search
@@ -18,9 +18,9 @@ import { cn } from "@/lib/utils";
|
||||
* ```tsx
|
||||
* <Button disabled={loading} aria-busy={loading || undefined}>
|
||||
* {loading ? (
|
||||
* <Loader2 className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none" />
|
||||
* <Loader2 className="h-4 w-4 animate-spin motion-reduce:animate-none" />
|
||||
* ) : (
|
||||
* <Icon className="mr-2 h-4 w-4" />
|
||||
* <Icon className="h-4 w-4" />
|
||||
* )}
|
||||
* {label}
|
||||
* </Button>
|
||||
|
||||
@@ -42,7 +42,18 @@ export interface ResponsiveSheetProps {
|
||||
*/
|
||||
hideHeader?: boolean;
|
||||
/**
|
||||
* Footer slot. The Sheet branch sticky-pins the footer to the
|
||||
* Footer slot. Pass the action `<Button>`s directly (a fragment is
|
||||
* fine) — never a wrapper `<div className="flex …">`. The two
|
||||
* branches deliberately stack differently and both rely on owning
|
||||
* the flex context: the Sheet branch pins a `flex-row justify-end`
|
||||
* bar so Cancel/Save sit side by side above the keyboard, while the
|
||||
* Dialog branch defers to `DialogFooter`'s `flex-col-reverse
|
||||
* sm:flex-row` so narrow dialogs stack the primary action on top.
|
||||
* A consumer-supplied wrapper div collapses both into a single flex
|
||||
* child and breaks that responsive stacking. This split is a
|
||||
* decision, not drift — don't unify the two branches.
|
||||
*
|
||||
* The Sheet branch sticky-pins the footer to the
|
||||
* bottom of the bottom-sheet so the primary CTA stays reachable
|
||||
* once the body scrolls; the Dialog branch lets the footer flow
|
||||
* normally beneath the body.
|
||||
@@ -167,7 +178,7 @@ export function ResponsiveSheet({
|
||||
{footer ? (
|
||||
<SheetFooter
|
||||
data-slot="responsive-sheet-footer"
|
||||
className="border-border/70 sticky bottom-0 mt-0 flex-row justify-end gap-2 border-t bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/80"
|
||||
className="border-border/70 bg-background/95 supports-[backdrop-filter]:bg-background/80 sticky bottom-0 mt-0 flex-row justify-end gap-2 border-t p-4 backdrop-blur"
|
||||
>
|
||||
{footer}
|
||||
</SheetFooter>
|
||||
|
||||
Reference in new issue
Block a user