updated dependencies

src/themes/Theme.js

@@ -1,24 +1,94 @@
-import { unstable_createMuiStrictModeTheme as createMuiTheme } from '@material-ui/core/styles';
+import { createTheme, responsiveFontSizes } from '@mui/material/styles';
 
 import overrides from './overrides';
 
+export const Black = '#000000';
 export const BlueGreen = '#004d40';
-export const Celadon = '#a5d6a7';
+export const BrandyPunch = '#ce8f28';
+export const Cadet = '#5A7881';
+export const Celeste = '#CDFFF9';
 export const Charcoal = '#37474f';
+export const ChartreuseTraditional = '#E4FF1A';
 export const Cultured = '#eceff1';
+export const DeepSpaceSparkle = '#335C67';
+export const AntiqueFuchsia = '#875C74';
+export const Eggplant = '#75485E';
+export const FruitSalad = '#509f60';
+export const GrannySmithApple = '#ADF6B1';
+export const IlluminatingEmerald = '#3E9276';
+export const PersianGreen = '#009688';
+export const RussianGreen = '#7B8E64';
+export const InternationalGoldenGateBridge = '#BB4430';
+export const MangoTango = '#F5853F';
+export const MiddleRedPurple = '#AF5D63';
+export const OuterSpaceCrayola = '#22363C';
+export const Platinum = '#E5E5E5';
+export const Pomegranate = '#f44336';
+export const Rosewood = '#5E0B15';
+export const Ruby = '#D81E5B';
+export const Spectra = '#315460';
+export const TeaGreen = '#CAE7B9';
+export const TucanRed = '#754043';
+export const TumbleWeed = '#CEA07E';
+export const TwilightLavander = '#754668';
+export const UARed = '#E01A4F';
+export const White = '#ffffff';
 
