feat: improve input component styling for better readability and maintainability

This commit is contained in:
Marco Pedone 2026-03-18 18:01:10 +01:00
parent 56402a374d
commit f99fd94b51
2 changed files with 9 additions and 2 deletions

View file

@ -72,7 +72,10 @@ const InputComponent = React.forwardRef<
React.ComponentProps<"input">
>(({ className, ...props }, ref) => (
<Input
className={cn("w-full flex-1 rounded-s-none rounded-e-md", className)}
className={cn(
"w-full flex-1 rounded-s-none rounded-e-md text-foreground",
className,
)}
{...props}
ref={ref}
/>

View file

@ -11,7 +11,11 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
type={type}
{...props}
className={cn(
`h-10 w-full rounded-lg border border-border bg-card px-3 py-2 font-medium text-primary shadow-xs outline-hidden transition-all duration-200 file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground hover:border-muted-foreground focus:border-foreground focus:ring-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:border-input dark:bg-input/30 dark:hover:border-muted-foreground dark:hover:bg-input/50`,
`h-10 w-full rounded-lg border border-border bg-card px-3 py-2 font-medium text-primary shadow-xs outline-hidden`,
`transition-all duration-200 file:border-0 file:bg-transparent file:font-medium file:text-sm`,
`placeholder:text-muted-foreground/50 hover:border-muted-foreground focus:border-foreground focus:ring-foreground`,
`disabled:cursor-not-allowed disabled:opacity-50 dark:border-input dark:bg-input/30 dark:hover:border-muted-foreground`,
`dark:hover:bg-input/50`,
className,
)}
/>