updated dependencies

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.eslintcache
 
 npm-debug.log*
 yarn-debug.log*

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

jsconfig.json

@@ -0,0 +1,6 @@
+{
+	"compilerOptions": {
+		"baseUrl": "src"
+	},
+	"include": ["src"]
+}

package.json

@@ -4,17 +4,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.2",
+    "@emotion/react": "^11.9.0",
-    "@material-ui/icons": "^4.11.2",
+    "@emotion/styled": "^11.8.1",
-    "@testing-library/jest-dom": "^5.11.4",
+    "@mui/icons-material": "^5.6.2",
-    "@testing-library/react": "^11.1.0",
+    "@mui/material": "^5.6.4",
-    "@testing-library/user-event": "^12.1.10",
+    "@mui/styles": "^5.6.2",
-    "react": "^17.0.1",
+    "@testing-library/jest-dom": "^5.16.4",
-    "react-dom": "^17.0.1",
+    "@testing-library/react": "^13.2.0",
-    "react-router-dom": "^5.2.0",
+    "@testing-library/user-event": "^14.1.1",
-    "react-scripts": "4.0.1",
+    "react": "^18.1.0",
-    "react-spring": "^8.0.27",
+    "react-dom": "^18.1.0",
-    "web-vitals": "^0.2.4"
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "^5.0.1",
+    "react-spring": "^9.4.4",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -43,6 +46,17 @@
     ]
   },
   "devDependencies": {
-    "gh-pages": "^3.1.0"
+    "gh-pages": "^3.2.3"
+  },
+  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/diaid83/me.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/diaid83/me/issues"
   }
 }

public/index.html

@@ -9,53 +9,18 @@
 		/>
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
 		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Chilanka&family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Nanum+Gothic+Coding:wght@400;700&family=Press+Start+2P&family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Yeon+Sung&display=swap"
+			rel="stylesheet"
+		/>
 		<link
 			rel="stylesheet"
 			href="https://fonts.googleapis.com/icon?family=Material+Icons"
 		/>
-    <!-- <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"> -->
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Chilanka&family=Lato&family=Nanum+Gothic&family=Roboto:wght@300;400;500;700&family=Yeon+Sung&display=swap"
-      rel="stylesheet"
-    />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
 		<title>DAD</title>
-    <!-- Hotjar Tracking Code for https://diaid83.github.io/me/ -->
-    <script>
-      (function (h, o, t, j, a, r) {
-        h.hj =
-          h.hj ||
-          function () {
-            (h.hj.q = h.hj.q || []).push(arguments);
-          };
-        h._hjSettings = { hjid: 2183013, hjsv: 6 };
-        a = o.getElementsByTagName('head')[0];
-        r = o.createElement('script');
-        r.async = 1;
-        r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
-        a.appendChild(r);
-      })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
-    </script>
 	</head>
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
+  "short_name": "DAD",
-  "name": "Create React App Sample",
+  "name": "Dan Andrei Dobos",
   "icons": [
     {
       "src": "favicon.ico",

src/App.js

@@ -1,25 +1,41 @@
-import React,{useState,} from 'react';
+import React, { useState, useMemo, createContext } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { ThemeProvider,responsiveFontSizes } from '@material-ui/core/styles';
-import theme from './themes';
-import Routes from './routes';
 
-export const ThemeContext = React.createContext()
+import {
+	responsiveFontSizes,
+	ThemeProvider,
+	createTheme,
+} from '@mui/material/styles';
+import { MainTheme } from './themes/Theme';
+import { CustomRoutes } from './routes/Routes';
 
+export const ColorModeContext = createContext({ toggleColorMode: () => {} });
 
 const App = () => {
-  const [darkMode, setDarkMode] = useState(true);
+	const [mode, setMode] = useState('dark');
+	const colorMode = useMemo(
+		() => ({
+			toggleColorMode: () => {
+				setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+			},
+		}),
+		[]
+	);
+
+	const theme = useMemo(
+		() => responsiveFontSizes(createTheme(MainTheme(mode))),
+		[mode]
+	);
 
-  const responsiveFontsTheme = responsiveFontSizes(theme);
 	return (
-    <ThemeContext.Provider value={{ darkMode, setDarkMode }}>
+		<ColorModeContext.Provider value={colorMode}>
-    <ThemeProvider theme={responsiveFontsTheme}>
+			<ThemeProvider theme={theme}>
 				<Router basename={process.env.PUBLIC_URL}>
-        <Routes />
+					<CustomRoutes />
 				</Router>
 			</ThemeProvider>
-    </ThemeContext.Provider>
+		</ColorModeContext.Provider>
 	);
-}
+};
 
 export default App;

src/common/hideOnScroll/HideOnScroll.jsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { useScrollTrigger, Slide } from '@material-ui/core';
-
-
-const HideOnScroll = ({children}) => {
-
-  const trigger = useScrollTrigger();
-
-  return (
-    <Slide appear={false} direction="down" in={!trigger}>
-      {children}
-    </Slide>
-  );
-};
-export default HideOnScroll;

src/index.js

@@ -1,13 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
 	<React.StrictMode>
 		<App />
-  </React.StrictMode>,
+	</React.StrictMode>
-  document.getElementById('root')
 );
 
 // If you want to start measuring performance in your app, pass a function

src/layouts/common/darkModeToogle/DarkModeToogle.jsx

@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+import { IconButton } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { ColorModeContext } from 'App';
+import WbSunnyOutlinedIcon from '@mui/icons-material/WbSunnyOutlined';
+import NightsStayOutlinedIcon from '@mui/icons-material/NightsStayOutlined';
+
+const DarkModeToogle = () => {
+	const theme = useTheme();
+	const colorMode = useContext(ColorModeContext);
+
+	return (
+		<IconButton disableRipple onClick={colorMode.toggleColorMode} sx={{ color: theme.palette.text.secondary }} >
+			{theme.palette.mode === 'dark' ? (
+				<WbSunnyOutlinedIcon />
+			) : (
+				<NightsStayOutlinedIcon />
+			)}
+		</IconButton>
+	);
+};
+
+export default DarkModeToogle;

