julienfroidefond/fintrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: enhance layout and styling consistency in dashboard components, including adjustments to card headers, content, and typography for improved readability and responsiveness

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-08 06:44:59 +01:00
parent 0321eab5b5
commit 1263ac9c52
3 changed files with 31 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/layout/page-header.tsx
View File

@@ -23,22 +23,27 @@ export function PageHeader({
const isMobile = useIsMobile();
return (
<div className="relative flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-2">
<div className="flex items-center gap-4 flex-1 min-w-0">
<div className="flex flex-col gap-4 mb-2">
<div className="flex items-start gap-4 flex-1 min-w-0">
{isMobile && (
<Button
variant="ghost"
size="icon"
onClick={() => setOpen(true)}
className="shrink-0 rounded-xl hover:bg-muted/60"
className="shrink-0 rounded-xl hover:bg-muted/60 mt-1"
>
<Menu className="w-5 h-5" />
</Button>
)}
<div className="flex-1 min-w-0 pr-20 md:pr-0">
<h1 className="text-3xl md:text-4xl lg:text-5xl font-black text-foreground tracking-tight mb-2 leading-tight">
{title}
</h1>
<div className="flex-1 min-w-0">
<div className="flex items-start justify-between gap-2 mb-2">
<h1 className="text-2xl md:text-4xl lg:text-5xl font-black text-foreground tracking-tight leading-tight flex-1 min-w-0">
{title}
</h1>
{rightContent && (
<div className="shrink-0">{rightContent}</div>
)}
</div>
{description && (
<div className="text-base md:text-lg text-muted-foreground/70 font-semibold">
{description}
@@ -46,24 +51,10 @@ export function PageHeader({
)}
</div>
</div>
{(rightContent || actions) && (
<>
{isMobile ? (
<div className="absolute top-0 right-0 flex items-center gap-2">
{rightContent}
{actions && (
<div className="[&>button]:h-10 [&>button]:px-3 [&>button]:text-sm">
{actions}
</div>
)}
</div>
) : (
<div className="flex items-center gap-3 flex-wrap">
{rightContent}
{actions && <div className="flex gap-3">{actions}</div>}
</div>
)}
</>
{actions && (
<div className="flex items-center gap-3 flex-wrap justify-end">
{actions}
</div>
)}
</div>
);