From 8b361c7a1ce125b6316c1e91ab2d542a5e634e73 Mon Sep 17 00:00:00 2001 From: Carson Full Date: Tue, 25 Jun 2024 16:20:23 -0500 Subject: [PATCH 01/10] Stop coupling color to typography MUI components will inherit typography variants, but use a different action color. For example, FormLabel defaults to `text.secondary` & `typography.body1` So we probably want to respect that color. --- src/scenes/ProgressReports/List/ProgressReportsTable.tsx | 1 + src/theme/typography.ts | 4 +--- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/scenes/ProgressReports/List/ProgressReportsTable.tsx b/src/scenes/ProgressReports/List/ProgressReportsTable.tsx index 275f4de519..890b93d4cb 100644 --- a/src/scenes/ProgressReports/List/ProgressReportsTable.tsx +++ b/src/scenes/ProgressReports/List/ProgressReportsTable.tsx @@ -102,6 +102,7 @@ export const RowLink = (props: GridRowProps) => { component={Link} variant="body2" to={`/progress-reports/${idForUrl(report)}`} + color="inherit" sx={{ textDecoration: 'none' }} > diff --git a/src/theme/typography.ts b/src/theme/typography.ts index 083a4d113d..b31c19af6d 100644 --- a/src/theme/typography.ts +++ b/src/theme/typography.ts @@ -1,9 +1,8 @@ -import type { Palette } from '@mui/material'; import type { TypographyOptions } from '@mui/material/styles/createTypography'; import { pickBy } from 'lodash'; import type { CSSProperties } from 'react'; -export const typography = (palette: Palette): TypographyOptions => { +export const typography = (): TypographyOptions => { const weight: FontWeights = { light: 300, // default regular: 400, // default @@ -21,7 +20,6 @@ export const typography = (palette: Palette): TypographyOptions => { allVariants: { fontWeight: weight.medium, - color: palette.text.primary, }, // Header 1 From b7c19741c926232494121ed4f1d7893b7c961082 Mon Sep 17 00:00:00 2001 From: Carson Full Date: Tue, 25 Jun 2024 16:25:49 -0500 Subject: [PATCH 02/10] text.primary #3c444e -> 75% black Using opacity for gray renders better than solid colors, esp on colored backgrounds. MUI default is 87%, which I think looks good. 75% matches close to what we had before. --- src/theme/palette.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/theme/palette.ts b/src/theme/palette.ts index 1d779c7ae8..271adf961a 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -32,7 +32,8 @@ export const createPalette = ({ dark }: { dark?: boolean }) => { main: '#f2994a', }, text: { - primary: dark ? '#f3f4f6' : '#3c444e', + // Close to #3c444e while still using alpha + ...(!dark ? { primary: 'rgba(0, 0, 0, 0.75)' } : {}), secondary: '#8f928b', }, From 0690b0de5ba5db28b4e08150f2b8280890fa05d9 Mon Sep 17 00:00:00 2001 From: Carson Full Date: Tue, 25 Jun 2024 16:29:18 -0500 Subject: [PATCH 03/10] text.secondary #8f928b -> 60% black (MUI default) Opacity has to drop all the way to 45% to be close to what we had before. For context, the disabled text color is only slightly lower than that at 38%. The contrast just wasn't enough at 45% esp on labels of filled input, which have a gray background. --- src/theme/palette.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/theme/palette.ts b/src/theme/palette.ts index 271adf961a..b35f0ab6a3 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -34,7 +34,9 @@ export const createPalette = ({ dark }: { dark?: boolean }) => { text: { // Close to #3c444e while still using alpha ...(!dark ? { primary: 'rgba(0, 0, 0, 0.75)' } : {}), - secondary: '#8f928b', + // Close to #8f928b while still using alpha + // Still it looks so contrast-less for form labels + // secondary: 'rgba(0, 0, 0, 0.45)', }, // TODO theme.palette.augmentColor() From 1e8543af197ce09074023678505e2e1adfcf7441 Mon Sep 17 00:00:00 2001 From: Carson Full Date: Tue, 25 Jun 2024 16:32:56 -0500 Subject: [PATCH 04/10] Remove all caps from input labels Moved the bolder label weight to shrink class, so it doesn't apply if/when allow labels to act as placeholders. --- src/theme/overrides.ts | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/src/theme/overrides.ts b/src/theme/overrides.ts index e1a6f1c8f4..cece977e66 100644 --- a/src/theme/overrides.ts +++ b/src/theme/overrides.ts @@ -50,11 +50,6 @@ export const appComponents = ({ defaultProps: { size: 'small', }, - styleOverrides: { - root: { - textTransform: 'none', - }, - }, }, MuiIconButton: { defaultProps: { @@ -70,8 +65,6 @@ export const appComponents = ({ styleOverrides: { root: { // Add divider between card content & actions - // Implementation is following from MUI v5 - // https://github.com/mui-org/material-ui/pull/18965 borderTop: `thin solid ${palette.divider}`, }, }, @@ -82,12 +75,13 @@ export const appComponents = ({ }, styleOverrides: { root: { - textTransform: 'uppercase', - fontWeight: typography.weight.medium, '&.Mui-focused': { color: primaryColorForText, }, }, + shrink: { + fontWeight: typography.weight.medium, + }, }, }, MuiOutlinedInput: { @@ -95,11 +89,6 @@ export const appComponents = ({ // because we always shrink label we always want notch applied notched: true, }, - styleOverrides: { - notchedOutline: { - textTransform: 'uppercase', - }, - }, }, MuiFormControl: { defaultProps: { From 30d7fd939f16fd9947f721c60c823631204c4bb9 Mon Sep 17 00:00:00 2001 From: Carson Full Date: Tue, 25 Jun 2024 16:35:52 -0500 Subject: [PATCH 05/10] IconButton default size large -> medium (follow MUI/MD) --- src/theme/overrides.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/theme/overrides.ts b/src/theme/overrides.ts index cece977e66..10e4683f70 100644 --- a/src/theme/overrides.ts +++ b/src/theme/overrides.ts @@ -51,11 +51,6 @@ export const appComponents = ({ size: 'small', }, }, - MuiIconButton: { - defaultProps: { - size: 'large', // MUI v4 default. Consider removing. - }, - }, MuiCard: { defaultProps: { elevation: 8, From 9a3354cc0924a25a32841fcbaccafa45f05d0157 Mon Sep 17 00:00:00 2001 From: Carson Full Date: Tue, 25 Jun 2024 16:48:18 -0500 Subject: [PATCH 06/10] Card elevation 8 -> 2 / Paper 1 -> 2 1 is default for MUI. To me, there is just not enough shadow on 1, to make the surface distinct from the background. Paper is basically the same thing, so bumping to be consistent with Cards. --- .../ProgressReports/EditForm/ProgressReportStepper.tsx | 7 +------ .../ProgressReports/EditForm/Steps/VariantAccordion.tsx | 2 +- src/theme/overrides.ts | 7 ++++++- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/scenes/ProgressReports/EditForm/ProgressReportStepper.tsx b/src/scenes/ProgressReports/EditForm/ProgressReportStepper.tsx index c63e45e0dc..46fdc96de5 100644 --- a/src/scenes/ProgressReports/EditForm/ProgressReportStepper.tsx +++ b/src/scenes/ProgressReports/EditForm/ProgressReportStepper.tsx @@ -67,12 +67,7 @@ export const ProgressReportStepper = () => { useProgressReportContext(); return ( - + Steps: diff --git a/src/scenes/ProgressReports/EditForm/Steps/VariantAccordion.tsx b/src/scenes/ProgressReports/EditForm/Steps/VariantAccordion.tsx index e5bdedc23b..8d5c2f3721 100644 --- a/src/scenes/ProgressReports/EditForm/Steps/VariantAccordion.tsx +++ b/src/scenes/ProgressReports/EditForm/Steps/VariantAccordion.tsx @@ -18,7 +18,7 @@ export const VariantAccordion = ({ const [expanded, { toggle }] = useToggle(expandedInput ?? false); return ( - + } diff --git a/src/theme/overrides.ts b/src/theme/overrides.ts index 10e4683f70..2c78203d17 100644 --- a/src/theme/overrides.ts +++ b/src/theme/overrides.ts @@ -51,9 +51,14 @@ export const appComponents = ({ size: 'small', }, }, + MuiPaper: { + defaultProps: { + elevation: 2, + }, + }, MuiCard: { defaultProps: { - elevation: 8, + elevation: 2, }, }, MuiCardActions: { From bb519670a246c77428ffb30b959656f121103c13 Mon Sep 17 00:00:00 2001 From: Carson Full Date: Tue, 25 Jun 2024 16:50:09 -0500 Subject: [PATCH 07/10] AppBar elevation 1 -> 2 It is weird to have that floating surface lower than surfaces on page. --- src/scenes/Root/Header/Header.tsx | 2 +- src/theme/overrides.ts | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/scenes/Root/Header/Header.tsx b/src/scenes/Root/Header/Header.tsx index 5cdc0a20d9..922750c3b5 100644 --- a/src/scenes/Root/Header/Header.tsx +++ b/src/scenes/Root/Header/Header.tsx @@ -3,7 +3,7 @@ import { HeaderSearch } from './HeaderSearch'; import { ProfileToolbar } from './ProfileToolbar'; export const Header = () => ( - + diff --git a/src/theme/overrides.ts b/src/theme/overrides.ts index 2c78203d17..5a0ce6deb0 100644 --- a/src/theme/overrides.ts +++ b/src/theme/overrides.ts @@ -15,6 +15,11 @@ export const appComponents = ({ ? palette.primary.light : palette.primary.main; return { + MuiAppBar: { + defaultProps: { + elevation: 2, + }, + }, MuiCssBaseline: { styleOverrides: { '#root': { From 3998f3b295c26a40af613ecafe39e52e4918c68f Mon Sep 17 00:00:00 2001 From: Andre Turner Date: Tue, 1 Oct 2024 12:22:48 -0500 Subject: [PATCH 08/10] Change primary color --- src/components/Changeset/PropertyDiff.tsx | 2 +- src/theme/overrides.ts | 7 ++----- src/theme/palette.ts | 6 ++---- 3 files changed, 5 insertions(+), 10 deletions(-) diff --git a/src/components/Changeset/PropertyDiff.tsx b/src/components/Changeset/PropertyDiff.tsx index bc1134e8cd..ff8cac228b 100644 --- a/src/components/Changeset/PropertyDiff.tsx +++ b/src/components/Changeset/PropertyDiff.tsx @@ -19,7 +19,7 @@ const useStyles = makeStyles()(({ palette, shape, spacing }) => ({ }, current: { color: palette.primary.dark, - background: fade(palette.primary.light, 0.5), + background: fade(palette.primary.main, 0.5), }, })); diff --git a/src/theme/overrides.ts b/src/theme/overrides.ts index 5a0ce6deb0..a5936fa184 100644 --- a/src/theme/overrides.ts +++ b/src/theme/overrides.ts @@ -11,9 +11,6 @@ export const appComponents = ({ shape, }: Theme): Components => { const dark = palette.mode === 'dark'; - const primaryColorForText = dark - ? palette.primary.light - : palette.primary.main; return { MuiAppBar: { defaultProps: { @@ -81,7 +78,7 @@ export const appComponents = ({ styleOverrides: { root: { '&.Mui-focused': { - color: primaryColorForText, + color: palette.primary.main, }, }, shrink: { @@ -144,7 +141,7 @@ export const appComponents = ({ MuiLink: { defaultProps: { underline: 'hover', - color: dark ? 'primary.light' : 'primary.main', + color: 'primary.main', }, }, MuiToggleButtonGroup: { diff --git a/src/theme/palette.ts b/src/theme/palette.ts index b35f0ab6a3..6334e2374f 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -1,10 +1,10 @@ import { PaletteColor, PaletteColorOptions } from '@mui/material'; import { grey } from '@mui/material/colors'; -import { lighten, PaletteOptions } from '@mui/material/styles'; +import { PaletteOptions } from '@mui/material/styles'; import { Role } from '~/api/schema/schema.graphql'; export const createPalette = ({ dark }: { dark?: boolean }) => { - const mainGreen = '#467f3b'; + const mainGreen = '#1EA973'; const roleLuminance = dark ? 32 : 84; const palette: PaletteOptions = { mode: dark ? 'dark' : 'light', @@ -14,8 +14,6 @@ export const createPalette = ({ dark }: { dark?: boolean }) => { primary: { main: mainGreen, contrastText: '#ffffff', - // default is lighten main color by 0.2 - light: lighten(mainGreen, 0.4), }, secondary: { main: dark ? grey[50] : '#3c444e', From fb2bd0384da960e0de44001a24bc2eabd44bacb8 Mon Sep 17 00:00:00 2001 From: Carson Full Date: Wed, 9 Oct 2024 07:47:09 -0500 Subject: [PATCH 09/10] Change Dashboard card to use the new standard style --- src/components/Widgets/Widget.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Widgets/Widget.tsx b/src/components/Widgets/Widget.tsx index 9b94fe14ef..194dad37b4 100644 --- a/src/components/Widgets/Widget.tsx +++ b/src/components/Widgets/Widget.tsx @@ -10,8 +10,6 @@ export interface WidgetProps extends ChildrenProp { export const Widget = ({ colSpan, rowSpan, sx, ...props }: WidgetProps) => ( Date: Wed, 9 Oct 2024 16:09:12 -0500 Subject: [PATCH 10/10] Change Link to always underline --- .../SubmitReportStep/ConfirmIncompleteSubmissionDialog.tsx | 1 - .../ProgressReports/PnpValidation/PnPExtractionProblems.tsx | 6 +----- src/theme/overrides.ts | 2 +- 3 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/scenes/ProgressReports/EditForm/Steps/SubmitReportStep/ConfirmIncompleteSubmissionDialog.tsx b/src/scenes/ProgressReports/EditForm/Steps/SubmitReportStep/ConfirmIncompleteSubmissionDialog.tsx index 605e248771..97a95b5908 100644 --- a/src/scenes/ProgressReports/EditForm/Steps/SubmitReportStep/ConfirmIncompleteSubmissionDialog.tsx +++ b/src/scenes/ProgressReports/EditForm/Steps/SubmitReportStep/ConfirmIncompleteSubmissionDialog.tsx @@ -66,7 +66,6 @@ const IncompleteSteps = () => { {steps.map(({ label: stepName, severity }) => ( Once these problems are fixed, the updated file needs to be uploaded on the{' '} - + Planning Spreadsheet {' '} to synchronize the changes for the planned goals. diff --git a/src/theme/overrides.ts b/src/theme/overrides.ts index a5936fa184..be68be133e 100644 --- a/src/theme/overrides.ts +++ b/src/theme/overrides.ts @@ -140,7 +140,7 @@ export const appComponents = ({ }, MuiLink: { defaultProps: { - underline: 'hover', + underline: 'always', color: 'primary.main', }, },