From 9c21d71c4491474f5e14b388104612249eeed3c9 Mon Sep 17 00:00:00 2001
From: gorkem-bwl <gorkem.cetin@bluewavelabs.ca>
Date: Tue, 28 Apr 2026 23:54:39 -0400
Subject: [PATCH] refactor(inputs): softer button hover, sx-forwarding
 TextInput, themed FieldLabel

- Button.tsx: contained variant's hover now uses HOVER.DARKEN=0.06
  instead of MUI's default 16%, which was visibly heavy on the green
  primary buttons across the app. Also fixes a subtle bug where the
  earlier hover sx merge order silently dropped the boxShadow:'none'
  reset. Added a HOVER token group to constants.ts so the darken value
  has a single source of truth.
- TextInput.tsx: forward the caller's sx to the wrapper Stack when a
  fieldLabel is present (previously it was applied to the inner
  TextField, so flex:1 etc. didn't propagate to the visible width).
  Inner sx now also explicitly width:100% so wrapped inputs don't
  collapse to content width when their parent is a flex row.
- FieldLabel.tsx: drop the hardcoded fontSize:'14px' and use
  variant=body1 (=13px from theme) to match the rest of the app's
  body typography.
---
 client/src/Components/inputs/Button.tsx     | 40 ++++++++++---
 client/src/Components/inputs/FieldLabel.tsx |  2 +-
 client/src/Components/inputs/TextInput.tsx  | 62 +++++++++++----------
 client/src/Utils/Theme/constants.ts         |  4 ++
 4 files changed, 70 insertions(+), 38 deletions(-)

diff --git a/client/src/Components/inputs/Button.tsx b/client/src/Components/inputs/Button.tsx
index 54f776075..4eae654b2 100644
--- a/client/src/Components/inputs/Button.tsx
+++ b/client/src/Components/inputs/Button.tsx
@@ -1,19 +1,43 @@
 import Button from "@mui/material/Button";
 import type { ButtonProps } from "@mui/material/Button";
-import { useTheme } from "@mui/material/styles";
+import { useTheme, darken } from "@mui/material/styles";
+import { HOVER } from "@/Utils/Theme/constants";
+
+const PALETTE_COLORS = [
+	"primary",
+	"secondary",
+	"error",
+	"warning",
+	"info",
+	"success",
+] as const;
+type PaletteColor = (typeof PALETTE_COLORS)[number];
 
 export const ButtonInput = ({ sx, ...props }: ButtonProps) => {
 	const theme = useTheme();
-	const outlinedSx =
+
+	const hoverOverrides: Record<string, unknown> = { boxShadow: "none" };
+
+	if (props.variant === "outlined") {
+		hoverOverrides.borderColor = theme.palette.text.secondary;
+	}
+
+	if (props.variant === "contained") {
+		const colorKey = (props.color ?? "primary") as PaletteColor;
+		const palette = theme.palette[colorKey];
+		if (palette && typeof palette === "object" && "main" in palette) {
+			hoverOverrides.backgroundColor = darken(palette.main, HOVER.DARKEN);
+		}
+	}
+
+	const variantSx =
 		props.variant === "outlined"
 			? {
 					color: theme.palette.text.primary,
 					borderColor: theme.palette.divider,
-					"&:hover": {
-						borderColor: theme.palette.text.secondary,
-					},
 				}
 			: {};
+
 	return (
 		<Button
 			{...props}
@@ -26,10 +50,8 @@ export const ButtonInput = ({ sx, ...props }: ButtonProps) => {
 				textOverflow: "ellipsis",
 				overflow: "hidden",
 				boxShadow: "none",
-				"&:hover": {
-					boxShadow: "none",
-				},
-				...outlinedSx,
+				"&:hover": hoverOverrides,
+				...variantSx,
 				...sx,
 			}}
 		/>
diff --git a/client/src/Components/inputs/FieldLabel.tsx b/client/src/Components/inputs/FieldLabel.tsx
index 448545a19..1c1bc0a8c 100644
--- a/client/src/Components/inputs/FieldLabel.tsx
+++ b/client/src/Components/inputs/FieldLabel.tsx
@@ -15,9 +15,9 @@ export const FieldLabel = ({ children, required = false, htmlFor }: FieldLabelPr
 	return (
 		<Typography
 			component="label"
+			variant="body1"
 			htmlFor={htmlFor}
 			sx={{
-				fontSize: "14px",
 				fontWeight: 500,
 				color: theme.palette.text.secondary,
 				marginBottom: theme.spacing(2),
diff --git a/client/src/Components/inputs/TextInput.tsx b/client/src/Components/inputs/TextInput.tsx
index bfcbfa181..8b7092d0b 100644
--- a/client/src/Components/inputs/TextInput.tsx
+++ b/client/src/Components/inputs/TextInput.tsx
@@ -12,47 +12,53 @@ interface TextInputProps extends Omit<TextFieldProps, "label"> {
 }
 
 export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput(
-	{ fieldLabel, required, ...props },
+	{ fieldLabel, required, sx, ...props },
 	ref
 ) {
 	const theme = useTheme();
 
+	const innerSx = {
+		width: "100%",
+		"& .MuiOutlinedInput-root": {
+			borderRadius: theme.shape.borderRadius,
+			height: 34,
+			fontSize: typographyLevels.base,
+			overflow: "hidden",
+		},
+		"& .MuiOutlinedInput-notchedOutline": {
+			borderColor: theme.palette.divider,
+		},
+		"&:hover .MuiOutlinedInput-notchedOutline": {
+			borderColor: theme.palette.divider,
+		},
+		"& .MuiFormHelperText-root": {
+			marginLeft: 0,
+			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.default} inset !important`,
+				WebkitTextFillColor: `${theme.palette.text.primary} !important`,
+				caretColor: theme.palette.text.primary,
+				transition: "background-color 5000s ease-in-out 0s",
+			},
+	};
+
 	const input = (
 		<TextField
 			{...props}
 			inputRef={ref}
-			sx={{
-				"& .MuiOutlinedInput-root": {
-					borderRadius: theme.shape.borderRadius,
-					height: 34,
-					fontSize: typographyLevels.base,
-					overflow: "hidden",
-				},
-				"& .MuiOutlinedInput-notchedOutline": {
-					borderColor: theme.palette.divider,
-				},
-				"&:hover .MuiOutlinedInput-notchedOutline": {
-					borderColor: theme.palette.divider,
-				},
-				"& .MuiFormHelperText-root": {
-					marginLeft: 0,
-					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.default} inset !important`,
-						WebkitTextFillColor: `${theme.palette.text.primary} !important`,
-						caretColor: theme.palette.text.primary,
-						transition: "background-color 5000s ease-in-out 0s",
-					},
-			}}
+			sx={fieldLabel ? innerSx : { ...innerSx, ...sx }}
 		/>
 	);
 
 	if (fieldLabel) {
 		return (
-			<Stack spacing={theme.spacing(2)}>
+			<Stack
+				spacing={theme.spacing(2)}
+				sx={sx}
+			>
 				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
 				{input}
 			</Stack>
diff --git a/client/src/Utils/Theme/constants.ts b/client/src/Utils/Theme/constants.ts
index 8b045f9f6..c173ff673 100644
--- a/client/src/Utils/Theme/constants.ts
+++ b/client/src/Utils/Theme/constants.ts
@@ -15,3 +15,7 @@ export const LAYOUT = {
 	XL: 12,
 	XXL: 16,
 } as const;
+
+export const HOVER = {
+	DARKEN: 0.06,
+} as const;