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

feat: update global styles and component designs for enhanced aesthetics and responsiveness, including new gradients, shadows, and transitions

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-07 17:25:58 +01:00
parent d4db94d156
commit 1548ce4b0d
8 changed files with 243 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
components/accounts/account-card.tsx
View File

@@ -79,9 +79,10 @@ export function AccountCard({
const cardContent = (
<Card
className={cn(
"relative",
isSelected && "ring-2 ring-primary",
isDragging && "bg-muted/80",
"relative group",
isSelected && "ring-2 ring-primary shadow-lg shadow-primary/10",
isDragging && "bg-muted/80 opacity-60",
"hover:scale-[1.02] transition-transform duration-200"
)}
>
<CardHeader className={cn("pb-0", isMobile && "px-2 pt-2")}>
@@ -107,20 +108,23 @@ export function AccountCard({
className="shrink-0"
/>
)}
<div className={cn(
"rounded-full bg-primary/10 flex items-center justify-center shrink-0",
isMobile ? "w-6 h-6" : "w-8 h-8"
)}>
<Icon className={cn(
"text-primary",
isMobile ? "w-3 h-3" : "w-4 h-4"
)} />
<div
className={cn(
"rounded-full bg-primary/10 flex items-center justify-center shrink-0",
isMobile ? "w-6 h-6" : "w-8 h-8"
)}
>
<Icon
className={cn("text-primary", isMobile ? "w-3 h-3" : "w-4 h-4")}
/>
</div>
<div className="min-w-0 flex-1">
<CardTitle className={cn(
"font-semibold truncate leading-tight",
isMobile ? "text-[11px]" : "text-sm"
)}>
<CardTitle
className={cn(
"font-semibold truncate leading-tight",
isMobile ? "text-[11px]" : "text-sm"
)}
>
{account.name}
</CardTitle>
{!compact && !isMobile && (
@@ -139,13 +143,14 @@ export function AccountCard({
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className={cn(
"shrink-0",
isMobile ? "h-5 w-5" : "h-7 w-7"
)}>
<MoreVertical className={cn(
isMobile ? "w-2.5 h-2.5" : "w-3.5 h-3.5"
)} />
<Button
variant="ghost"
size="icon"
className={cn("shrink-0", isMobile ? "h-5 w-5" : "h-7 w-7")}
>
<MoreVertical
className={cn(isMobile ? "w-2.5 h-2.5" : "w-3.5 h-3.5")}
/>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
@@ -164,19 +169,22 @@ export function AccountCard({
</DropdownMenu>
</div>
</CardHeader>
<CardContent className={cn(
isMobile ? "px-2 pb-2 pt-1" : "pt-1",
compact && "pt-0"
)}>
<CardContent
className={cn(isMobile ? "px-2 pb-2 pt-1" : "pt-1", compact && "pt-0")}
>
<div className="flex items-center justify-between gap-1.5">
<div
className={cn(
"font-bold truncate",
compact
? isMobile ? "text-sm" : "text-lg"
: isMobile ? "text-base" : "text-xl",
compact
? isMobile
? "text-sm"
: "text-lg"
: isMobile
? "text-base"
: "text-xl",
!compact && !isMobile && "mb-1.5",
realBalance >= 0 ? "text-emerald-600" : "text-red-600",
realBalance >= 0 ? "text-emerald-600" : "text-red-600"
)}
>
{formatCurrency(realBalance)}
@@ -195,11 +203,13 @@ export function AccountCard({
</div>
{!compact && (
<>
<div className={cn(
"flex items-center justify-between gap-2 mt-1",
isMobile ? "text-[10px]" : "text-xs",
"text-muted-foreground"
)}>
<div
className={cn(
"flex items-center justify-between gap-2 mt-1",
isMobile ? "text-[10px]" : "text-xs",
"text-muted-foreground"
)}
>
<Link
href={`/transactions?accountId=${account.id}`}
className="hover:text-primary hover:underline truncate"