feat: refine card styles and interactions across the dashboard; adjust glassmorphism effects, enhance texture for statistic cards, and improve layout for account filter component

This commit is contained in:
Julien Froidefond
2025-12-21 13:33:23 +01:00
parent c4707e5511
commit 6f78dca1f0
4 changed files with 84 additions and 41 deletions

View File

@@ -61,13 +61,13 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
}
return (
<Card className="card-hover">
<CardHeader className="pb-5">
<Card className="card-hover relative overflow-hidden">
<CardHeader className="pb-5 relative z-10">
<CardTitle className="text-lg md:text-xl font-black tracking-tight">
Transactions récentes
</CardTitle>
</CardHeader>
<CardContent className="px-5 md:px-6">
<CardContent className="px-5 md:px-6 relative z-10">
<div className="space-y-3">
{recentTransactions.map((transaction) => {
const category = getCategory(transaction.categoryId);

View File

@@ -21,7 +21,7 @@ export function StatsSummaryCards({
return (
<div className="grid gap-3 md:gap-4 grid-cols-2 md:grid-cols-4">
<Card className="relative overflow-hidden">
<Card className="stat-card-textured relative overflow-hidden">
{/* Icône en arrière-plan */}
<div className="absolute bottom-2 right-2 opacity-[0.04] dark:opacity-[0.03] z-0 pointer-events-none">
<TrendingUp className="h-16 w-16 md:h-20 md:w-20 text-emerald-600 dark:text-emerald-400" strokeWidth={1} />
@@ -38,7 +38,7 @@ export function StatsSummaryCards({
</CardContent>
</Card>
<Card className="relative overflow-hidden">
<Card className="stat-card-textured relative overflow-hidden">
{/* Icône en arrière-plan */}
<div className="absolute bottom-2 right-2 opacity-[0.04] dark:opacity-[0.03] z-0 pointer-events-none">
<TrendingDown className="h-16 w-16 md:h-20 md:w-20 text-red-600 dark:text-red-400" strokeWidth={1} />
@@ -55,7 +55,7 @@ export function StatsSummaryCards({
</CardContent>
</Card>
<Card className="relative overflow-hidden">
<Card className="stat-card-textured relative overflow-hidden">
{/* Icône en arrière-plan */}
<div className="absolute bottom-2 right-2 opacity-[0.04] dark:opacity-[0.03] z-0 pointer-events-none">
<ArrowRight className="h-16 w-16 md:h-20 md:w-20 text-muted-foreground/40" strokeWidth={1} />
@@ -72,7 +72,7 @@ export function StatsSummaryCards({
</CardContent>
</Card>
<Card className="relative overflow-hidden">
<Card className="stat-card-textured relative overflow-hidden">
{/* Icône en arrière-plan */}
<div className="absolute bottom-2 right-2 opacity-[0.04] dark:opacity-[0.03] z-0 pointer-events-none">
<div className={cn(