-// const BannerBlue =
-//   'linear-gradient(136.88deg, #2176A7 41.34%, #0AB5FE 102.25%)';
-
-export default createMuiTheme({
-  palette: {
-    common: {},
-    primary: { main: BlueGreen, contrastText: Celadon },
-    secondary: { main: Celadon, contrastText: BlueGreen },
-    contrastThreshold: 3,
-  },
-  typography: {
-    fontFamily: 'Chilanka',
-  },
-  overrides,
+// Main layout
+export const MainTheme = (mode) => ({
+	palette: {
+		mode,
+		...(mode === 'light'
+			? {
+					// palette values for light mode
+					primary: { main: DeepSpaceSparkle, contrastText: White },
+					secondary: { main: Cadet, contrastText: White },
+					divider: DeepSpaceSparkle,
+					background: {
+						default: White,
+						paper: DeepSpaceSparkle,
+					},
+					text: {
+						primary: Black,
+						secondary: White,
+					},
+			  }
+			: {
+					// palette values for dark mode
+					primary: { main: GrannySmithApple },
+					secondary: {
+						main: UARed,
+						contrastText: White,
+					},
+					divider: Cadet,
+					background: {
+						default: OuterSpaceCrayola,
+						paper: OuterSpaceCrayola,
+					},
+					text: {
+						primary: White,
+						secondary: White,
+					},
+			  }),
+		lightAccent: { main: MangoTango },
+		darkAccent: { main: PersianGreen },
+		contrastThreshold: 3,
+		tonalOffset: 0.2,
+	},
+	overrides,
 });
+
+// Landing page
+export const LandingWhite = (theme) =>
+	responsiveFontSizes(
+		createTheme({
+			typography: {
+				fontFamily: 'Yeon Sung',
+				transform: 'matrix(1, 0, 0, 1, 0, 0)',
+			},
+			palette: {
+				mode: theme.palette.mode,
+			},
+			overrides,
+		})
+	);

src/themes/index.js

@@ -1 +1 @@
-export { default } from './Theme';
+// export *from './Theme';

src/themes/overrides/MuiAlert.js

@@ -1,37 +1,39 @@
+import { Pomegranate, BrandyPunch, White, Spectra, FruitSalad } from '../Theme';
+
 const MuiAlert = {
-  root: {
-    fontSize: '16px',
-    borderRadius: 0,
-  },
-  standardError: {
-    color: '#A72121',
-    fontWeight: 300,
-    backgroundColor: '#FFA9A9',
-  },
-  standardWarning: {
-    color: 'rgba(0, 0, 0, 0.5)',
-    fontWeight: 300,
-    backgroundColor: '#FFDDA9',
-  },
-  standardInfo: {
-    color: '#2176A7',
-    fontWeight: 300,
-    backgroundColor: '#A9E5FF',
-  },
-  standardSuccess: {
-    color: '#059346',
-    fontWeight: 300,
-    backgroundColor: '#BFFFA9',
-  },
-  icon: {
-    display: 'flex',
-    opacity: 1,
-    fontsize: '16px',
-    marginLeft: '3rem',
-    marginRight: '1rem',
-  },
-  message: {
-    padding: '16px 0 8px 0',
-  },
+	root: {
+		fontSize: '16px',
+		borderRadius: 0,
+	},
+	standardError: {
+		color: White,
+		fontWeight: 300,
+		backgroundColor: Pomegranate,
+	},
+	standardWarning: {
+		color: White,
+		fontWeight: 300,
+		backgroundColor: BrandyPunch,
+	},
+	standardInfo: {
+		color: White,
+		fontWeight: 300,
+		backgroundColor: Spectra,
+	},
+	standardSuccess: {
+		color: White,
+		fontWeight: 300,
+		backgroundColor: FruitSalad,
+	},
+	icon: {
+		display: 'flex',
+		opacity: 1,
+		fontsize: '16px',
+		marginLeft: '3rem',
+		marginRight: '1rem',
+	},
+	message: {
+		padding: '16px 0 8px 0',
+	},
 };
 export default MuiAlert;

src/themes/overrides/MuiInputBase.js

@@ -1,13 +1,12 @@
-import Cultured from '../Theme';
-import Charcoal from '../Theme';
+import { Cultured, Charcoal } from '../Theme';
 
 const MuiInputBase = {
-  input: {
-    height: '1.3rem',
-    '&:disabled': {
-      background: Cultured,
-      color: Charcoal,
-    },
-  },
+	input: {
+		height: '1.3rem',
+		'&:disabled': {
+			background: Cultured,
+			color: Charcoal,
+		},
+	},
 };
 export default MuiInputBase;

src/themes/overrides/MuiMenuItem.js

@@ -1,12 +1,13 @@
-import Celadon from '../Theme';
+import { RussianGreen } from '../Theme';
+
 const MuiMenuItem = {
-  root: {
-    fontFamily: 'Poppins',
-    fontSize: '14px',
-    lineHeight: '19px',
-    textAlign: 'left',
-    color: Celadon,
-    padding: '.5rem',
-  },
+	root: {
+		// fontFamily: 'Poppins',
+		fontSize: '14px',
+		lineHeight: '19px',
+		textAlign: 'left',
+		color: RussianGreen,
+		padding: '.5rem',
+	},
 };
 export default MuiMenuItem;

src/themes/overrides/MuiOutlinedInput.js

@@ -1,56 +1,54 @@
-import Celadon from '../Theme'
-import Cultured from '../Theme'
-import Charcoal from '../Theme'
+import { RussianGreen, Cultured, Charcoal, White, Platinum } from '../Theme';
+
 const MuiOutlinedInput = {
-  root: {
-    position: 'relative',
-    '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
-      border: `1px solid ${Celadon}`,
+	root: {
+		position: 'relative',
+		'&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
+			border: `1px solid ${RussianGreen}`,
 
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        borderColor: Celadon,
-      },
-    },
-    // border focused
-    '&$focused $notchedOutline': {
-      borderColor: Celadon,
-    },
-    '&$disabled $notchedOutline': {
-      background: Cultured,
-      borderColor: '#E5E5E5',
-      opacity: 0.8,
-      color: Charcoal,
-    
-    },
-  },
-  //border before
-  notchedOutline: {
-    borderColor: Cultured,
-  },
-  input: {
-    background: '#FFFFFF',
-    padding: '.5rem',
-    borderRadius: '3px',
-    fontFamily: 'Poppins',
-    fontSize: ' 14px',
-    lineHeight: '19px',
-    color: Charcoal,
+			// Reset on touch devices, it doesn't add specificity
+			'@media (hover: none)': {
+				borderColor: RussianGreen,
+			},
+		},
+		// border focused
+		'&$focused $notchedOutline': {
+			borderColor: RussianGreen,
+		},
+		'&$disabled $notchedOutline': {
+			background: Cultured,
+			borderColor: Platinum,
+			opacity: 0.8,
+			color: Charcoal,
+		},
+	},
+	//border before
+	notchedOutline: {
+		borderColor: Cultured,
+	},
+	input: {
+		background: White,
+		padding: '.5rem',
+		borderRadius: '3px',
+		fontFamily: 'Poppins',
+		fontSize: ' 14px',
+		lineHeight: '19px',
+		color: Charcoal,
 
-    '&:disabled': {
-      background: Cultured,
-      opacity: 0.8,
-      color: Charcoal,
-    },
-    notchedOutline: {
-      border: 'transparent',
-    },
-  },
+		'&:disabled': {
+			background: Cultured,
+			opacity: 0.8,
+			color: Charcoal,
+		},
+		notchedOutline: {
+			border: 'transparent',
+		},
+	},
 
