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

92
components/dashboard/accounts-summary.tsx
View File

@@ -110,34 +110,34 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
? Math.max(0, (realBalance / totalPositive) * 100)
: 0;
return (
<div key={account.id} className="space-y-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
<Building2 className="w-4 h-4 text-primary" />
return (
<div key={account.id} className="space-y-2.5 p-3 rounded-xl bg-muted/30 hover:bg-muted/50 border border-border/50 hover:border-primary/20 transition-all duration-300 group">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
<Building2 className="w-5 h-5 text-primary" />
</div>
<div>
<p className="font-semibold text-sm">{account.name}</p>
<p className="text-xs text-muted-foreground/70 mt-0.5">
{account.accountNumber}
</p>
</div>
</div>
<span
className={cn(
"font-bold tabular-nums text-base",
realBalance >= 0 ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400",
)}
>
{formatCurrency(realBalance)}
</span>
</div>
<div>
<p className="font-medium text-sm">{account.name}</p>
<p className="text-xs text-muted-foreground">
{account.accountNumber}
</p>
</div>
</div>
<span
className={cn(
"font-semibold tabular-nums",
realBalance >= 0 ? "text-emerald-600" : "text-red-600",
{realBalance > 0 && (
<Progress value={percentage} className="h-2 rounded-full" />
)}
>
{formatCurrency(realBalance)}
</span>
</div>
{realBalance > 0 && (
<Progress value={percentage} className="h-1.5" />
)}
</div>
);
</div>
);
})}
</div>
)}
@@ -152,15 +152,15 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
if (data.accounts.length === 0) {
return (
<Card>
<CardHeader>
<CardTitle>Mes Comptes</CardTitle>
<Card className="card-hover">
<CardHeader className="pb-4">
<CardTitle className="text-base md:text-lg font-bold">Mes Comptes</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-col items-center justify-center py-8 text-center">
<Building2 className="w-12 h-12 text-muted-foreground mb-3" />
<p className="text-muted-foreground">Aucun compte</p>
<p className="text-sm text-muted-foreground mt-1">
<div className="flex flex-col items-center justify-center py-12 text-center">
<Building2 className="w-12 h-12 text-muted-foreground/50 mb-4" />
<p className="text-muted-foreground font-medium">Aucun compte</p>
<p className="text-sm text-muted-foreground/70 mt-2">
Importez un fichier OFX pour ajouter un compte
</p>
</div>
@@ -176,9 +176,9 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
);
return (
<Card>
<CardHeader>
<CardTitle>Mes Comptes</CardTitle>
<Card className="card-hover">
<CardHeader className="pb-4">
<CardTitle className="text-base md:text-lg font-bold">Mes Comptes</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-6">
@@ -214,34 +214,34 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
: 0;
return (
<div key={account.id} className="space-y-2">
<div key={account.id} className="space-y-2.5 p-3 rounded-xl bg-muted/30 hover:bg-muted/50 border border-border/50 hover:border-primary/20 transition-all duration-300 group">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
<Building2 className="w-4 h-4 text-primary" />
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
<Building2 className="w-5 h-5 text-primary" />
</div>
<div>
<p className="font-medium text-sm">
<p className="font-semibold text-sm">
{account.name}
</p>
<p className="text-xs text-muted-foreground">
<p className="text-xs text-muted-foreground/70 mt-0.5">
{account.accountNumber}
</p>
</div>
</div>
<span
className={cn(
"font-semibold tabular-nums",
"font-bold tabular-nums text-base",
realBalance >= 0
? "text-emerald-600"
: "text-red-600",
? "text-emerald-600 dark:text-emerald-400"
: "text-red-600 dark:text-red-400",
)}
>
{formatCurrency(realBalance)}
</span>
</div>
{realBalance > 0 && (
<Progress value={percentage} className="h-1.5" />
<Progress value={percentage} className="h-2 rounded-full" />
)}
</div>
);