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

feat: revamp global styles and component designs with enhanced gradients, shadows, and responsive layouts for a modern fintech aesthetic

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-07 17:42:07 +01:00
parent a33c41f1bd
commit 2db5bc324d
15 changed files with 767 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/ui/button.tsx
View File

@@ -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: {

9
components/ui/card.tsx
View File

@@ -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}

3
components/ui/dropdown-menu.tsx
View File

@@ -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}

58
components/ui/popover.tsx
View File

@@ -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>

4
components/ui/progress.tsx
View File

@@ -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>

60
components/ui/select.tsx
View File

@@ -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 />