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

feat: revamp global styles and component designs with enhanced gradients, shadows, and responsive layouts for a modern fintech aesthetic

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-07 17:42:07 +01:00
parent a33c41f1bd
commit 2db5bc324d
15 changed files with 767 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,6 @@ import { Button } from "@/components/ui/button";
import { Menu } from "lucide-react";
import { useSidebarContext } from "@/components/layout/sidebar-context";
import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils";
interface PageHeaderProps {
title: string;
@@ -24,38 +23,51 @@ export function PageHeader({
const isMobile = useIsMobile();
return (
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div className="flex items-center gap-3">
<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">
{isMobile && (
<Button
variant="ghost"
size="icon"
onClick={() => setOpen(true)}
className="shrink-0"
className="shrink-0 rounded-xl hover:bg-muted/60"
>
<Menu className="w-5 h-5" />
</Button>
)}
<div>
<h1 className="text-lg md:text-2xl font-bold text-foreground">
<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>
{description && (
<div className="text-xs md:text-base text-muted-foreground mt-1">
<div className="text-base md:text-lg text-muted-foreground/70 font-semibold">
{description}
</div>
)}
</div>
</div>
{(rightContent || actions) && (
<div className="flex items-center gap-2 flex-wrap">
{rightContent}
{actions && (
<div className={cn("flex gap-2", isMobile && "flex-wrap")}>
{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>
)}
</div>
</>
)}
</div>
);