Files
jmap-webmail/components/ui/button.tsx
T
Matthieu MALVACHE ba0751eb19 fix: Replace hardcoded colors with CSS variables for proper light/dark mode switching
- Updated all components to use theme CSS variables instead of hardcoded gray colors
- Fixed issue where light mode only changed borders but not backgrounds
- Components now properly respect theme switching with consistent colors
- Replaced bg-gray-*, text-gray-*, border-gray-* with theme variables (bg-background, text-foreground, etc.)

Affected components:
- Main page layout
- Login page
- Sidebar navigation
- All UI components (Button, Input, Toast, Language Switcher)
- Email viewer, list, and list items
2025-10-02 01:58:38 +02:00

41 lines
1.3 KiB
TypeScript

import * as React from "react";
import { cn } from "@/lib/utils";
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: "default" | "ghost" | "outline";
size?: "sm" | "md" | "lg" | "icon";
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant = "default", size = "md", ...props }, ref) => {
return (
<button
className={cn(
"inline-flex items-center justify-center rounded-md font-medium transition-all duration-200",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
"disabled:pointer-events-none disabled:opacity-50",
{
default:
"bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm hover:shadow",
ghost: "hover:bg-accent hover:text-accent-foreground",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
}[variant],
{
sm: "h-9 px-3 text-sm",
md: "h-10 px-4 py-2",
lg: "h-11 px-8",
icon: "h-10 w-10",
}[size],
className
)}
ref={ref}
{...props}
/>
);
}
);
Button.displayName = "Button";
export { Button };