feat: enhance UI with new background gradients and responsive design adjustments across various components
This commit is contained in:
Julien Froidefond
@@ -23,6 +23,7 @@ import type { Account, Folder } from "@/lib/types";
|
||||
import { accountTypeIcons, accountTypeLabels } from "./constants";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { getAccountBalance } from "@/lib/account-utils";
|
||||
import { useIsMobile } from "@/hooks/use-mobile";
|
||||
|
||||
interface AccountCardProps {
|
||||
account: Account;
|
||||
@@ -49,6 +50,7 @@ export function AccountCard({
|
||||
draggableId,
|
||||
compact = false,
|
||||
}: AccountCardProps) {
|
||||
const isMobile = useIsMobile();
|
||||
const Icon = accountTypeIcons[account.type];
|
||||
const realBalance = getAccountBalance(account);
|
||||
|
||||
@@ -82,14 +84,14 @@ export function AccountCard({
|
||||
isDragging && "bg-muted/80",
|
||||
)}
|
||||
>
|
||||
<CardHeader className="pb-0">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-2 flex-1">
|
||||
{draggableId && (
|
||||
<CardHeader className={cn("pb-0", isMobile && "px-2 pt-2")}>
|
||||
<div className="flex items-start justify-between gap-1.5">
|
||||
<div className="flex items-center gap-1.5 flex-1 min-w-0">
|
||||
{draggableId && !isMobile && (
|
||||
<button
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className="p-1 hover:bg-muted rounded cursor-grab active:cursor-grabbing"
|
||||
className="p-1 hover:bg-muted rounded cursor-grab active:cursor-grabbing shrink-0"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<GripVertical className="w-4 h-4 text-muted-foreground" />
|
||||
@@ -102,16 +104,26 @@ export function AccountCard({
|
||||
onSelect(account.id, checked === true)
|
||||
}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="shrink-0"
|
||||
/>
|
||||
)}
|
||||
<div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
|
||||
<Icon className="w-4 h-4 text-primary" />
|
||||
<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">
|
||||
<CardTitle className="text-sm font-semibold truncate">
|
||||
<div className="min-w-0 flex-1">
|
||||
<CardTitle className={cn(
|
||||
"font-semibold truncate leading-tight",
|
||||
isMobile ? "text-[11px]" : "text-sm"
|
||||
)}>
|
||||
{account.name}
|
||||
</CardTitle>
|
||||
{!compact && (
|
||||
{!compact && !isMobile && (
|
||||
<>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{accountTypeLabels[account.type]}
|
||||
@@ -127,8 +139,13 @@ export function AccountCard({
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7 shrink-0">
|
||||
<MoreVertical className="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">
|
||||
@@ -138,7 +155,7 @@ export function AccountCard({
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => onDelete(account.id)}
|
||||
className="text-red-600"
|
||||
variant="destructive"
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Supprimer
|
||||
@@ -147,13 +164,18 @@ export function AccountCard({
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className={cn("pt-1", compact && "pt-0")}>
|
||||
<div className="flex items-center justify-between">
|
||||
<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(
|
||||
compact ? "text-lg" : "text-xl",
|
||||
"font-bold",
|
||||
!compact && "mb-1.5",
|
||||
"font-bold truncate",
|
||||
compact
|
||||
? isMobile ? "text-sm" : "text-lg"
|
||||
: isMobile ? "text-base" : "text-xl",
|
||||
!compact && !isMobile && "mb-1.5",
|
||||
realBalance >= 0 ? "text-emerald-600" : "text-red-600",
|
||||
)}
|
||||
>
|
||||
@@ -162,45 +184,58 @@ export function AccountCard({
|
||||
{compact && (
|
||||
<Link
|
||||
href={`/transactions?accountId=${account.id}`}
|
||||
className="text-xs text-muted-foreground hover:text-primary hover:underline"
|
||||
className={cn(
|
||||
"text-muted-foreground hover:text-primary hover:underline shrink-0 whitespace-nowrap",
|
||||
isMobile ? "text-[9px]" : "text-xs"
|
||||
)}
|
||||
>
|
||||
{transactionCount} transactions
|
||||
{transactionCount} txns
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
{!compact && (
|
||||
<>
|
||||
<div className="flex items-center justify-between 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"
|
||||
>
|
||||
{transactionCount} transactions
|
||||
</Link>
|
||||
{folder && <span className="truncate ml-2">{folder.name}</span>}
|
||||
</div>
|
||||
{account.initialBalance !== undefined &&
|
||||
account.initialBalance !== null && (
|
||||
<p className="text-xs text-muted-foreground mt-1.5">
|
||||
Solde initial: {formatCurrency(account.initialBalance)}
|
||||
</p>
|
||||
{folder && !isMobile && (
|
||||
<span className="truncate ml-2 shrink-0">{folder.name}</span>
|
||||
)}
|
||||
{account.lastImport && (
|
||||
<p className="text-xs text-muted-foreground mt-1.5">
|
||||
Dernier import:{" "}
|
||||
{new Date(account.lastImport).toLocaleDateString("fr-FR")}
|
||||
</p>
|
||||
)}
|
||||
{account.externalUrl && (
|
||||
<a
|
||||
href={account.externalUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-xs text-primary hover:underline mt-1.5"
|
||||
>
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
Accéder au portail banque
|
||||
</a>
|
||||
</div>
|
||||
{!isMobile && (
|
||||
<>
|
||||
{account.initialBalance !== undefined &&
|
||||
account.initialBalance !== null && (
|
||||
<p className="text-xs text-muted-foreground mt-1.5">
|
||||
Solde initial: {formatCurrency(account.initialBalance)}
|
||||
</p>
|
||||
)}
|
||||
{account.lastImport && (
|
||||
<p className="text-xs text-muted-foreground mt-1.5">
|
||||
Dernier import:{" "}
|
||||
{new Date(account.lastImport).toLocaleDateString("fr-FR")}
|
||||
</p>
|
||||
)}
|
||||
{account.externalUrl && (
|
||||
<a
|
||||
href={account.externalUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-xs text-primary hover:underline mt-1.5"
|
||||
>
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
Accéder au portail banque
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user