Marco/infoalloggi-monorepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 6 Wiki Activity Actions

refactor: enhance input and multiselect components with improved dark mode styles

Browse source
This commit is contained in:
Marco Pedone 2025-11-17 18:04:39 +01:00
parent 88bf525ae4
commit 084ed4121c
4 changed files with 18 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/infoalloggi/src/components/custom_ui/input.tsx
View file

@ -11,7 +11,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
type={type} type={type}
{...props} {...props}
className={cn( className={cn(
`w-full rounded-lg border border-border bg-background 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`, `w-full rounded-lg border border-border bg-background 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:bg-input/50`,
className, className,
)} )}
/> />

26
apps/infoalloggi/src/components/custom_ui/multiselect.tsx
View file

@ -133,12 +133,12 @@ export const MultiSelect = ({
classNames={{ classNames={{
control: () => control: () =>
cn( cn(
"mt-2 w-full rounded-lg h-min-[42px] bg-foreground bg-card shadow-xs outline-hidden text-foreground", "mt-2 w-full rounded-lg h-min-[42px] bg-card shadow-xs outline-hidden text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
), ),
input: () => cn("*:ring-0 focus:*:ring-0"), input: () => cn("*:ring-0 focus:*:ring-0"),
menu: () => menu: () =>
cn( cn(
`bg-foreground text-foreground dark:text-white border shadow-xs outline-hidden `bg-black text-foreground dark:text-white border shadow-xs outline-hidden
dark:border-foreground border-neutral-300 overflow-hidden`, dark:border-foreground border-neutral-300 overflow-hidden`,
menuOpen menuOpen
? "animate-in fade-in-0 zoom-in-90" ? "animate-in fade-in-0 zoom-in-90"
@ -155,7 +155,7 @@ export const MultiSelect = ({
multiValueRemove: () => cn("rounded-s-none rounded-e-md"), multiValueRemove: () => cn("rounded-s-none rounded-e-md"),
option: () => option: () =>
cn( cn(
"bg-card border-b border-foreground/50 shadow-xs outline-hidden hover:text-primary hover:bg-neutral-200 dark:hover:bg-neutral-700", "bg-card dark:bg-input border-b border-foreground/50 shadow-xs outline-hidden hover:text-primary hover:bg-neutral-200 dark:hover:bg-neutral-700",
), ),
singleValue: () => cn("text-primary font-medium"), singleValue: () => cn("text-primary font-medium"),
valueContainer: () => cn("min-h-[38px]"), valueContainer: () => cn("min-h-[38px]"),
@ -196,9 +196,15 @@ export const MultiSelect = ({
: "rgb(161,161,170)", : "rgb(161,161,170)",
}, },
}) as CSSObjectWithLabel, }) as CSSObjectWithLabel,
control: (base, state) => control: (base, state) => {
({ const {
...base, backgroundColor: _bg,
border: _border,
borderColor: _bc,
...rest
} = base;
return {
...rest,
"& .select__dropdown-indicator": { "& .select__dropdown-indicator": {
color: state.isFocused color: state.isFocused
@ -219,14 +225,12 @@ export const MultiSelect = ({
: "rgb(161 ,161 ,170)", : "rgb(161 ,161 ,170)",
}, },
border: state.isFocused border: state.isFocused && "1px solid rgb(161,161,170)",
? "1px solid rgb(161,161,170)"
: "1px solid rgb(212 ,212 ,216)",
borderRadius: "0.5rem", borderRadius: "0.5rem",
boxShadow: undefined, boxShadow: undefined,
minHeight: "42px", minHeight: "42px",
backgroundColor: "var(--color-background)", } as CSSObjectWithLabel;
}) as CSSObjectWithLabel, },
singleValue: (base) => singleValue: (base) =>
({ ({
...base, ...base,

2
apps/infoalloggi/src/components/ui/button.tsx
View file

@ -21,7 +21,7 @@ const buttonVariants = cva(
}, },
variant: { variant: {
default: default:
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 ",
destructive: destructive:
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",

2
apps/infoalloggi/src/styles/globals.css
View file

@ -227,7 +227,7 @@
} }
.dark { .dark {
--background: oklch(26.033% 0.00003 271.152); --background: oklch(0.23 0 0);
--foreground: oklch(0.95 0 0); --foreground: oklch(0.95 0 0);
--card: oklch(0.21 0 0); --card: oklch(0.21 0 0);
--card-foreground: oklch(0.95 0 0); --card-foreground: oklch(0.95 0 0);