-  multiline: {
-    padding: '.5rem !important',
-    border: '0px',
-    margin: 0,
-  },
+	multiline: {
+		padding: '.5rem !important',
+		border: '0px',
+		margin: 0,
+	},
 };
 export default MuiOutlinedInput;

src/themes/overrides/MuiSelect.js

@@ -1,66 +1,63 @@
-import BlueGreen from '../Theme';
-import Celadon from '../Theme';
-import Cultured from '../Theme';
-import Charcoal from '../Theme';
+import { BlueGreen, RussianGreen, Cultured, Charcoal, White } from '../Theme';
 
 const MuiSelect = {
-  root: {
-    background: '#FFFFFF',
-    padding: '.5rem',
-    borderRadius: '3px',
-    fontFamily: 'Poppins',
-    fontSize: '14px',
-    lineHeight: '19px',
-    textAlign: 'left',
-    color: Charcoal,
-    border: `1px solid ${Cultured}`,
-    '&:focus': {
-      borderRadius: '3px',
-      borderColor: 'transparent',
-      background: '#FFFFFF',
-    },
-  },
-  select: {
-    minWidth: '5.5rem',
-    borderRadius: '3px',
-    border: `1px solid ${Celadon}`,
-    fontSize: '16px',
-    lineHeight: '19px',
-    '&:focus': {
-      borderRadius: '3px',
-      borderColor: Celadon,
-      background: '#FFFFFF',
-    },
-  },
+	root: {
+		background: White,
+		padding: '.5rem',
+		borderRadius: '3px',
+		fontFamily: 'Poppins',
+		fontSize: '14px',
+		lineHeight: '19px',
+		textAlign: 'left',
+		color: Charcoal,
+		border: `1px solid ${Cultured}`,
+		'&:focus': {
+			borderRadius: '3px',
+			borderColor: 'transparent',
+			background: White,
+		},
+	},
+	select: {
+		minWidth: '5.5rem',
+		borderRadius: '3px',
+		border: `1px solid ${RussianGreen}`,
+		fontSize: '16px',
+		lineHeight: '19px',
+		'&:focus': {
+			borderRadius: '3px',
+			borderColor: RussianGreen,
+			background: White,
+		},
+	},
 
-  selectMenu: {
-    background: '#FFFFFF',
-    color: Celadon,
-    '&:notchedOutline': {
-      borderColor: 'transparent !important',
-    },
-  },
+	selectMenu: {
+		background: White,
+		color: RussianGreen,
+		'&:notchedOutline': {
+			borderColor: 'transparent !important',
+		},
+	},
 
-  outlined: {
-    color: `${Charcoal} !important`,
-    borderColor: 'transparent',
-    fontSize: '14px',
-    lineHeight: '19px',
-    '&:hover ': {
-      borderColor: 'transparent',
-      outline: 'none',
-    },
-    '&:focus': {
-      background: '#FFFFFF',
-      borderColor: 'transparent',
-    },
-  },
-  iconOutlined: {
-    color: BlueGreen,
-  },
-  icon: {
-    color: Celadon,
-  },
+	outlined: {
+		color: `${Charcoal} !important`,
+		borderColor: 'transparent',
+		fontSize: '14px',
+		lineHeight: '19px',
+		'&:hover ': {
+			borderColor: 'transparent',
+			outline: 'none',
+		},
+		'&:focus': {
+			background: White,
+			borderColor: 'transparent',
+		},
+	},
+	iconOutlined: {
+		color: BlueGreen,
+	},
+	icon: {
+		color: RussianGreen,
+	},
 };
 
 export default MuiSelect;