src/layouts/common/fullScreenContainer/FullScreenContainer.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Container } from '@mui/material';
+
+const FullScreenContainer = (props) => {
+	const { children } = props;
+	// const theme = useTheme();
+	return (
+		<Container
+			maxWidth='lg'
+			sx={{
+				minHeight: 'calc(100vh - 24px )',
+				paddingTop: '4rem',
+				paddingBottom: '2rem',
+				flex: 1,
+				fallbacks: [
+					{ minHeight: '-moz-calc(100% - 24px)' },
+					{ minHeight: '-webkit-calc(100% - 24px)' },
+					{ minHeight: '-o-calc(100% - 24px)' },
+				],
+			}}>
+			{children}
+		</Container>
+	);
+};
+
+export default FullScreenContainer;

src/layouts/common/fullScreenContainer/index.js

@@ -0,0 +1 @@
+export { default } from './FullScreenContainer';

src/layouts/common/hideOnScroll/HideOnScroll.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useScrollTrigger, Slide } from '@mui/material';
+
+const HideOnScroll = (props) => {
+	const { children, window } = props;
+	const trigger = useScrollTrigger({
+		target: window ? window() : undefined,
+	});
+
+	return (
+		<Slide appear={false} direction='down' in={!trigger}>
+			{children}
+		</Slide>
+	);
+};
+
+export default HideOnScroll;

src/layouts/landing/LandingLayout.jsx

@@ -0,0 +1,29 @@
+import React, { useContext } from 'react';
+
+import { ThemeProvider } from '@mui/material/styles';
+
+import { ColorModeContext } from 'App';
+import { LandingWhite } from 'themes/Theme';
+import FullScreenContainer from 'layouts/common/fullScreenContainer';
+
+import Footer from './components/footer';
+import Header from './components/header';
+
+const LandingLayout = (props) => {
+	const { children } = props;
+
+	const colorMode = useContext(ColorModeContext);
+
+	return (
+		<ColorModeContext.Provider value={colorMode}>
+			<ThemeProvider theme={LandingWhite}>
+				<div id='back-to-top-anchor' />
+				<Header />
+				<FullScreenContainer>{children}</FullScreenContainer>
+				<Footer />
+			</ThemeProvider>
+		</ColorModeContext.Provider>
+	);
+};
+
+export default LandingLayout;

src/layouts/landing/components/footer/Footer.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import useScrollTrigger from '@mui/material/useScrollTrigger';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import { Grid, Grow, Box } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+
+
+function ScrollTop(props) {
+	const { children, window } = props;
+
+	const trigger = useScrollTrigger({
+		target: window ? window() : undefined,
+		disableHysteresis: true,
+		threshold: 100,
+	});
+
+	const handleClick = (event) => {
+		const anchor = (event.target.ownerDocument || document).querySelector(
+			'#back-to-top-anchor'
+		);
+
+		if (anchor) {
+			anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
+		}
+	};
+
+	return (
+		<Grow
+			in={trigger}
+			style={{ transformOrigin: '0 0 0' }}
+			{...(trigger ? { timeout: 1000 } : {})}>
+			<Box onClick={handleClick} role='presentation'>
+				{children}
+			</Box>
+		</Grow>
+	);
+}
+
+const Footer = (props) => {
+	const theme = useTheme();
+	return (
+		<Grid container justifyContent='center' alignItems='center' id='footer'>
+			<ScrollTop {...props} >
+				<KeyboardArrowUpIcon
+					sx={{
+						width: '5rem',
+						height: '5rem',
+						[theme.breakpoints.down('md')]: { width: '3rem', height: '3rem' },
+					}}
+				/>
+			</ScrollTop>
+		</Grid>
+	);
+};
+export default Footer;

src/layouts/landing/components/header/Header.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+
+import { Link } from 'react-router-dom';
+
+import {
+	AppBar,
+	Toolbar,
+	CssBaseline,
+	Typography,
+	Breadcrumbs,
+	Link as MaterialLink,
+	Grid,
+	IconButton,
+} from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import ThreeSixtyOutlinedIcon from '@mui/icons-material/ThreeSixtyOutlined';
+
+import DarkModeToogle from 'layouts/common/darkModeToogle';
+import HideOnScroll from 'layouts/common/hideOnScroll';
+
+const handleScrollDown = (event) => {
+	event.preventDefault();
+	const anchor = (event.target.ownerDocument || document).querySelector(
+		'#footer'
+	);
+
+	if (anchor) {
+		anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
+	}
+};
+
+const Header = () => {
+	const theme = useTheme();
+
+	return (
+		<>
+			<CssBaseline />
+			<HideOnScroll>
+				<AppBar
+					position='fixed'
+					sx={{
+						background: 'transparent',
+						zIndex: 1301,
+						[theme.breakpoints.down('lg')]: {
+							backgroundColor: theme.palette.background.default,
+						},
+					}}
+					elevation={0}>
+					<Toolbar>
+						<Grid container justifyContent='space-between' alignItems='center'>
+							<Grid item>
+								<Breadcrumbs aria-label='breadcrumb'>
+									<Typography
+										variant='h5'
+										sx={{
+											textTransform: 'uppercase',
+											letterSpacing: '.3rem',
+										}}>
+										Dan Dobos
+									</Typography>
+
+									<MaterialLink
+										color='textPrimary'
+										to='#about'
+										style={{ cursor: 'pointer' }}
+										onClick={handleScrollDown}>
+										About
+									</MaterialLink>
+								</Breadcrumbs>
+							</Grid>
+							<Grid item>
+								<Grid container alignItems='center'>
+									<Link to='/projects'>
+										<IconButton disableRipple sx={{ mr: 1 }}>
+											<ThreeSixtyOutlinedIcon />
+										</IconButton>
+									</Link>
+									<DarkModeToogle />
+								</Grid>
+							</Grid>
+						</Grid>
+					</Toolbar>
+				</AppBar>
+			</HideOnScroll>
+		</>
+	);
+};
+export default Header;

