From c45a282990f49e58a890428f4aec8c9e3a7d5e9c Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Thu, 8 May 2025 10:39:49 -0700 Subject: [PATCH 1/3] remove text input component styles --- client/src/Components/Inputs/TextInput/index.jsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/client/src/Components/Inputs/TextInput/index.jsx b/client/src/Components/Inputs/TextInput/index.jsx index 38a6b6161..650dc29c5 100644 --- a/client/src/Components/Inputs/TextInput/index.jsx +++ b/client/src/Components/Inputs/TextInput/index.jsx @@ -6,18 +6,6 @@ import PropTypes from "prop-types"; const getSx = (theme, type, maxWidth) => { const sx = { maxWidth: maxWidth, - "& .MuiOutlinedInput-root ": { - "&:hover .MuiOutlinedInput-notchedOutline": { - borderColor: theme.palette.primary.contrastText, // Adjust hover border color - }, - "&.Mui-focused .MuiOutlinedInput-notchedOutline": { - borderColor: theme.palette.accent.main, // Adjust focus border color - }, - "&.Mui-disabled .MuiOutlinedInput-notchedOutline": { - borderColor: theme.palette.primary.contrastText, // CAIO_REVIEW - opacity: 0.5, - }, - }, "& .MuiFormHelperText-root": { position: "absolute", From 002e9ce18abdafbd5bb7806867803292c69a2f3f Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Thu, 8 May 2025 10:40:17 -0700 Subject: [PATCH 2/3] add colors for borders/disabled borders --- client/src/Utils/Theme/constants.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/client/src/Utils/Theme/constants.js b/client/src/Utils/Theme/constants.js index 8c4127c3d..920a55f69 100644 --- a/client/src/Utils/Theme/constants.js +++ b/client/src/Utils/Theme/constants.js @@ -63,7 +63,6 @@ const paletteColors = { orange500: "#E88C30", orange600: "#DC6803", orange800: "#624711", - }; const semanticColors = { @@ -155,7 +154,6 @@ const newSemanticColors = { light: newColors.blueGray600, dark: newColors.gray200, }, - // CAIO_REVIEW, need a brighter color for dark bg contrastTextSecondaryDarkBg: { light: newColors.gray200, dark: newColors.gray200, @@ -164,6 +162,14 @@ const newSemanticColors = { light: newColors.blueGray500, dark: newColors.gray500, }, + contrastBorder: { + light: newColors.gray500, + dark: newColors.blueGray600, + }, + contrastBorderDisabled: { + light: newColors.gray100, + dark: newColors.blueGray800, + }, lowContrast: { light: newColors.gray200, dark: newColors.blueGray600, @@ -264,7 +270,7 @@ const newSemanticColors = { dark: newColors.red600, }, }, - + /* These are temporary, just for everything not to break */ gradient: { color1: { From d82b0ad67446a2058955d74776d7c6d67f1c58da Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Thu, 8 May 2025 10:40:36 -0700 Subject: [PATCH 3/3] apply colors to theme --- client/src/Utils/Theme/globalTheme.js | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/client/src/Utils/Theme/globalTheme.js b/client/src/Utils/Theme/globalTheme.js index cd8173f83..ff9d1d876 100644 --- a/client/src/Utils/Theme/globalTheme.js +++ b/client/src/Utils/Theme/globalTheme.js @@ -1,5 +1,4 @@ import { typographyLevels } from "./constants"; - const fontFamilyPrimary = '"Inter" , sans-serif'; // const fontFamilySecondary = '"Avenir", sans-serif'; @@ -300,13 +299,15 @@ const baseTheme = (palette) => ({ }), }, }, + MuiTextField: { styleOverrides: { root: ({ theme }) => ({ "& fieldset": { - borderColor: theme.palette.primary.lowContrast, + borderColor: theme.palette.primary.contrastBorder, borderRadius: theme.shape.borderRadius, }, + "& .MuiInputBase-input": { padding: ".75em", minHeight: "var(--env-var-height-2)", @@ -356,10 +357,19 @@ const baseTheme = (palette) => ({ MuiOutlinedInput: { styleOverrides: { root: { - color: palette.primary.contrastTextTertiary, - "&.Mui-focused .MuiOutlinedInput-notchedOutline": { - borderColor: palette.primary.contrastTextTertiary, + "&.Mui-disabled .MuiOutlinedInput-notchedOutline": { + borderColor: palette.primary.contrastBorderDisabled, }, + "&.Mui-disabled:hover .MuiOutlinedInput-notchedOutline": { + borderColor: palette.primary.contrastBorderDisabled, + }, + "&:hover .MuiOutlinedInput-notchedOutline": { + borderColor: palette.primary.contrastText, // Adjust hover border color + }, + "&.Mui-focused .MuiOutlinedInput-notchedOutline": { + borderColor: palette.accent.main, // Adjust focus border color + }, + color: palette.primary.contrastTextTertiary, }, }, }, @@ -486,7 +496,7 @@ const baseTheme = (palette) => ({ root: ({ theme }) => ({ ml: "auto", "& .MuiButtonBase-root, & .MuiButtonBase-root:hover": { - borderColor: theme.palette.primary.lowContrast, + borderColor: theme.palette.primary.contrastBorder, width: "auto", whiteSpace: "nowrap", },