feat: improve input component styling for better readability and maintainability
This commit is contained in:
parent
56402a374d
commit
f99fd94b51
2 changed files with 9 additions and 2 deletions
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue