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

19
components/dashboard/recent-transactions.tsx
View File

@@ -2,7 +2,6 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { CheckCircle2, Circle } from "lucide-react";
import { CategoryIcon } from "@/components/ui/category-icon";
import type { BankingData } from "@/lib/types";
import { cn } from "@/lib/utils";
@@ -80,26 +79,14 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
className="group rounded-2xl bg-gradient-to-r from-muted/50 via-muted/30 to-muted/20 hover:from-muted/70 hover:via-muted/50 hover:to-muted/40 border-2 border-border/40 hover:border-primary/30 transition-all duration-300 overflow-hidden hover:shadow-lg hover:shadow-primary/10 hover:scale-[1.02] backdrop-blur-sm"
>
<div className="flex items-start gap-4 md:gap-5 p-4 md:p-5">
<div className="flex-shrink-0 pt-0.5">
{transaction.isReconciled ? (
<div className="rounded-2xl bg-gradient-to-br from-emerald-500/30 to-emerald-500/20 p-2 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-md shadow-emerald-500/20">
<CheckCircle2 className="w-5 h-5 md:w-6 md:h-6 text-emerald-600 dark:text-emerald-400" />
</div>
) : (
<div className="rounded-2xl bg-muted/60 p-2 group-hover:bg-muted/80 transition-all duration-300">
<Circle className="w-5 h-5 md:w-6 md:h-6 text-muted-foreground" />
</div>
)}
</div>
<div className="flex-1 min-w-0 overflow-hidden">
<div className="flex items-start justify-between gap-2">
<p className="font-bold text-base md:text-lg truncate flex-1 leading-tight">
<p className="font-bold text-sm md:text-base truncate flex-1 leading-tight">
{transaction.description}
</p>
<div
className={cn(
"font-black tabular-nums text-base md:text-lg shrink-0 md:hidden",
"font-black tabular-nums text-sm md:text-base shrink-0 md:hidden",
transaction.amount >= 0
? "text-emerald-600 dark:text-emerald-400"
: "text-red-600 dark:text-red-400",
@@ -141,7 +128,7 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
<div
className={cn(
"font-black tabular-nums text-lg md:text-xl shrink-0 hidden md:block leading-tight",
"font-black tabular-nums text-base md:text-lg shrink-0 hidden md:block leading-tight",
transaction.amount >= 0
? "text-emerald-600 dark:text-emerald-400"
: "text-red-600 dark:text-red-400",