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}
{...props}
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,
)}
/>

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

@ -133,12 +133,12 @@ export const MultiSelect = ({
classNames={{
control: () =>
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"),
menu: () =>
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`,
menuOpen
? "animate-in fade-in-0 zoom-in-90"
@ -155,7 +155,7 @@ export const MultiSelect = ({
multiValueRemove: () => cn("rounded-s-none rounded-e-md"),
option: () =>
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"),
valueContainer: () => cn("min-h-[38px]"),
@ -196,9 +196,15 @@ export const MultiSelect = ({
: "rgb(161,161,170)",
},
}) as CSSObjectWithLabel,
control: (base, state) =>
({
...base,
control: (base, state) => {
const {
backgroundColor: _bg,
border: _border,
borderColor: _bc,
...rest
} = base;
return {
...rest,
"& .select__dropdown-indicator": {
color: state.isFocused
@ -219,14 +225,12 @@ export const MultiSelect = ({
: "rgb(161 ,161 ,170)",
},
border: state.isFocused
? "1px solid rgb(161,161,170)"
: "1px solid rgb(212 ,212 ,216)",
border: state.isFocused && "1px solid rgb(161,161,170)",
borderRadius: "0.5rem",
boxShadow: undefined,
minHeight: "42px",
backgroundColor: "var(--color-background)",
}) as CSSObjectWithLabel,
} as CSSObjectWithLabel;
},
singleValue: (base) =>
({
...base,

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

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