src/themes/overrides/MuiSwitch.js

@@ -1,35 +1,34 @@
-import BlueGreen from '../Theme'
-import Cultured from '../Theme'
-import Charcoal from '../Theme'
-const MuiSwitch = {
-  root: {
-    overflow: 'visible',
-    width: '4rem',
-  },
-  switchBase: {
-    background: 'transparent',
-    '&$checked': {
-      transform: 'translateX(26px)',
-      '&$checked + $track': {
-        backgroundColor: Cultured,
-        border: 'none',
-        boxShadow: 'none',
-        width: 36,
-      },
-      '& $thumb': {
-        backgroundColor: BlueGreen,
-        boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.25)',
-      },
-    },
-  },
+import { BlueGreen, Cultured, Charcoal } from '../Theme';
 
-  thumb: {
-    backgroundColor: Charcoal,
-    boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.25)',
-    width: 20,
-    height: 20,
-  },
-  track: { backgroundColor: Cultured, width: 36 },
-  checked: {},
+const MuiSwitch = {
+	root: {
+		overflow: 'visible',
+		width: '4rem',
+	},
+	switchBase: {
+		background: 'transparent',
+		'&$checked': {
+			transform: 'translateX(26px)',
+			'&$checked + $track': {
+				backgroundColor: Cultured,
+				border: 'none',
+				boxShadow: 'none',
+				width: 36,
+			},
+			'& $thumb': {
+				backgroundColor: BlueGreen,
+				boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.25)',
+			},
+		},
+	},
+
+	thumb: {
+		backgroundColor: Charcoal,
+		boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.25)',
+		width: 20,
+		height: 20,
+	},
+	track: { backgroundColor: Cultured, width: 36 },
+	checked: {},
 };
 export default MuiSwitch;

src/themes/overrides/index.js

@@ -1,15 +1,15 @@
-import MuiAlert from './MuiAlert';
-import MuiInputBase from './MuiInputBase';
-import MuiMenuItem from './MuiMenuItem';
-import MuiOutlinedInput from './MuiOutlinedInput';
-import MuiSelect from './MuiSelect';
-import MuiSwitch from './MuiSwitch';
+// import MuiAlert from './MuiAlert';
+// import MuiInputBase from './MuiInputBase';
+// import MuiMenuItem from './MuiMenuItem';
+// import MuiOutlinedInput from './MuiOutlinedInput';
+// import MuiSelect from './MuiSelect';
+// import MuiSwitch from './MuiSwitch';
 
-export default {
-  MuiAlert,
-  MuiInputBase,
-  MuiMenuItem,
-  MuiOutlinedInput,
-  MuiSelect,
-  MuiSwitch,
-};
+// export default {
+//   MuiAlert,
+//   MuiInputBase,
+//   MuiMenuItem,
+//   MuiOutlinedInput,
+//   MuiSelect,
+//   MuiSwitch,
+// };