From 084ed4121c6292f11b405488d9bc4f755e3d2095 Mon Sep 17 00:00:00 2001
From: Marco Pedone <m.pedone98@gmail.com>
Date: Mon, 17 Nov 2025 18:04:39 +0100
Subject: [PATCH] refactor: enhance input and multiselect components with
 improved dark mode styles

---
 .../src/components/custom_ui/input.tsx        |  2 +-
 .../src/components/custom_ui/multiselect.tsx  | 26 +++++++++++--------
 apps/infoalloggi/src/components/ui/button.tsx |  2 +-
 apps/infoalloggi/src/styles/globals.css       |  2 +-
 4 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/apps/infoalloggi/src/components/custom_ui/input.tsx b/apps/infoalloggi/src/components/custom_ui/input.tsx
index a17a7dd..89e27ea 100644
--- a/apps/infoalloggi/src/components/custom_ui/input.tsx
+++ b/apps/infoalloggi/src/components/custom_ui/input.tsx
@@ -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,
 				)}
 			/>
diff --git a/apps/infoalloggi/src/components/custom_ui/multiselect.tsx b/apps/infoalloggi/src/components/custom_ui/multiselect.tsx
index a1ea2be..a0ea7a3 100644
--- a/apps/infoalloggi/src/components/custom_ui/multiselect.tsx
+++ b/apps/infoalloggi/src/components/custom_ui/multiselect.tsx
@@ -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,
diff --git a/apps/infoalloggi/src/components/ui/button.tsx b/apps/infoalloggi/src/components/ui/button.tsx
index 47b46fb..7b21952 100644
--- a/apps/infoalloggi/src/components/ui/button.tsx
+++ b/apps/infoalloggi/src/components/ui/button.tsx
@@ -21,7 +21,7 @@ const buttonVariants = cva(
 			},
 			variant: {
 				default:
-					"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+					"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 ",
 
 				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",
diff --git a/apps/infoalloggi/src/styles/globals.css b/apps/infoalloggi/src/styles/globals.css
index 9291343..5ffc0ec 100644
--- a/apps/infoalloggi/src/styles/globals.css
+++ b/apps/infoalloggi/src/styles/globals.css
@@ -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);