src/layouts/landing/index.js

@@ -0,0 +1 @@
+export {default} from './LandingLayout.jsx'

src/layouts/main/Main.jsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { Container } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
-import Header from './components/header';
-import Footer from './components/footer';
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    minHeight: 'calc(100vh-128px)',
-    paddingTop: '2rem',
-    paddingBottom: '2rem',
-    // flex: 1,
-    fallbacks: [
-      { minHeight: '-moz-calc(100% - 128px)' },
-      { minHeight: '-webkit-calc(100% - 128px)' },
-      { minHeight: '-o-calc(100% - 128px)' },
-    ],
-  },
-}));
-
-const Main = (props) => {
-  const { children } = props;
-  const classes = useStyles();
-
-  return (
-    <>
-      <div
-        style={{
-          minHeight: '100vh',
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
-        <Header />
-        <Container className={classes.container}>{children}</Container>
-        <Footer />
-      </div>
-    </>
-  );
-};
-
-export default Main;

src/layouts/main/MainLayout.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import Header from './components/header';
+import Footer from './components/footer';
+import FullScreenContainer from 'layouts/common/fullScreenContainer';
+
+const MainLayout = (props) => {
+	const { children } = props;
+
+	return (
+		<div
+			sx={{
+				minHeight: '100vh',
+				display: 'flex',
+				flexDirection: 'column',
+			}}>
+			<Header />
+			<FullScreenContainer>{children}</FullScreenContainer>
+			<Footer />
+		</div>
+	);
+};
+
+export default MainLayout;

src/layouts/main/components/footer/Footer.jsx

@@ -1,19 +1,26 @@
 import React from 'react';
-import {Grid, Typography } from '@material-ui/core';
+import { Grid, Typography } from '@mui/material';
 
 const Footer = () => {
+	const getCurrentYear = () => {
+		return new Date().getFullYear();
+	};
+
 	return (
 		<Grid
 			container
-      style={{
+			sx={{
 				marginTop: 'auto',
 				zIndex: 1300,
+				minHeight: '24px',
 			}}
-      justify="center"
+			justifyContent='center'>
-    >
 			<Grid item>
-        <Typography inline="true" variant="body1">
+				<Typography
-          Dan Dobos &copy; 2021 Build with passion
+					inline='true'
+					variant='body1'
+					fontFamily='Nanum Gothic Coding'>
+					Dan Dobos &copy; {getCurrentYear()} Build with passion
 				</Typography>
 			</Grid>
 		</Grid>

src/layouts/main/components/header/Header.jsx

@@ -1,30 +1,25 @@
 import React from 'react';
 
-import { AppBar, Toolbar, CssBaseline } from '@material-ui/core';
+import { AppBar, Toolbar, CssBaseline, Box } from '@mui/material';
-import { makeStyles } from '@material-ui/styles';
+
-import HideOnScroll from '../../../../common/hideOnScroll'
+import DarkModeToogle from 'layouts/common/darkModeToogle';
+import HideOnScroll from 'layouts/common/hideOnScroll';
 import Navigation from './navigation';
 
-const useStyles = makeStyles((theme) => ({
-  appBar: {
-    position: 'fixed',
-    zIndex: 1301,
-  },
-}));
-
 const Header = () => {
-  const classes = useStyles();
 	return (
 		<>
 			<CssBaseline />
 			<HideOnScroll>
-        <AppBar className={classes.appBar} elevation={0}>
+				<AppBar sx={{ position: 'fixed', zIndex: 1301 }} elevation={0}>
 					<Toolbar>
 						<Navigation />
+						<Box sx={{ display: { sm: 'block', xs: 'none' } }}>
+							<DarkModeToogle />
+						</Box>
 					</Toolbar>
 				</AppBar>
 			</HideOnScroll>
-      <Toolbar />
 		</>
 	);
 };

src/layouts/main/components/header/navigation/Navigation.jsx

@@ -2,83 +2,40 @@ import React, { useState, useEffect, createRef, useMemo, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import {
 	Container,
-  Hidden,
 	Tabs,
 	Tab,
 	useMediaQuery,
 	IconButton,
 	SwipeableDrawer,
+	Paper,
 	ListItem,
 	ListItemText,
 	List,
-} from '@material-ui/core';
+} from '@mui/material';
-import MenuIcon from '@material-ui/icons/Menu';
+import { useTheme } from '@mui/material/styles';
-import MenuOpenIcon from '@material-ui/icons/MenuOpen';
+import MenuIcon from '@mui/icons-material/Menu';
-import { makeStyles, useTheme } from '@material-ui/styles';
+import MenuOpenIcon from '@mui/icons-material/MenuOpen';
 
-const useStyles = makeStyles((theme) => ({
+import DarkModeToogle from 'layouts/common/darkModeToogle';
-  toolbar: theme.mixins.toolbar,
 
-  drawerIconContainer: {
+const Navigation = () => {
-    alignSelf: 'center',
-    '&:hover': { backgroundColor: 'transparent' },
-    [theme.breakpoints.down('md')]: { padding: 0 },
-  },
-  drawerIcon: {
-    height: '40px',
-    width: '40px',
-    color: theme.palette.secondary.main,
-  },
-  drawer: {
-    minWidth: '60vw',
-    backgroundColor: theme.palette.secondary.main,
-  },
-  listitems: {
-    padding: '1.5rem 2rem ',
-    color: theme.palette.primary.main,
-    width: '100%',
-    '&:hover': {
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.secondary.main,
-    },
-  },
-  listText: {
-    alignItems: 'flex-start',
-    fontSize: '1.5rem',
-    textTransform: 'capitalize',
-  },
-  selected: {
-    '&.Mui-selected': {
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.secondary.main,
-    },
-  },
-}));
-
-const Navigation = (props) => {
-  const classes = useStyles();
 	const theme = useTheme();
 
 	const matches = useMediaQuery(theme.breakpoints.down('sm'));
-  const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
+	const iOS =
+		typeof navigator !== 'undefined' &&
+		/iPad|iPhone|iPod/.test(navigator.userAgent);
+
 	const [value, setValue] = useState(1);
 	const [openDrawer, setOpenDrawer] = useState(false);
 
 	const tabsActions = useRef(null);
-  
+	const wrapper = createRef();
 
 	const handleTabsChange = (e, newValue) => {
 		setValue(newValue);
 	};
 
-  const open = () => {
-    setOpenDrawer(true);
-  };
-  const close = () => {
-    setOpenDrawer(false);
-  };
-  const wrapper = createRef();
-
 	const routes = useMemo(
 		() => [
 			{
@@ -97,8 +54,8 @@ const Navigation = (props) => {
 				activeIndex: 2,
 			},
 			{
-        name: 'Snippets',
+				name: 'Best Practices',
-        link: '/snippets',
+				link: '/best-practices',
 				activeIndex: 3,
 			},
 			{
@@ -116,58 +73,80 @@ const Navigation = (props) => {
 				case `${route.link}`:
 					if (value !== route.activeIndex) {
 						setValue(route.activeIndex);
+						setOpenDrawer(false);
 					}
 					break;
 				default:
 					return false;
 			}
 		});
-  }, [value, routes]);
+	}, [value, openDrawer, routes]);
 
 	return (
 		<Container ref={wrapper}>
-      <Hidden mdUp>
+			<Paper
+				elevation={0}
+				sx={{
+					display: { sm: 'none', xs: 'flex' },
+					justifyContent: 'space-between',
+					alignItems: 'center',
+					backgroundColor: 'inherit',
+					color: theme.palette.secondary.contrastText,
+					boxShadow: 'none',
+				}}>
 				<IconButton
+					size='large'
 					onClick={() => setOpenDrawer(!openDrawer)}
 					disableRipple
-          className={classes.drawerIconContainer}
+					color='inherit'>
-        >
 					{openDrawer ? (
-            <MenuOpenIcon className={classes.drawerIcon} />
+						<MenuOpenIcon fontSize='inherit' />
 					) : (
-            <MenuIcon className={classes.drawerIcon} />
+						<MenuIcon fontSize='inherit' />
 					)}
 				</IconButton>
-      </Hidden>
+				<DarkModeToogle style={{ alignSelf: 'right', color: 'inherit' }} />
+			</Paper>
 
 			{matches ? (
 				<SwipeableDrawer
 					disableBackdropTransition={!iOS}
 					disableDiscovery={iOS}
+					disableSwipeToOpen={false}
 					open={openDrawer}
-          onOpen={open}
+					onOpen={() => setOpenDrawer(true)}
-          onClose={close}
+					onClose={() => setOpenDrawer(false)}
-          classes={{ paper: classes.drawer }}
+					sx={{
-        >
+						backgroundColor: 'transparent',
-          <div className={classes.toolbar} />
+					}}>
-
+					<List sx={{ paddingTop: '4rem' }}>
-          <List disablePadding>
 						{routes.map((route) => (
 							<ListItem
-                className={classes.listitems}
+								sx={{
+									padding: '1.5rem 2rem ',
+									color: theme.palette.text.secondary,
+									width: '100%',
+									'&.Mui-selected': {
+										backgroundColor: theme.palette.background.paper,
+									},
+								}}
 								key={`${route}${route.activeIndex}`}
 								button
 								component={Link}
 								to={route.link}
 								value={route.activeIndex}
 								selected={value === route.activeIndex}
-                classes={{ selected: classes.selected }}
 								onClick={() => {
 									setValue(route.activeIndex);
 									setOpenDrawer(false);
-                }}
+								}}>
-              >
+								<ListItemText
-                <ListItemText disableTypography className={classes.listText}>
+									disableTypography
+									sx={{
+										alignItems: 'flex-start',
+										fontSize: '1.2rem',
+										textTransform: 'capitalize',
+									}}>
 									{route.name}
 								</ListItemText>
 							</ListItem>
@@ -175,23 +154,39 @@ const Navigation = (props) => {
 					</List>
 				</SwipeableDrawer>
 			) : (
-        <Hidden smDown>
+				<Paper
+					elevation={0}
+					sx={{
+						display: { sm: 'block', xs: 'none' },
+					}}>
 					<Tabs
 						action={tabsActions}
 						value={value}
 						onChange={handleTabsChange}
 						centered
-          >
+						TabIndicatorProps={{
+							style: {
+								background: theme.palette.secondary.contrastText,
+								height: '3px',
+							},
+						}}>
 						{routes.map((route) => (
 							<Tab
+								disableRipple
 								key={`${route.activeIndex}`}
 								label={route.name}
 								component={Link}
 								to={route.link}
+								sx={{
+									fontSize: '1.2rem',
+									'&.Mui-selected': {
+										color: theme.palette.secondary.contrastText,
+									},
+								}}
 							/>
 						))}
 					</Tabs>
-        </Hidden>
+				</Paper>
 			)}
 		</Container>
 	);

src/layouts/main/index.js

@@ -1 +1 @@
-export { default } from './Main';
+export { default } from './MainLayout';

src/layouts/white/White.jsx

@@ -1,52 +0,0 @@
-import React, { useContext } from 'react';
-import { Container } from '@material-ui/core';
-import {
-  ThemeProvider,
-  createMuiTheme,
-  makeStyles,
-} from '@material-ui/core/styles';
-import {ThemeContext} from '../../App'
-
-import Footer from './components/footer';
-import Header from './components/header';
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    minHeight: '100vh',
-    paddingTop: '2rem',
-    // paddingBottom: '2rem',
-    fallbacks: [
-      { minHeight: '-moz-calc(100% - 128px)' },
-      { minHeight: '-webkit-calc(100% - 128px)' },
-      { minHeight: '-o-calc(100% - 128px)' },
-    ],
-  },
-}));
-
-
-const White = (props) => {
-  const { children } = props;
-  const classes = useStyles();
-  const { darkMode} = useContext(ThemeContext);
-
-  let theme = createMuiTheme({
-    typography: {
-      fontFamily: 'Yeon Sung',
-      transform: 'matrix(1, 0, 0, 1, 0, 0)',
-
-    },
-    palette: {
-      type: darkMode ? 'dark' : 'light',
-    },
-  });
-  return (
-    <ThemeProvider theme={theme}>
-      <div id="back-to-top-anchor" />
-      <Header />
-      <Container className={classes.container}>{children}</Container>
-      <Footer />
-    </ThemeProvider>
-  );
-};
-
-export default White;

src/layouts/white/components/footer/Footer.jsx

@@ -1,52 +0,0 @@
-import React from 'react';
-
-import { makeStyles } from '@material-ui/core/styles';
-import useScrollTrigger from '@material-ui/core/useScrollTrigger';
-import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
-import { Grid, Zoom } from '@material-ui/core';
-
-const useStyles = makeStyles((theme) => ({
-  icon: {
-    width: '5rem',
-    height: '5rem',
-    [theme.breakpoints.down('md')]: { width: '3rem', height: '3rem' },
-  },
-}));
-
-function ScrollTop(props) {
-  const { children, window } = props;
-
-  const trigger = useScrollTrigger({
-    target: document.querySelector('#footer') ? window : undefined,
-  });
-
-  const handleClick = (event) => {
-    const anchor = (event.target.ownerDocument || document).querySelector(
-      '#back-to-top-anchor'
-    );
-
-    if (anchor) {
-      anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }
-  };
-
-  return (
-    <Zoom in={trigger}>
-      <div onClick={handleClick} role="presentation">
-        {children}
-      </div>
-    </Zoom>
-  );
-}
-
-const Footer = (props) => {
-  const classes = useStyles();
-  return (
-    <Grid container justify="center" alignItems="center" id="footer">
-      <ScrollTop {...props}>
-        <KeyboardArrowUpIcon className={classes.icon} />
-      </ScrollTop>
-    </Grid>
-  );
-};
-export default Footer;

src/layouts/white/components/header/Header.jsx

@@ -1,93 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import {
-  AppBar,
-  Toolbar,
-  CssBaseline,
-  Typography,
-  Breadcrumbs,
-  Link as MaterialLink,
-  Grid,
-  IconButton
-} from '@material-ui/core';
-import DarkModeToogle from './darkModeToogle'
-import { makeStyles } from '@material-ui/styles';
-import HideOnScroll from '../../../../common/hideOnScroll'
-import ThreeSixtyOutlinedIcon from '@material-ui/icons/ThreeSixtyOutlined';
-
-
-const useStyles = makeStyles((theme) => ({
-  appBar: {
-    position: 'fixed',
-    zIndex: 1301,
-    background: 'transparent',
-    [theme.breakpoints.down('lg')]: {
-      backgroundColor: theme.palette.background.default,
-    },
-  },
-  name: {
-    textTransform: 'uppercase',
-    letterSpacing: '.5rem',
-  }
-  
-
-}));
-const handleScrollDown = (event) => {
-  event.preventDefault();
-  const anchor = (event.target.ownerDocument || document).querySelector(
-    '#footer'
-  );
-
-  if (anchor) {
-    anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
-  }
-};
-
-const Header = () => {
-  const classes = useStyles();
-
-  return (
-    <>
-      <CssBaseline />
-      <HideOnScroll>
-      <AppBar className={classes.appBar} elevation={0}>
-        <Toolbar>
-          <Grid container justify="space-between">
-            <Grid item>
-              <Breadcrumbs aria-label="breadcrumb">
-                <Typography
-                  color="textPrimary"
-                  variant="h5"
-                  className={classes.name}
-                >
-                  Dan Dobos
-                </Typography>
-
-                <MaterialLink
-                  color="textPrimary"
-                  to="#about"
-                  onClick={handleScrollDown}
-                >
-                  About
-                </MaterialLink>
-              </Breadcrumbs>
-            </Grid>
-            <Grid item >
-              <Grid container alignItems="center">
-                <DarkModeToogle/>
-                <Link to="/projects">
-                  <IconButton disableRipple>
-                    <ThreeSixtyOutlinedIcon  />
-                  </IconButton>
-                </Link>
-              </Grid>
-            </Grid>
-          </Grid>
-        </Toolbar>
-      </AppBar>
-      </HideOnScroll>
-      <Toolbar />
-    </>
-  );
-};
-export default Header;

src/layouts/white/components/header/darkModeToogle/DarkModeToogle.jsx

@@ -1,24 +0,0 @@
-import React,{useContext} from 'react';
-import {IconButton} from '@material-ui/core'
-import {ThemeContext} from '../../../../../App'
-import WbSunnyOutlinedIcon from '@material-ui/icons/WbSunnyOutlined';
-import NightsStayOutlinedIcon from '@material-ui/icons/NightsStayOutlined';
-
-const DarkModeToogle = () => {
-
-  const { darkMode, setDarkMode } = useContext(ThemeContext);
-  const icon = darkMode ?
-  <WbSunnyOutlinedIcon /> : <NightsStayOutlinedIcon />
-
-  return (
-    <IconButton
-        disableRipple
-        onClick={() => setDarkMode(!darkMode)}
-  >
-    {icon}
-  </IconButton>
-
-  );
-};
-
-export default DarkModeToogle;

src/layouts/white/index.js

@@ -1 +0,0 @@
-export {default} from './White.jsx'

src/pages/about/About.jsx

@@ -1,86 +1,69 @@
 import React from 'react';
-import { Container, Grid, Typography, Link } from '@material-ui/core';
+import { Container, Grid, Typography, Link } from '@mui/material';
-import { makeStyles } from '@material-ui/core/styles';
+import { useTheme } from '@mui/material/styles';
-const useStyles = makeStyles((theme) => ({
-  // root: {
-  //   display: 'flex',
-  //   flexDirection: 'column',
-  //   justifyContent: 'flex-end',
-  //   height: 'auto',
-  // },
-  container: {
-    marginTop: 'auto',
-    // height:'100vh'
-    display: 'flex',
-    // position: 'absolute',
-  },
-  name: {
-    textTransform: 'uppercase',
-    letterSpacing: '2rem',
-    [theme.breakpoints.down('md')]: {
-      letterSpacing: '1rem',
-      fontSize: '1.4rem',
-      fontWeight: 'bold',
-    },
-  },
-}));
 
 const About = () => {
-  const classes = useStyles();
+	const theme = useTheme();
 
 	return (
-    <Container id="about">
+		<Container id='about'>
-      <Grid container direction="row" alignItems="stretch" justify="flex-end">
+			<Grid
+				container
+				direction='row'
+				alignItems='stretch'
+				justifyContent='flex-end'>
 				<div
 					style={{
-            height: '70vh',
+						minHeight: '70vh',
 						display: 'flex',
 						alignItems: 'flex-end',
-          }}
+					}}>
-        >
 					<Grid
-            className={classes.container}
 						container
-            direction="column"
+						direction='column'
-            alignItems="flex-end"
+						alignItems='flex-end'
-            justify="flex-end"
+						justifyContent='flex-end'
-            spacing={3}
+						spacing={3}>
-          >
 						<Grid item>
-              <Typography variant="h4" align="right" inline="true">
+							<Typography variant='h4' align='right' inline='true'>
 								Software Developer
 							</Typography>
 						</Grid>
 						<Grid item>
 							<Typography
-                variant="h1"
+								variant='h1'
 								gutterBottom
-                align="right"
+								inline='true'
-                inline="true"
+								sx={{
-                className={classes.name}
+									fontFamily: 'Chilanka',
-              >
+									textTransform: 'uppercase',
+									letterSpacing: '2rem',
+									textAlign: 'left',
+									[theme.breakpoints.down('md')]: {
+										textAlign: 'right',
+										letterSpacing: '1rem',
+									},
+								}}>
 								Dan Dobos
 							</Typography>
 						</Grid>
 
 						<Grid item>
-              <Typography align="right" inline="true" variant="h6">
+							<Typography align='right' inline='true' variant='h6'>
 								Characterized by the desire of understanding and implementing
 								technological innovations.
 							</Typography>
 						</Grid>
 						
-            {/* <Grid item>Contact</Grid> */}
 						<Grid item>
-              <Typography align="right" inline="true">
+							<Typography align='right' inline='true'>
 								Contact
 							</Typography>
 							<Link
-                variant="h6"
+								variant='h6'
-                href="mailto:danandreidobos@gmail.com"
+								href='mailto:danandreidobos@gmail.com'
-                target="_blank"
+								target='_blank'
-                color="inherit"
+								color='inherit'>
-              >
 								danandreidobos@gmail.com
 							</Link>
 						</Grid>

src/pages/bestPractices/BestPractices.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const BestPractices = () => {
+	return (
+		<div sx={{ minHeight: 'calc(100vh-128px)' }}>Best Practices ...in progress</div>
+	);
+};
+
+export default BestPractices;

src/pages/bestPractices/index.js

@@ -0,0 +1 @@
+export {default} from './BestPractices'

src/pages/home/Home.jsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { Grid, Typography, Divider } from '@material-ui/core';
-import About from '../about';
-import Games from '../games';
-import Snippets from '../snippets';
-import Projects from '../projects';
-
-const Home = () => {
-  return (
-    <Grid container direction="row" alignItems="stretch" spacing={3}>
-      <Grid item container direction="column">
-        <Grid item>
-          <Typography variant="h3">Projects</Typography>
-          <Divider variant="inset"/>
-        </Grid>
-        <Grid item>
-          <Projects />
-        </Grid>
-      </Grid>
-      <Grid item container direction="column">
-        <Grid item>
-          <Typography variant="h3">Games</Typography>
-          <Divider variant="inset"/>
-        </Grid>
-        <Grid item>
-          <Games />
-        </Grid>
-      </Grid>
-      <Grid item container direction="column">
-        <Grid item>
-          <Typography variant="h3">Snippets</Typography>
-          <Divider variant="inset"/>
-        </Grid>
-        <Grid item>
-          <Snippets />
-        </Grid>
-      </Grid>
-
-      <Grid item container justify="flex-end">
-        <Grid item>
-        <About /></Grid>
-      </Grid>
-    </Grid>
-  );
-};
-
-export default Home;

src/pages/home/index.js

@@ -1 +0,0 @@
-export { default } from './Home';

src/pages/landing/Landing.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Grid, Typography, Divider } from '@mui/material';
+import About from '../about';
+import Games from '../games';
+import BestPractices from '../bestPractices';
+import Projects from '../projects';
+
+const Home = () => {
+	return (
+		<Grid container direction='row' alignItems='stretch' spacing={3}>
+			<Grid item container direction='column'>
+				<Grid item>
+					<Typography variant='h3'>Projects</Typography>
+					<Divider variant='inset' />
+				</Grid>
+				<Grid item>
+					<Projects />
+				</Grid>
+			</Grid>
+			<Grid item container direction='column'>
+				<Grid item>
+					<Typography variant='h3'>Games</Typography>
+					<Divider variant='inset' />
+				</Grid>
+				<Grid item>
+					<Games />
+				</Grid>
+			</Grid>
+			<Grid item container direction='column'>
+				<Grid item>
+					<Typography variant='h3'>Best Practices</Typography>
+					<Divider variant='inset' />
+				</Grid>
+				<Grid item>
+					<BestPractices />
+				</Grid>
+			</Grid>
+
+			<Grid item container justifyContent='flex-end'>
+				<Grid item>
+					<About />
+				</Grid>
+			</Grid>
+		</Grid>
+	);
+};
+
+export default Home;

src/pages/landing/index.js

@@ -0,0 +1 @@
+export { default } from './Landing';

src/pages/projects/Projects.jsx

@@ -1,12 +1,22 @@
-import React from 'react'
+import React from 'react';
+import Box from '@mui/material/Box';
 
 const Projects = () => {
 	return (
-    <div style={{ minHeight: 'calc(100vh-128px)' }}>
+		<div >
 			Projects ...in progress
-      
+			<Box>
-    </div>
+				{[...new Array(52)]
+					.map(
+						() => `Cras mattis consectetur purus sit amet fermentum.
+Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`
 					)
-}
+					.join('\n')}
+			</Box>
+		</div>
+	);
+};
 
-export default Projects
+export default Projects;

src/pages/snippets/Snippets.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-const Snippets = () => {
-  return (
-    <div style={{ minHeight: 'calc(100vh-128px)' }}>
-      Snippets ...in progress
-    </div>
-  );
-};
-
-export default Snippets;

src/pages/snippets/index.js

@@ -1 +0,0 @@
-export {default} from './Snippets'

src/routes/Routes.js

@@ -1,44 +1,70 @@
 import React, { Suspense, lazy } from 'react';
-import { Switch } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from '@mui/material/CircularProgress';
 import ErrorBoundary from './components/errorBoundary';
-import CustomRoute from './components/customRoute';
-import Main from '../layouts/main';
-import White from '../layouts/white';
 
-// const Main = lazy(() => import('layouts/main'));
+import MainLayout from '../layouts/main';
+import LandingLayout from '../layouts/landing';
 
-const Home = lazy(() => import('../pages/home'));
+const Home = lazy(() => import('../pages/landing'));
 const About = lazy(() => import('../pages/about'));
 const Projects = lazy(() => import('../pages/projects'));
 const Games = lazy(() => import('../pages/games'));
-const Snippets = lazy(() => import('../pages/snippets'));
+const BestPractices = lazy(() => import('../pages/bestPractices'));
-
-const CustomRoutes = () => {
 
+export const CustomRoutes = () => {
 	return (
-    <Suspense fallback={<CircularProgress color="secondary" />}>
+		<Suspense fallback={<CircularProgress color='secondary' />}>
 			<ErrorBoundary>
-        <Switch>
+				<Routes>
-          <CustomRoute exact path="/" component={Home} layout={White} />
+					<Route
-          <CustomRoute exact path="/about" component={About} layout={Main} />
+						path='/'
-          <CustomRoute
+						element={
-            exact
+							<LandingLayout>
-            path="/projects"
+								<Home />
-            component={Projects}
+							</LandingLayout>
-            layout={Main}
+						}
 					/>
-          <CustomRoute exact path="/games" component={Games} layout={Main} />
+
-          <CustomRoute
+					<Route
-            exact
+						path='about'
-            path="/snippets"
+						element={
-            component={Snippets}
+							<MainLayout>
-            layout={Main}
+								<About />
+							</MainLayout>
+						}
 					/>
-        </Switch>
+
+					<Route
+						path='projects'
+						element={
+							<MainLayout>
+								<Projects />
+							</MainLayout>
+						}
+					/>
+
+					<Route
+						path='games'
+						element={
+							<MainLayout>
+								<Games />
+							</MainLayout>
+						}
+					/>
+
+					<Route
+						path='best-practices'
+						element={
+							<MainLayout>
+								<BestPractices />
+							</MainLayout>
+						}
+					/>
+				</Routes>
 			</ErrorBoundary>
 		</Suspense>
 	);
 };
 
-export default CustomRoutes;
+// export default CustomRoutes;

src/routes/components/customRoute/CustomRoute.jsx

@@ -1,18 +1,12 @@
-import React from 'react';
+// import React from 'react';
-import { Route } from 'react-router-dom';
+// import { Route } from 'react-router-dom';
 
-const CustomRoute = ({ layout: Layout, component: Component }) => {
+// const Layout = ({ layout: Layout, component: Component }) => {
-  return (
+// 	return (
-    <Route
+// 		<Layout>
-      render={(matchProps) => {
+// 			<Component />
-        return (
+// 		</Layout>
-          <Layout>
+// 	);
-            <Component {...matchProps} />
+// };
-          </Layout>
-        );
-      }}
-    />
-  );
-};
 
-export default CustomRoute;
+// export default Layout;

src/routes/components/errorBoundary/ErrorBoundary.jsx

@@ -21,7 +21,7 @@ class ErrorBoundary extends Component {
 			return (
 				<div>
 					<h2>Something went wrong.</h2>
-          <details style={{ whiteSpace: 'pre-wrap' }}>
+					<details sx={{ whiteSpace: 'pre-wrap' }}>
 						{this.state.error && this.state.error.toString()}
 						<br />
 						{this.state.errorInfo.componentStack}

src/routes/index.js

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

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 =
+// Main layout
-//   'linear-gradient(136.88deg, #2176A7 41.34%, #0AB5FE 102.25%)';
+export const MainTheme = (mode) => ({
-
-export default createMuiTheme({
 	palette: {
-    common: {},
+		mode,
-    primary: { main: BlueGreen, contrastText: Celadon },
+		...(mode === 'light'
-    secondary: { main: Celadon, contrastText: BlueGreen },
+			? {
-    contrastThreshold: 3,
+					// palette values for light mode
+					primary: { main: DeepSpaceSparkle, contrastText: White },
+					secondary: { main: Cadet, contrastText: White },
+					divider: DeepSpaceSparkle,
+					background: {
+						default: White,
+						paper: DeepSpaceSparkle,
 					},
-  typography: {
+					text: {
-    fontFamily: 'Chilanka',
+						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,27 +1,29 @@
+import { Pomegranate, BrandyPunch, White, Spectra, FruitSalad } from '../Theme';
+
 const MuiAlert = {
 	root: {
 		fontSize: '16px',
 		borderRadius: 0,
 	},
 	standardError: {
-    color: '#A72121',
+		color: White,
 		fontWeight: 300,
-    backgroundColor: '#FFA9A9',
+		backgroundColor: Pomegranate,
 	},
 	standardWarning: {
-    color: 'rgba(0, 0, 0, 0.5)',
+		color: White,
 		fontWeight: 300,
-    backgroundColor: '#FFDDA9',
+		backgroundColor: BrandyPunch,
 	},
 	standardInfo: {
-    color: '#2176A7',
+		color: White,
 		fontWeight: 300,
-    backgroundColor: '#A9E5FF',
+		backgroundColor: Spectra,
 	},
 	standardSuccess: {
-    color: '#059346',
+		color: White,
 		fontWeight: 300,
-    backgroundColor: '#BFFFA9',
+		backgroundColor: FruitSalad,
 	},
 	icon: {
 		display: 'flex',

src/themes/overrides/MuiInputBase.js

@@ -1,5 +1,4 @@
-import Cultured from '../Theme';
+import { Cultured, Charcoal } from '../Theme';
-import Charcoal from '../Theme';
 
 const MuiInputBase = {
 	input: {

src/themes/overrides/MuiMenuItem.js

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

src/themes/overrides/MuiOutlinedInput.js

@@ -1,27 +1,25 @@
-import Celadon from '../Theme'
+import { RussianGreen, Cultured, Charcoal, White, Platinum } from '../Theme';
-import Cultured from '../Theme'
+
-import Charcoal from '../Theme'
 const MuiOutlinedInput = {
 	root: {
 		position: 'relative',
 		'&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
-      border: `1px solid ${Celadon}`,
+			border: `1px solid ${RussianGreen}`,
 
 			// Reset on touch devices, it doesn't add specificity
 			'@media (hover: none)': {
-        borderColor: Celadon,
+				borderColor: RussianGreen,
 			},
 		},
 		// border focused
 		'&$focused $notchedOutline': {
-      borderColor: Celadon,
+			borderColor: RussianGreen,
 		},
 		'&$disabled $notchedOutline': {
 			background: Cultured,
-      borderColor: '#E5E5E5',
+			borderColor: Platinum,
 			opacity: 0.8,
 			color: Charcoal,
-    
 		},
 	},
 	//border before
@@ -29,7 +27,7 @@ const MuiOutlinedInput = {
 		borderColor: Cultured,
 	},
 	input: {
-    background: '#FFFFFF',
+		background: White,
 		padding: '.5rem',
 		borderRadius: '3px',
 		fontFamily: 'Poppins',

src/themes/overrides/MuiSelect.js

@@ -1,11 +1,8 @@
-import BlueGreen from '../Theme';
+import { BlueGreen, RussianGreen, Cultured, Charcoal, White } from '../Theme';
-import Celadon from '../Theme';
-import Cultured from '../Theme';
-import Charcoal from '../Theme';
 
 const MuiSelect = {
 	root: {
-    background: '#FFFFFF',
+		background: White,
 		padding: '.5rem',
 		borderRadius: '3px',
 		fontFamily: 'Poppins',
@@ -17,25 +14,25 @@ const MuiSelect = {
 		'&:focus': {
 			borderRadius: '3px',
 			borderColor: 'transparent',
-      background: '#FFFFFF',
+			background: White,
 		},
 	},
 	select: {
 		minWidth: '5.5rem',
 		borderRadius: '3px',
-    border: `1px solid ${Celadon}`,
+		border: `1px solid ${RussianGreen}`,
 		fontSize: '16px',
 		lineHeight: '19px',
 		'&:focus': {
 			borderRadius: '3px',
-      borderColor: Celadon,
+			borderColor: RussianGreen,
-      background: '#FFFFFF',
+			background: White,
 		},
 	},
 
 	selectMenu: {
-    background: '#FFFFFF',
+		background: White,
-    color: Celadon,
+		color: RussianGreen,
 		'&:notchedOutline': {
 			borderColor: 'transparent !important',
 		},
@@ -51,7 +48,7 @@ const MuiSelect = {
 			outline: 'none',
 		},
 		'&:focus': {
-      background: '#FFFFFF',
+			background: White,
 			borderColor: 'transparent',
 		},
 	},
@@ -59,7 +56,7 @@ const MuiSelect = {
 		color: BlueGreen,
 	},
 	icon: {
-    color: Celadon,
+		color: RussianGreen,
 	},
 };
 

src/themes/overrides/MuiSwitch.js

@@ -1,6 +1,5 @@
-import BlueGreen from '../Theme'
+import { BlueGreen, Cultured, Charcoal } from '../Theme';
-import Cultured from '../Theme'
+
-import Charcoal from '../Theme'
 const MuiSwitch = {
 	root: {
 		overflow: 'visible',

src/themes/overrides/index.js

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