From 6a6c16dbb2fce2c3e2fef37f32d2738e141522fa Mon Sep 17 00:00:00 2001
From: gorkem-bwl <gorkem.cetin@bluewavelabs.ca>
Date: Sat, 25 Apr 2026 23:28:32 -0400
Subject: [PATCH] fix(client): dark-mode text-field polish

- MuiOutlinedInput hover override: was inheriting MUI's default
  white outline in dark mode (too bright). Now uses an alpha-23%
  white in dark and text.primary in light.
- TextInput: -webkit-autofill now repaints the input bg with
  background.paper (instead of Chrome's harsh blue/yellow autofill
  highlight), text in text.primary, with the standard 5000s-transition
  trick to suppress the brief flash. Works in both modes.
---
 client/src/Components/inputs/TextInput.tsx |  8 ++++++++
 client/src/Utils/Theme/Theme.ts            | 10 ++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/client/src/Components/inputs/TextInput.tsx b/client/src/Components/inputs/TextInput.tsx
index 718b60327..fd49fcdf2 100644
--- a/client/src/Components/inputs/TextInput.tsx
+++ b/client/src/Components/inputs/TextInput.tsx
@@ -38,6 +38,14 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function T
 					marginRight: 0,
 					marginTop: theme.spacing(1),
 				},
+				"& input:-webkit-autofill, & input:-webkit-autofill:hover, & input:-webkit-autofill:focus, & input:-webkit-autofill:active":
+					{
+						WebkitBoxShadow: `0 0 0 100px ${theme.palette.background.paper} inset`,
+						WebkitTextFillColor: theme.palette.text.primary,
+						caretColor: theme.palette.text.primary,
+						borderRadius: theme.shape.borderRadius,
+						transition: "background-color 5000s ease-in-out 0s",
+					},
 			}}
 		/>
 	);
diff --git a/client/src/Utils/Theme/Theme.ts b/client/src/Utils/Theme/Theme.ts
index 49c1636ec..bd175e8d1 100644
--- a/client/src/Utils/Theme/Theme.ts
+++ b/client/src/Utils/Theme/Theme.ts
@@ -120,11 +120,17 @@ export const theme = (mode: string, palette: any) =>
 
 			MuiOutlinedInput: {
 				styleOverrides: {
-					root: {
+					root: ({ theme }) => ({
+						"&:hover .MuiOutlinedInput-notchedOutline": {
+							borderColor:
+								theme.palette.mode === "dark"
+									? "rgba(255, 255, 255, 0.23)"
+									: theme.palette.text.primary,
+						},
 						"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
 							borderColor: palette.primary.main,
 						},
-					},
+					}),
 				},
 			},