feat: revamp global styles and component designs with enhanced gradients, shadows, and responsive layouts for a modern fintech aesthetic
This commit is contained in:
Julien Froidefond
@@ -110,34 +110,34 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
|
||||
? Math.max(0, (realBalance / totalPositive) * 100)
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div key={account.id} className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<Building2 className="w-4 h-4 text-primary" />
|
||||
return (
|
||||
<div key={account.id} className="space-y-2.5 p-3 rounded-xl bg-muted/30 hover:bg-muted/50 border border-border/50 hover:border-primary/20 transition-all duration-300 group">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
<Building2 className="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-sm">{account.name}</p>
|
||||
<p className="text-xs text-muted-foreground/70 mt-0.5">
|
||||
{account.accountNumber}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className={cn(
|
||||
"font-bold tabular-nums text-base",
|
||||
realBalance >= 0 ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400",
|
||||
)}
|
||||
>
|
||||
{formatCurrency(realBalance)}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-sm">{account.name}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{account.accountNumber}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className={cn(
|
||||
"font-semibold tabular-nums",
|
||||
realBalance >= 0 ? "text-emerald-600" : "text-red-600",
|
||||
{realBalance > 0 && (
|
||||
<Progress value={percentage} className="h-2 rounded-full" />
|
||||
)}
|
||||
>
|
||||
{formatCurrency(realBalance)}
|
||||
</span>
|
||||
</div>
|
||||
{realBalance > 0 && (
|
||||
<Progress value={percentage} className="h-1.5" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
@@ -152,15 +152,15 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
|
||||
|
||||
if (data.accounts.length === 0) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Mes Comptes</CardTitle>
|
||||
<Card className="card-hover">
|
||||
<CardHeader className="pb-4">
|
||||
<CardTitle className="text-base md:text-lg font-bold">Mes Comptes</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<Building2 className="w-12 h-12 text-muted-foreground mb-3" />
|
||||
<p className="text-muted-foreground">Aucun compte</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<Building2 className="w-12 h-12 text-muted-foreground/50 mb-4" />
|
||||
<p className="text-muted-foreground font-medium">Aucun compte</p>
|
||||
<p className="text-sm text-muted-foreground/70 mt-2">
|
||||
Importez un fichier OFX pour ajouter un compte
|
||||
</p>
|
||||
</div>
|
||||
@@ -176,9 +176,9 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
|
||||
);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Mes Comptes</CardTitle>
|
||||
<Card className="card-hover">
|
||||
<CardHeader className="pb-4">
|
||||
<CardTitle className="text-base md:text-lg font-bold">Mes Comptes</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
@@ -214,34 +214,34 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div key={account.id} className="space-y-2">
|
||||
<div key={account.id} className="space-y-2.5 p-3 rounded-xl bg-muted/30 hover:bg-muted/50 border border-border/50 hover:border-primary/20 transition-all duration-300 group">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<Building2 className="w-4 h-4 text-primary" />
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
<Building2 className="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-sm">
|
||||
<p className="font-semibold text-sm">
|
||||
{account.name}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<p className="text-xs text-muted-foreground/70 mt-0.5">
|
||||
{account.accountNumber}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className={cn(
|
||||
"font-semibold tabular-nums",
|
||||
"font-bold tabular-nums text-base",
|
||||
realBalance >= 0
|
||||
? "text-emerald-600"
|
||||
: "text-red-600",
|
||||
? "text-emerald-600 dark:text-emerald-400"
|
||||
: "text-red-600 dark:text-red-400",
|
||||
)}
|
||||
>
|
||||
{formatCurrency(realBalance)}
|
||||
</span>
|
||||
</div>
|
||||
{realBalance > 0 && (
|
||||
<Progress value={percentage} className="h-1.5" />
|
||||
<Progress value={percentage} className="h-2 rounded-full" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -45,45 +45,49 @@ export function OverviewCards({ data }: OverviewCardsProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid gap-3 sm:gap-4 grid-cols-2 lg:grid-cols-4">
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
|
||||
<div className="grid gap-4 sm:gap-6 grid-cols-2 lg:grid-cols-4">
|
||||
<Card className="stat-card-gradient-1 card-hover group relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary/8 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 relative z-10">
|
||||
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
|
||||
Solde Total
|
||||
</CardTitle>
|
||||
<div className="rounded-full bg-muted/50 p-2 shrink-0">
|
||||
<Wallet className="h-4 w-4 text-muted-foreground" />
|
||||
<div className="rounded-2xl bg-gradient-to-br from-primary/30 via-primary/20 to-primary/10 p-3 shrink-0 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg shadow-primary/20">
|
||||
<Wallet className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
|
||||
<CardContent className="px-6 pb-6 sm:px-7 sm:pb-7 pt-0 relative z-10">
|
||||
<div
|
||||
className={cn(
|
||||
"text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight",
|
||||
totalBalance >= 0 ? "text-emerald-600" : "text-red-600"
|
||||
"text-2xl sm:text-3xl md:text-3xl lg:text-4xl xl:text-5xl font-black tracking-tight mb-4 leading-none",
|
||||
totalBalance >= 0
|
||||
? "text-emerald-600 dark:text-emerald-400"
|
||||
: "text-red-600 dark:text-red-400"
|
||||
)}
|
||||
>
|
||||
{formatCurrency(totalBalance)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
<p className="text-xs sm:text-sm font-semibold text-muted-foreground/60">
|
||||
{data.accounts.length} compte{data.accounts.length > 1 ? "s" : ""}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
|
||||
<Card className="stat-card-gradient-2 card-hover group relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-success/8 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 relative z-10">
|
||||
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
|
||||
Revenus du mois
|
||||
</CardTitle>
|
||||
<div className="rounded-full bg-emerald-500/10 p-2 shrink-0">
|
||||
<TrendingUp className="h-4 w-4 text-emerald-600" />
|
||||
<div className="rounded-2xl bg-gradient-to-br from-success/30 via-success/20 to-success/10 p-3 shrink-0 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg shadow-success/20">
|
||||
<TrendingUp className="h-5 w-5 text-success" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
|
||||
<div className="text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight text-emerald-600">
|
||||
<CardContent className="px-6 pb-6 sm:px-7 sm:pb-7 pt-0 relative z-10">
|
||||
<div className="text-2xl sm:text-3xl md:text-3xl lg:text-4xl xl:text-5xl font-black tracking-tight text-success mb-4 leading-none">
|
||||
{formatCurrency(income)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
<p className="text-xs sm:text-sm font-semibold text-muted-foreground/60">
|
||||
{monthTransactions.filter((t) => t.amount > 0).length} opération
|
||||
{monthTransactions.filter((t) => t.amount > 0).length > 1
|
||||
? "s"
|
||||
@@ -92,20 +96,21 @@ export function OverviewCards({ data }: OverviewCardsProps) {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
|
||||
<Card className="stat-card-gradient-3 card-hover group relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-destructive/8 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 relative z-10">
|
||||
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
|
||||
Dépenses du mois
|
||||
</CardTitle>
|
||||
<div className="rounded-full bg-red-500/10 p-2 shrink-0">
|
||||
<TrendingDown className="h-4 w-4 text-red-600" />
|
||||
<div className="rounded-2xl bg-gradient-to-br from-destructive/30 via-destructive/20 to-destructive/10 p-3 shrink-0 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg shadow-destructive/20">
|
||||
<TrendingDown className="h-5 w-5 text-destructive" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
|
||||
<div className="text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight text-red-600">
|
||||
<CardContent className="px-6 pb-6 sm:px-7 sm:pb-7 pt-0 relative z-10">
|
||||
<div className="text-2xl sm:text-3xl md:text-3xl lg:text-4xl xl:text-5xl font-black tracking-tight text-destructive mb-4 leading-none">
|
||||
{formatCurrency(expenses)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
<p className="text-xs sm:text-sm font-semibold text-muted-foreground/60">
|
||||
{monthTransactions.filter((t) => t.amount < 0).length} opération
|
||||
{monthTransactions.filter((t) => t.amount < 0).length > 1
|
||||
? "s"
|
||||
@@ -114,20 +119,21 @@ export function OverviewCards({ data }: OverviewCardsProps) {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
|
||||
<Card className="stat-card-gradient-4 card-hover group relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-chart-4/8 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 relative z-10">
|
||||
<CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
|
||||
Pointage
|
||||
</CardTitle>
|
||||
<div className="rounded-full bg-muted/50 p-2 shrink-0">
|
||||
<CreditCard className="h-4 w-4 text-muted-foreground" />
|
||||
<div className="rounded-2xl bg-gradient-to-br from-chart-4/30 via-chart-4/20 to-chart-4/10 p-3 shrink-0 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg shadow-chart-4/20">
|
||||
<CreditCard className="h-5 w-5 text-chart-4" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
|
||||
<div className="text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight">
|
||||
<CardContent className="px-6 pb-6 sm:px-7 sm:pb-7 pt-0 relative z-10">
|
||||
<div className="text-2xl sm:text-3xl md:text-3xl lg:text-4xl xl:text-5xl font-black tracking-tight mb-4 leading-none">
|
||||
{reconciledPercent}%
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
<p className="text-xs sm:text-sm font-semibold text-muted-foreground/60">
|
||||
{reconciled} / {total} opérations pointées
|
||||
</p>
|
||||
</CardContent>
|
||||
|
||||
@@ -41,14 +41,14 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
|
||||
|
||||
if (recentTransactions.length === 0) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Transactions récentes</CardTitle>
|
||||
<Card className="card-hover">
|
||||
<CardHeader className="pb-4">
|
||||
<CardTitle className="text-base md:text-lg font-bold">Transactions récentes</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<p className="text-muted-foreground">Aucune transaction</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<p className="text-muted-foreground font-medium">Aucune transaction</p>
|
||||
<p className="text-sm text-muted-foreground/70 mt-2">
|
||||
Importez un fichier OFX pour commencer
|
||||
</p>
|
||||
</div>
|
||||
@@ -58,13 +58,13 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm md:text-base">
|
||||
<Card className="card-hover">
|
||||
<CardHeader className="pb-5">
|
||||
<CardTitle className="text-lg md:text-xl font-black tracking-tight">
|
||||
Transactions récentes
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-3 md:px-6">
|
||||
<CardContent className="px-5 md:px-6">
|
||||
<div className="space-y-3">
|
||||
{recentTransactions.map((transaction) => {
|
||||
const category = getCategory(transaction.categoryId);
|
||||
@@ -73,56 +73,61 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
|
||||
return (
|
||||
<div
|
||||
key={transaction.id}
|
||||
className="rounded-lg bg-muted/50 hover:bg-muted transition-colors overflow-hidden"
|
||||
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-2 md:gap-3 p-2 md:p-3">
|
||||
<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 ? (
|
||||
<CheckCircle2 className="w-4 h-4 md:w-5 md:h-5 text-emerald-600" />
|
||||
<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>
|
||||
) : (
|
||||
<Circle className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground" />
|
||||
<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-medium text-xs md:text-base truncate flex-1">
|
||||
<p className="font-bold text-base md:text-lg truncate flex-1 leading-tight">
|
||||
{transaction.description}
|
||||
</p>
|
||||
<div
|
||||
className={cn(
|
||||
"font-semibold tabular-nums text-xs md:text-base shrink-0 md:hidden",
|
||||
"font-black tabular-nums text-base md:text-lg shrink-0 md:hidden",
|
||||
transaction.amount >= 0
|
||||
? "text-emerald-600"
|
||||
: "text-red-600",
|
||||
? "text-emerald-600 dark:text-emerald-400"
|
||||
: "text-red-600 dark:text-red-400",
|
||||
)}
|
||||
>
|
||||
{transaction.amount >= 0 ? "+" : ""}
|
||||
{formatCurrency(transaction.amount)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 md:gap-2 mt-1 flex-wrap">
|
||||
<span className="text-[10px] md:text-xs text-muted-foreground whitespace-nowrap">
|
||||
<div className="flex items-center gap-3 md:gap-4 mt-3 flex-wrap">
|
||||
<span className="text-sm text-muted-foreground/70 font-semibold whitespace-nowrap">
|
||||
{formatDate(transaction.date)}
|
||||
</span>
|
||||
{account && (
|
||||
<span className="text-[10px] md:text-xs text-muted-foreground truncate">
|
||||
<span className="text-sm text-muted-foreground/60 truncate font-medium">
|
||||
• {account.name}
|
||||
</span>
|
||||
)}
|
||||
{category && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="text-[10px] md:text-xs gap-1 shrink-0"
|
||||
className="text-xs gap-2 shrink-0 rounded-xl px-3 py-1 font-bold border-2 backdrop-blur-sm"
|
||||
style={{
|
||||
backgroundColor: `${category.color}20`,
|
||||
color: category.color,
|
||||
borderColor: `${category.color}40`,
|
||||
}}
|
||||
>
|
||||
<CategoryIcon
|
||||
icon={category.icon}
|
||||
color={category.color}
|
||||
size={10}
|
||||
size={14}
|
||||
/>
|
||||
<span className="truncate">{category.name}</span>
|
||||
</Badge>
|
||||
@@ -132,10 +137,10 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"font-semibold tabular-nums text-sm md:text-base shrink-0 hidden md:block",
|
||||
"font-black tabular-nums text-lg md:text-xl shrink-0 hidden md:block leading-tight",
|
||||
transaction.amount >= 0
|
||||
? "text-emerald-600"
|
||||
: "text-red-600",
|
||||
? "text-emerald-600 dark:text-emerald-400"
|
||||
: "text-red-600 dark:text-red-400",
|
||||
)}
|
||||
>
|
||||
{transaction.amount >= 0 ? "+" : ""}
|
||||
|
||||
@@ -63,19 +63,19 @@ function SidebarContent({
|
||||
return (
|
||||
<>
|
||||
{showHeader && (
|
||||
<div className="flex items-center justify-between p-4 border-b border-border">
|
||||
<div className="flex items-center justify-between p-5 border-b border-border/50">
|
||||
{!collapsed && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-primary/80 flex items-center justify-center shadow-lg shadow-primary/20">
|
||||
<Wallet className="w-5 h-5 text-primary-foreground" />
|
||||
</div>
|
||||
<span className="font-semibold text-foreground">FinTrack</span>
|
||||
<span className="font-bold text-lg text-foreground tracking-tight">FinTrack</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<nav className="flex-1 p-2 space-y-1">
|
||||
<nav className="flex-1 p-4 space-y-2">
|
||||
{navItems.map((item) => {
|
||||
const isActive = pathname === item.href;
|
||||
return (
|
||||
@@ -83,41 +83,52 @@ function SidebarContent({
|
||||
<Button
|
||||
variant={isActive ? "secondary" : "ghost"}
|
||||
className={cn(
|
||||
"w-full justify-start gap-3",
|
||||
collapsed && "justify-center px-2",
|
||||
"w-full justify-start gap-4 h-12 rounded-2xl transition-all duration-300",
|
||||
"hover:bg-muted/70 hover:scale-[1.02] hover:shadow-md",
|
||||
isActive && "bg-gradient-to-r from-primary/15 via-primary/10 to-primary/5 border-2 border-primary/30 shadow-lg shadow-primary/10 backdrop-blur-sm",
|
||||
collapsed && "justify-center px-2 w-12",
|
||||
)}
|
||||
>
|
||||
<item.icon className="w-5 h-5 shrink-0" />
|
||||
{!collapsed && <span>{item.label}</span>}
|
||||
<item.icon className={cn(
|
||||
"w-5 h-5 shrink-0 transition-all duration-300",
|
||||
isActive && "text-primary scale-110"
|
||||
)} />
|
||||
{!collapsed && (
|
||||
<span className={cn(
|
||||
"font-semibold text-sm",
|
||||
isActive && "text-primary font-bold"
|
||||
)}>{item.label}</span>
|
||||
)}
|
||||
</Button>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="p-2 border-t border-border space-y-1">
|
||||
<div className="p-4 border-t border-border/30 space-y-2">
|
||||
<Link href="/settings" onClick={handleLinkClick}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className={cn(
|
||||
"w-full justify-start gap-3",
|
||||
collapsed && "justify-center px-2",
|
||||
"w-full justify-start gap-4 h-12 rounded-2xl transition-all duration-300 hover:bg-muted/70 hover:scale-[1.02] hover:shadow-md",
|
||||
collapsed && "justify-center px-2 w-12",
|
||||
)}
|
||||
>
|
||||
<Settings className="w-5 h-5 shrink-0" />
|
||||
{!collapsed && <span>Paramètres</span>}
|
||||
{!collapsed && <span className="font-semibold text-sm">Paramètres</span>}
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handleSignOut}
|
||||
className={cn(
|
||||
"w-full justify-start gap-3 text-destructive hover:text-destructive hover:bg-destructive/10",
|
||||
collapsed && "justify-center px-2",
|
||||
"w-full justify-start gap-4 h-12 rounded-2xl transition-all duration-300",
|
||||
"text-destructive hover:text-destructive hover:bg-destructive/15 hover:scale-[1.02] hover:shadow-md",
|
||||
collapsed && "justify-center px-2 w-12",
|
||||
)}
|
||||
>
|
||||
<LogOut className="w-5 h-5 shrink-0" />
|
||||
{!collapsed && <span>Déconnexion</span>}
|
||||
{!collapsed && <span className="font-semibold text-sm">Déconnexion</span>}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
@@ -151,29 +162,30 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
|
||||
return (
|
||||
<aside
|
||||
className={cn(
|
||||
"hidden md:flex flex-col h-screen bg-card border-r border-border transition-all duration-300",
|
||||
"hidden md:flex flex-col h-screen glass border-r border-border transition-all duration-300",
|
||||
"backdrop-blur-xl",
|
||||
collapsed ? "w-16" : "w-64",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between p-4 border-b border-border">
|
||||
<div className="flex items-center justify-between p-6 border-b border-border/30">
|
||||
{!collapsed && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
|
||||
<Wallet className="w-5 h-5 text-primary-foreground" />
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-primary via-primary/90 to-primary/80 flex items-center justify-center shadow-xl shadow-primary/30 backdrop-blur-sm">
|
||||
<Wallet className="w-6 h-6 text-primary-foreground" />
|
||||
</div>
|
||||
<span className="font-semibold text-foreground">FinTrack</span>
|
||||
<span className="font-black text-xl text-foreground tracking-tight">FinTrack</span>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
className="ml-auto"
|
||||
className="ml-auto hover:bg-muted/60 rounded-xl transition-all duration-300 hover:scale-110"
|
||||
>
|
||||
{collapsed ? (
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
) : (
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,6 @@ import { Button } from "@/components/ui/button";
|
||||
import { Menu } from "lucide-react";
|
||||
import { useSidebarContext } from "@/components/layout/sidebar-context";
|
||||
import { useIsMobile } from "@/hooks/use-mobile";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface PageHeaderProps {
|
||||
title: string;
|
||||
@@ -24,38 +23,51 @@ export function PageHeader({
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-2">
|
||||
<div className="flex items-center gap-4 flex-1 min-w-0">
|
||||
{isMobile && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setOpen(true)}
|
||||
className="shrink-0"
|
||||
className="shrink-0 rounded-xl hover:bg-muted/60"
|
||||
>
|
||||
<Menu className="w-5 h-5" />
|
||||
</Button>
|
||||
)}
|
||||
<div>
|
||||
<h1 className="text-lg md:text-2xl font-bold text-foreground">
|
||||
<div className="flex-1 min-w-0 pr-20 md:pr-0">
|
||||
<h1 className="text-3xl md:text-4xl lg:text-5xl font-black text-foreground tracking-tight mb-2 leading-tight">
|
||||
{title}
|
||||
</h1>
|
||||
{description && (
|
||||
<div className="text-xs md:text-base text-muted-foreground mt-1">
|
||||
<div className="text-base md:text-lg text-muted-foreground/70 font-semibold">
|
||||
{description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{(rightContent || actions) && (
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{rightContent}
|
||||
{actions && (
|
||||
<div className={cn("flex gap-2", isMobile && "flex-wrap")}>
|
||||
{actions}
|
||||
<>
|
||||
{isMobile ? (
|
||||
<div className="absolute top-0 right-0 flex items-center gap-2">
|
||||
{rightContent}
|
||||
{actions && (
|
||||
<div className="[&>button]:h-10 [&>button]:px-3 [&>button]:text-sm">
|
||||
{actions}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
{rightContent}
|
||||
{actions && (
|
||||
<div className="flex gap-3">
|
||||
{actions}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -18,7 +18,7 @@ export function PageLayout({ children }: PageLayoutProps) {
|
||||
<div className="flex h-screen bg-background overflow-hidden page-background">
|
||||
<Sidebar open={sidebarOpen} onOpenChange={setSidebarOpen} />
|
||||
<main className="flex-1 overflow-auto overflow-x-hidden page-content">
|
||||
<div className="p-4 md:p-6 space-y-4 md:space-y-6 max-w-full">
|
||||
<div className="p-6 md:p-8 lg:p-10 space-y-6 md:space-y-8 max-w-full">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -5,28 +5,28 @@ import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold transition-all duration-300 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-lg hover:shadow-primary/25 active:scale-[0.98]",
|
||||
default: "bg-gradient-to-r from-primary via-primary/95 to-primary/90 text-primary-foreground hover:from-primary/95 hover:via-primary hover:to-primary/95 shadow-xl shadow-primary/30 hover:shadow-2xl hover:shadow-primary/40 hover:scale-[1.03] active:scale-[0.97] backdrop-blur-sm border border-primary/20",
|
||||
destructive:
|
||||
"bg-destructive text-white hover:bg-destructive/90 hover:shadow-lg hover:shadow-destructive/25 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 active:scale-[0.98]",
|
||||
"bg-gradient-to-r from-destructive via-destructive/95 to-destructive/90 text-white hover:from-destructive/95 hover:via-destructive hover:to-destructive/95 shadow-xl shadow-destructive/30 hover:shadow-2xl hover:shadow-destructive/40 hover:scale-[1.03] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 active:scale-[0.97] backdrop-blur-sm border border-destructive/20",
|
||||
outline:
|
||||
"border bg-background/80 backdrop-blur-sm shadow-sm hover:bg-accent hover:text-accent-foreground hover:border-primary/30 hover:shadow-md dark:bg-input/30 dark:border-input dark:hover:bg-input/50 active:scale-[0.98]",
|
||||
"border-2 bg-background/95 backdrop-blur-md shadow-md hover:bg-accent hover:text-accent-foreground hover:border-primary/50 hover:shadow-lg hover:scale-[1.03] dark:bg-input/40 dark:border-input dark:hover:bg-input/60 active:scale-[0.97]",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80 hover:shadow-sm active:scale-[0.98]",
|
||||
"bg-gradient-to-r from-secondary via-secondary/95 to-secondary/90 text-secondary-foreground hover:from-secondary/95 hover:via-secondary hover:to-secondary/95 hover:shadow-lg hover:scale-[1.03] active:scale-[0.97] backdrop-blur-sm",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 active:scale-[0.98]",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
"hover:bg-accent/70 hover:text-accent-foreground dark:hover:bg-accent/50 hover:scale-[1.03] active:scale-[0.97] backdrop-blur-sm",
|
||||
link: "text-primary underline-offset-4 hover:underline font-semibold",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
icon: "size-9",
|
||||
"icon-sm": "size-8",
|
||||
"icon-lg": "size-10",
|
||||
default: "h-10 px-5 py-2.5 has-[>svg]:px-4",
|
||||
sm: "h-9 rounded-lg gap-1.5 px-4 has-[>svg]:px-3 text-xs",
|
||||
lg: "h-12 rounded-xl px-7 has-[>svg]:px-5 text-base",
|
||||
icon: "size-10",
|
||||
"icon-sm": "size-9",
|
||||
"icon-lg": "size-12",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@@ -7,12 +7,9 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col rounded-xl border",
|
||||
"shadow-[0_1px_3px_0_rgb(0_0_0_/_0.05),0_1px_2px_-1px_rgb(0_0_0_/_0.05)]",
|
||||
"backdrop-blur-sm",
|
||||
"transition-all duration-200",
|
||||
"hover:shadow-[0_4px_12px_0_rgb(0_0_0_/_0.08),0_2px_4px_-1px_rgb(0_0_0_/_0.06)]",
|
||||
"hover:border-primary/20",
|
||||
"fintech-card",
|
||||
"bg-card text-card-foreground flex flex-col",
|
||||
"transition-all duration-300 ease-out",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -43,7 +43,6 @@ function DropdownMenuContent({
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground backdrop-blur-md",
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
|
||||
"rounded-lg border border-border/50 p-1 shadow-lg shadow-black/5",
|
||||
className,
|
||||
@@ -233,7 +232,7 @@ function DropdownMenuSubContent({
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||
"bg-popover text-popover-foreground z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -23,16 +23,72 @@ function PopoverContent({
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
|
||||
const contentRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
const element = contentRef.current;
|
||||
if (!element) return;
|
||||
|
||||
const disableAnimations = () => {
|
||||
element.style.setProperty('animation', 'none', 'important');
|
||||
element.style.setProperty('transition', 'none', 'important');
|
||||
// Ne pas toucher au transform car il est utilisé pour le positionnement
|
||||
element.style.setProperty('opacity', '1', 'important');
|
||||
element.style.setProperty('will-change', 'auto', 'important');
|
||||
|
||||
// Supprimer toutes les classes d'animation Tailwind
|
||||
const classesToRemove = Array.from(element.classList).filter(cls =>
|
||||
cls.includes('animate') || cls.includes('fade') || cls.includes('zoom') || cls.includes('slide')
|
||||
);
|
||||
classesToRemove.forEach(cls => element.classList.remove(cls));
|
||||
};
|
||||
|
||||
// Désactiver immédiatement
|
||||
disableAnimations();
|
||||
|
||||
// Observer pour les changements d'attributs
|
||||
const observer = new MutationObserver(() => {
|
||||
disableAnimations();
|
||||
});
|
||||
|
||||
observer.observe(element, {
|
||||
attributes: true,
|
||||
attributeFilter: ['class', 'data-state'],
|
||||
subtree: false,
|
||||
});
|
||||
|
||||
// Observer pour les changements dans le DOM
|
||||
const domObserver = new MutationObserver(() => {
|
||||
disableAnimations();
|
||||
});
|
||||
|
||||
domObserver.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
domObserver.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
ref={contentRef}
|
||||
data-slot="popover-content"
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
||||
"bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
|
||||
className,
|
||||
)}
|
||||
style={{
|
||||
animation: 'none !important',
|
||||
transition: 'none !important',
|
||||
opacity: '1 !important',
|
||||
} as React.CSSProperties}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
|
||||
@@ -14,14 +14,14 @@ function Progress({
|
||||
<ProgressPrimitive.Root
|
||||
data-slot="progress"
|
||||
className={cn(
|
||||
"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
|
||||
"bg-muted/60 relative w-full overflow-hidden rounded-full backdrop-blur-sm",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ProgressPrimitive.Indicator
|
||||
data-slot="progress-indicator"
|
||||
className="bg-primary h-full w-full flex-1 transition-all"
|
||||
className="bg-gradient-to-r from-primary via-primary/90 to-primary h-full w-full flex-1 transition-all duration-500 ease-out shadow-sm shadow-primary/20"
|
||||
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||
/>
|
||||
</ProgressPrimitive.Root>
|
||||
|
||||
@@ -56,17 +56,71 @@ function SelectContent({
|
||||
position = "popper",
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||
const contentRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
const element = contentRef.current;
|
||||
if (!element) return;
|
||||
|
||||
const disableAnimations = () => {
|
||||
element.style.setProperty('animation', 'none', 'important');
|
||||
element.style.setProperty('transition', 'none', 'important');
|
||||
// Ne pas toucher au transform car il est utilisé pour le positionnement
|
||||
element.style.setProperty('opacity', '1', 'important');
|
||||
element.style.setProperty('will-change', 'auto', 'important');
|
||||
|
||||
// Supprimer toutes les classes d'animation Tailwind
|
||||
const classesToRemove = Array.from(element.classList).filter(cls =>
|
||||
cls.includes('animate') || cls.includes('fade') || cls.includes('zoom') || cls.includes('slide')
|
||||
);
|
||||
classesToRemove.forEach(cls => element.classList.remove(cls));
|
||||
};
|
||||
|
||||
// Désactiver immédiatement
|
||||
disableAnimations();
|
||||
|
||||
// Observer pour les changements d'attributs
|
||||
const observer = new MutationObserver(() => {
|
||||
disableAnimations();
|
||||
});
|
||||
|
||||
observer.observe(element, {
|
||||
attributes: true,
|
||||
attributeFilter: ['class', 'data-state'],
|
||||
subtree: false,
|
||||
});
|
||||
|
||||
// Observer pour les changements dans le DOM
|
||||
const domObserver = new MutationObserver(() => {
|
||||
disableAnimations();
|
||||
});
|
||||
|
||||
domObserver.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
domObserver.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
ref={contentRef}
|
||||
data-slot="select-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
"bg-popover text-popover-foreground relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
||||
className,
|
||||
)}
|
||||
position={position}
|
||||
style={{
|
||||
animation: 'none !important',
|
||||
transition: 'none !important',
|
||||
opacity: '1 !important',
|
||||
} as React.CSSProperties}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
|
||||
Reference in New Issue
Block a user