feat: enhance global styles and component themes with new semantic colors; integrate ThemeProvider for improved theme management and update color usage across various components for consistency
This commit is contained in:
@@ -36,13 +36,13 @@ export function SavingsTrendChart({
|
||||
<CardTitle>Évolution des économies</CardTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
{isPositive ? (
|
||||
<TrendingUp className="w-4 h-4 text-emerald-600" />
|
||||
<TrendingUp className="w-4 h-4 text-success" />
|
||||
) : (
|
||||
<TrendingDown className="w-4 h-4 text-red-600" />
|
||||
<TrendingDown className="w-4 h-4 text-destructive" />
|
||||
)}
|
||||
<span
|
||||
className={`text-sm font-semibold ${
|
||||
isPositive ? "text-emerald-600" : "text-red-600"
|
||||
isPositive ? "text-success" : "text-destructive"
|
||||
}`}
|
||||
>
|
||||
{formatCurrency(latestSavings)}
|
||||
|
||||
@@ -23,8 +23,8 @@ export function StatsSummaryCards({
|
||||
<div className="grid gap-3 md:gap-4 grid-cols-2 md:grid-cols-4">
|
||||
<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} />
|
||||
<div className="absolute bottom-2 right-2 opacity-[0.04] z-0 pointer-events-none">
|
||||
<TrendingUp className="h-16 w-16 md:h-20 md:w-20 text-success" strokeWidth={1} />
|
||||
</div>
|
||||
<CardHeader className="pb-3 px-5 pt-5 relative z-10">
|
||||
<CardTitle className="text-[10px] md:text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
|
||||
@@ -32,7 +32,7 @@ export function StatsSummaryCards({
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-5 pb-5 pt-0 relative z-10">
|
||||
<div className="text-xl md:text-2xl font-black text-emerald-600 dark:text-emerald-400 tracking-tight">
|
||||
<div className="text-xl md:text-2xl font-black text-success tracking-tight">
|
||||
{formatCurrency(totalIncome)}
|
||||
</div>
|
||||
</CardContent>
|
||||
@@ -40,8 +40,8 @@ export function StatsSummaryCards({
|
||||
|
||||
<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} />
|
||||
<div className="absolute bottom-2 right-2 opacity-[0.04] z-0 pointer-events-none">
|
||||
<TrendingDown className="h-16 w-16 md:h-20 md:w-20 text-destructive" strokeWidth={1} />
|
||||
</div>
|
||||
<CardHeader className="pb-3 px-5 pt-5 relative z-10">
|
||||
<CardTitle className="text-[10px] md:text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
|
||||
@@ -49,7 +49,7 @@ export function StatsSummaryCards({
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-5 pb-5 pt-0 relative z-10">
|
||||
<div className="text-xl md:text-2xl font-black text-red-600 dark:text-red-400 tracking-tight">
|
||||
<div className="text-xl md:text-2xl font-black text-destructive tracking-tight">
|
||||
{formatCurrency(totalExpenses)}
|
||||
</div>
|
||||
</CardContent>
|
||||
@@ -57,7 +57,7 @@ export function StatsSummaryCards({
|
||||
|
||||
<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="absolute bottom-2 right-2 opacity-[0.04] z-0 pointer-events-none">
|
||||
<ArrowRight className="h-16 w-16 md:h-20 md:w-20 text-muted-foreground/40" strokeWidth={1} />
|
||||
</div>
|
||||
<CardHeader className="pb-3 px-5 pt-5 relative z-10">
|
||||
@@ -74,12 +74,12 @@ export function StatsSummaryCards({
|
||||
|
||||
<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="absolute bottom-2 right-2 opacity-[0.04] z-0 pointer-events-none">
|
||||
<div className={cn(
|
||||
"h-16 w-16 md:h-20 md:w-20 rounded-full border-2",
|
||||
savings >= 0
|
||||
? "border-emerald-600 dark:border-emerald-400"
|
||||
: "border-red-600 dark:border-red-400"
|
||||
? "border-success"
|
||||
: "border-destructive"
|
||||
)} />
|
||||
</div>
|
||||
<CardHeader className="pb-3 px-5 pt-5 relative z-10">
|
||||
@@ -91,7 +91,7 @@ export function StatsSummaryCards({
|
||||
<div
|
||||
className={cn(
|
||||
"text-xl md:text-2xl font-black tracking-tight",
|
||||
savings >= 0 ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400",
|
||||
savings >= 0 ? "text-success" : "text-destructive",
|
||||
)}
|
||||
>
|
||||
{formatCurrency(savings)}
|
||||
|
||||
@@ -45,7 +45,7 @@ export function TopExpensesList({
|
||||
<p className="font-medium text-xs md:text-sm truncate flex-1">
|
||||
{expense.description}
|
||||
</p>
|
||||
<div className="text-red-600 font-semibold tabular-nums text-xs md:text-sm shrink-0">
|
||||
<div className="text-destructive font-semibold tabular-nums text-xs md:text-sm shrink-0">
|
||||
{formatCurrency(expense.amount)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user