Merge pull request #1553 from SeedCompany/theme-refresh

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),
   },
 }));
 

src/components/Widgets/Widget.tsx

@@ -10,8 +10,6 @@ export interface WidgetProps extends ChildrenProp {
 export const Widget = ({ colSpan, rowSpan, sx, ...props }: WidgetProps) => (
   <Card
     component={Stack}
-    elevation={0}
-    variant="outlined"
     sx={[
       {
         gridColumn: `span ${colSpan}`,

src/scenes/ProgressReports/EditForm/ProgressReportStepper.tsx

@@ -67,12 +67,7 @@ export const ProgressReportStepper = () => {
     useProgressReportContext();
 
   return (
-    <Paper
-      elevation={4}
-      sx={{ p: 2 }}
-      component="nav"
-      aria-label="Quarterly Report Steps"
-    >
+    <Paper sx={{ p: 2 }} component="nav" aria-label="Quarterly Report Steps">
       <Typography component="h3" paragraph aria-hidden>
         Steps:
       </Typography>

src/scenes/ProgressReports/EditForm/Steps/SubmitReportStep/ConfirmIncompleteSubmissionDialog.tsx

@@ -66,7 +66,6 @@ const IncompleteSteps = () => {
             {steps.map(({ label: stepName, severity }) => (
               <Typography component="li" key={stepName}>
                 <Link
-                  underline="always"
                   // Carson doesn't love this logic being duplicated here,
                   // but values semantic markup more
                   to={{ search: `?step=${kebabCase(stepName)}` }}

src/scenes/ProgressReports/EditForm/Steps/VariantAccordion.tsx

@@ -18,7 +18,7 @@ export const VariantAccordion = ({
   const [expanded, { toggle }] = useToggle(expandedInput ?? false);
 
   return (
-    <Accordion expanded={expanded} elevation={2} square>
+    <Accordion expanded={expanded} square>
       <AccordionSummary
         aria-controls={`${variant.key}-content`}
         expandIcon={<ExpandMore />}

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' }}
     >
       <GridRow {...props} />

src/scenes/ProgressReports/PnpValidation/PnPExtractionProblems.tsx

@@ -47,11 +47,7 @@ export const PnPExtractionProblems = memo(function PnPExtractionProblems({
             <Alert severity="info" sx={{ mb: 1 }}>
               Once these problems are fixed, the updated file needs to be
               uploaded on the{' '}
-              <Link
-                to={`/engagements/${engagement.id}`}
-                color="inherit"
-                underline="always"
-              >
+              <Link to={`/engagements/${engagement.id}`} color="inherit">
                 Planning Spreadsheet
               </Link>{' '}
               to synchronize the changes for the planned goals.

src/scenes/Root/Header/Header.tsx

@@ -3,7 +3,7 @@ import { HeaderSearch } from './HeaderSearch';
 import { ProfileToolbar } from './ProfileToolbar';
 
 export const Header = () => (
-  <AppBar position="static" color="inherit" elevation={1} sx={{ zIndex: 1 }}>
+  <AppBar position="static" color="inherit" sx={{ zIndex: 1 }}>
     <Toolbar sx={{ gap: 3, justifyContent: 'space-between' }}>
       <HeaderSearch sx={{ flex: 1, maxWidth: 500 }} />
       <ProfileToolbar />

src/theme/overrides.ts

@@ -11,10 +11,12 @@ export const appComponents = ({
   shape,
 }: Theme): Components<Theme> => {
   const dark = palette.mode === 'dark';
-  const primaryColorForText = dark
-    ? palette.primary.light
-    : palette.primary.main;
   return {
+    MuiAppBar: {
+      defaultProps: {
+        elevation: 2,
+      },
+    },
     MuiCssBaseline: {
       styleOverrides: {
         '#root': {
@@ -50,28 +52,21 @@ export const appComponents = ({
       defaultProps: {
         size: 'small',
       },
-      styleOverrides: {
-        root: {
-          textTransform: 'none',
-        },
-      },
     },
-    MuiIconButton: {
+    MuiPaper: {
       defaultProps: {
-        size: 'large', // MUI v4 default. Consider removing.
+        elevation: 2,
       },
     },
     MuiCard: {
       defaultProps: {
-        elevation: 8,
+        elevation: 2,
       },
     },
     MuiCardActions: {
       styleOverrides: {
         root: {
           // Add divider between card content & actions
-          // Implementation is following <Divider /> from MUI v5
-          // https://github.com/mui-org/material-ui/pull/18965
           borderTop: `thin solid ${palette.divider}`,
         },
       },
@@ -82,24 +77,20 @@ export const appComponents = ({
       },
       styleOverrides: {
         root: {
-          textTransform: 'uppercase',
-          fontWeight: typography.weight.medium,
           '&.Mui-focused': {
-            color: primaryColorForText,
+            color: palette.primary.main,
           },
         },
+        shrink: {
+          fontWeight: typography.weight.medium,
+        },
       },
     },
     MuiOutlinedInput: {
       defaultProps: {
         // because we always shrink label we always want notch applied
         notched: true,
       },
-      styleOverrides: {
-        notchedOutline: {
-          textTransform: 'uppercase',
-        },
-      },
     },
     MuiFormControl: {
       defaultProps: {
@@ -149,8 +140,8 @@ export const appComponents = ({
     },
     MuiLink: {
       defaultProps: {
-        underline: 'hover',
-        color: dark ? 'primary.light' : 'primary.main',
+        underline: 'always',
+        color: 'primary.main',
       },
     },
     MuiToggleButtonGroup: {

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',
@@ -32,8 +30,11 @@ export const createPalette = ({ dark }: { dark?: boolean }) => {
       main: '#f2994a',
     },
     text: {
-      primary: dark ? '#f3f4f6' : '#3c444e',
-      secondary: '#8f928b',
+      // Close to #3c444e while still using alpha
+      ...(!dark ? { primary: 'rgba(0, 0, 0, 0.75)' } : {}),
+      // 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()

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