diff --git a/client/src/Components/inputs/DatePicker.tsx b/client/src/Components/inputs/DatePicker.tsx index c63c5ce08..74dec5adf 100644 --- a/client/src/Components/inputs/DatePicker.tsx +++ b/client/src/Components/inputs/DatePicker.tsx @@ -66,7 +66,9 @@ export const DatePickerComponent = ({ }, "&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset": { - borderColor: error ? theme.palette.error.main : theme.palette.divider, + borderColor: error + ? theme.palette.error.main + : theme.palette.text.disabled, }, }, }, diff --git a/client/src/Components/inputs/Select.tsx b/client/src/Components/inputs/Select.tsx index 0077d2be6..f5670887d 100644 --- a/client/src/Components/inputs/Select.tsx +++ b/client/src/Components/inputs/Select.tsx @@ -83,10 +83,6 @@ const SelectInputInner = ( }, "& .MuiOutlinedInput-notchedOutline": { borderRadius: theme.shape.borderRadius, - borderColor: theme.palette.divider, - }, - "&:hover .MuiOutlinedInput-notchedOutline": { - borderColor: theme.palette.divider, }, ...props.sx, }} diff --git a/client/src/Components/inputs/TextInput.tsx b/client/src/Components/inputs/TextInput.tsx index a246aaf04..8810136ac 100644 --- a/client/src/Components/inputs/TextInput.tsx +++ b/client/src/Components/inputs/TextInput.tsx @@ -26,12 +26,6 @@ export const TextInput = forwardRef(function T fontSize: typographyLevels.base, overflow: "hidden", }, - "& .MuiOutlinedInput-notchedOutline": { - borderColor: theme.palette.divider, - }, - "&:hover .MuiOutlinedInput-notchedOutline": { - borderColor: theme.palette.divider, - }, "& .MuiFormHelperText-root": { marginLeft: 0, marginRight: 0, diff --git a/client/src/Utils/Theme/Palette.ts b/client/src/Utils/Theme/Palette.ts index c64dbaf8f..19ec22c85 100644 --- a/client/src/Utils/Theme/Palette.ts +++ b/client/src/Utils/Theme/Palette.ts @@ -112,6 +112,11 @@ export const lightPalette = { export const darkPalette = { primary: { main: colors.brandGreen, + // The dark ground needs a lighter green for anything drawn as a line + // rather than a fill - focus rings especially, which were dimmer than + // their own hover state. Leaving `main` alone keeps contained buttons + // white-on-green instead of flipping them to dark text. + light: colors.brandGreenLight, }, action: { rowHover: alpha("#FFFFFF", HOVER.ROW), diff --git a/client/src/Utils/Theme/Theme.ts b/client/src/Utils/Theme/Theme.ts index 46dd97f48..8c3ef9e76 100644 --- a/client/src/Utils/Theme/Theme.ts +++ b/client/src/Utils/Theme/Theme.ts @@ -189,17 +189,30 @@ export const theme = (mode: string, palette: any) => }, }, + // One border story for every outlined input - text fields, selects, + // autocompletes, date and colour pickers all route through this. + // Resting: divider. Hover: a step darker, so there is a cue without + // jumping to near-black. Focus: the brand, at 2px. MuiOutlinedInput: { styleOverrides: { root: ({ theme }) => ({ - "&:hover .MuiOutlinedInput-notchedOutline": { + "& .MuiOutlinedInput-notchedOutline": { + borderColor: theme.palette.divider, + transition: "border-color 0.15s ease", + }, + "&:hover:not(.Mui-focused):not(.Mui-disabled) .MuiOutlinedInput-notchedOutline": + { + borderColor: theme.palette.text.disabled, + }, + "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: theme.palette.mode === "dark" - ? "rgba(255, 255, 255, 0.23)" - : theme.palette.text.primary, + ? theme.palette.primary.light + : theme.palette.primary.main, + borderWidth: 2, }, - "&.Mui-focused .MuiOutlinedInput-notchedOutline": { - borderColor: palette.primary.main, + "&.Mui-error .MuiOutlinedInput-notchedOutline": { + borderColor: theme.palette.error.main, }, }), },