first template, material ui, navigation

src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { ThemeProvider } from '@material-ui/core/styles';
+import theme from './themes';
+
+import Routes from './routes';
+
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Router basename={process.env.PUBLIC_URL}>
+        <Routes />
+      </Router>
+    </ThemeProvider>
+  );
+}
+
+export default App;

src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/layouts/main/Main.jsx

@@ -0,0 +1,35 @@
+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',
+    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} maxWidth='xl'>{children}</Container>
+      <Footer />
+    </div>
+  );
+};
+
+export default Main;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Footer = () => {
+  return <div style={{ marginTop: 'auto' }}>Footer</div>;
+};
+
+export default Footer;

src/layouts/main/components/footer/index.js

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

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

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { AppBar, Toolbar, CssBaseline } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+import HideOnScroll from './hideOnScroll';
+import Navigation from './navigation';
+
+const useStyles = makeStyles((theme) => ({
+  appBar: {
+    // position: 'relative',
+    zIndex: 1301,
+  },
+}));
+
+const Header = () => {
+  const classes = useStyles();
+  return (
+    <>
+      <CssBaseline />
+      <HideOnScroll>
+        <AppBar className={classes.appBar} position="static" elevation={0}>
+          <Toolbar>
+            <Navigation />
+          </Toolbar>
+        </AppBar>
+      </HideOnScroll>
+      {/* <Toolbar /> */}
+    </>
+  );
+};
+export default Header;

src/layouts/main/components/header/hideOnScroll/HideOnScroll.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useScrollTrigger, Slide } from '@material-ui/core';
+
+
+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/main/components/header/hideOnScroll/index.js

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

src/layouts/main/components/header/index.js

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

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

@@ -0,0 +1,139 @@
+import React, { useState, useEffect, createRef } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  Container,
+  Hidden,
+  Tabs,
+  Tab,
+  useMediaQuery,
+  IconButton,
+  SwipeableDrawer,
+} from '@material-ui/core';
+import MenuIcon from '@material-ui/icons/Menu';
+import MenuOpenIcon from '@material-ui/icons/MenuOpen';
+import { makeStyles, useTheme } from '@material-ui/styles';
+
+const useStyles = makeStyles((theme) => ({
+  toolbar: theme.mixins.toolbar,
+
+  drawerIconContainer: {
+    alignSelf: 'center',
+    '&:hover': { backgroundColor: 'transparent' },
+    [theme.breakpoints.down('md')]: { padding: 0 },
+  },
+  drawerIcon: {
+    height: '40px',
+    width: '40px',
+    color: 'white',
+  },
+  drawer: { minWidth: '50vw' },
+  tab: {
+    alignItems: 'flex-start',
+    fontSize: '2rem',
+    textTransform: 'capitalize',
+
+  },
+  right: {},
+}));
+
+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 [value, setValue] = useState(0);
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  const handleTabsChange = (e, newValue) => {
+    setValue(newValue);
+    setOpenDrawer(false);
+  };
+
+  const open = () => {
+    setOpenDrawer(true);
+  };
+  const close = () => {
+    setOpenDrawer(false);
+  };
+  const wrapper = createRef();
+
+  return (
+    <Container ref={wrapper}>
+      <Hidden mdUp>
+        <IconButton
+          onClick={() => setOpenDrawer(!openDrawer)}
+          disableRipple
+          className={classes.drawerIconContainer}
+        >
+          {openDrawer ? (
+            <MenuOpenIcon className={classes.drawerIcon} />
+          ) : (
+            <MenuIcon className={classes.drawerIcon} />
+          )}
+        </IconButton>
+      </Hidden>
+
+      {matches ? (
+        <SwipeableDrawer
+          disableBackdropTransition={!iOS}
+          disableDiscovery={iOS}
+          open={openDrawer}
+          onOpen={open}
+          onClose={close}
+          classes={{ paper: classes.drawer }}
+        >
+          <div className={classes.toolbar} />
+          <Tabs
+            value={value}
+            onChange={handleTabsChange}
+            orientation="vertical"
+            indicatorColor="primary"
+          >
+            <Tab
+              label="Home"
+              component={Link}
+              to="/"
+              classes={{ wrapper: classes.tab }}
+            />
+            <Tab
+              label="Projects"
+              component={Link}
+              to="/projects"
+              classes={{ wrapper: classes.tab }}
+            />
+            <Tab
+              label="Games"
+              component={Link}
+              to="/games"
+              classes={{ wrapper: classes.tab }}
+            />
+            <Tab
+              label="Snippets"
+              component={Link}
+              to="/snippets"
+              classes={{ wrapper: classes.tab }}
+            />
+            <Tab
+              label="About"
+              component={Link}
+              to="/about"
+              classes={{ wrapper: classes.tab }}
+            />
+          </Tabs>
+        </SwipeableDrawer>
+      ) : (
+        <Hidden smDown>
+          <Tabs value={value} onChange={handleTabsChange} centered>
+            <Tab label="Home" component={Link} to="/" />
+            <Tab label="Projects" component={Link} to="/projects" />
+            <Tab label="Games" component={Link} to="/games" />
+            <Tab label="Snippets" component={Link} to="/snippets" />
+            <Tab label="About" component={Link} to="/about" />
+          </Tabs>
+        </Hidden>
+      )}
+    </Container>
+  );
+};
+export default Navigation;

src/layouts/main/components/header/navigation/index.js

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

src/layouts/main/index.js

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

src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

src/pages/about/About.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const About = () => {
+  return <div>About ...in progress</div>;
+};
+
+export default About;

src/pages/about/index.js

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

src/pages/games/Games.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Games = () => {
+  return <div>Games ...in progress</div>;
+};
+
+export default Games;

src/pages/games/index.js

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

src/pages/home/Home.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Home = () => {
+  return <div>Home ...in progress</div>;
+};
+
+export default Home;

src/pages/home/index.js

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

src/pages/projects/Projects.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Projects = () => {
+  return (
+    <div>
+      Projects ...in progress
+    </div>
+  )
+}
+
+export default Projects

src/pages/projects/index.js

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

src/pages/snippets/Snippets.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Snippets = () => {
+  return <div>Snippets ...in progress</div>;
+};
+
+export default Snippets;

src/pages/snippets/index.js

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

src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

src/routes/Routes.js

@@ -0,0 +1,43 @@
+import React, { Suspense, lazy } from 'react';
+import { Switch } from 'react-router-dom';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import ErrorBoundary from './components/errorBoundary';
+import CustomRoute from './components/customRoute';
+import Main from '../layouts/main';
+
+// const Main = lazy(() => import('layouts/main'));
+
+const Home = lazy(() => import('../pages/home'));
+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 CustomRoutes = () => {
+  
+  return (
+    <Suspense fallback={<CircularProgress color="secondary" />}>
+      <ErrorBoundary>
+        <Switch>
+          <CustomRoute exact path="/" component={Home} layout={Main} />
+          <CustomRoute exact path="/about" component={About} layout={Main} />
+          <CustomRoute
+            exact
+            path="/projects"
+            component={Projects}
+            layout={Main}
+          />
+          <CustomRoute exact path="/games" component={Games} layout={Main} />
+          <CustomRoute
+            exact
+            path="/snippets"
+            component={Snippets}
+            layout={Main}
+          />
+        </Switch>
+      </ErrorBoundary>
+    </Suspense>
+  );
+};
+
+export default CustomRoutes;

src/routes/components/customRoute/CustomRoute.jsx

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

src/routes/components/customRoute/index.js

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

src/routes/components/errorBoundary/ErrorBoundary.jsx

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null, errorInfo: null };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // Catch errors in any components below and re-render with error message
+    this.setState({
+      error: error,
+      errorInfo: errorInfo,
+    });
+    // You can also log error messages to an error reporting service here
+  }
+
+  render() {
+    if (this.state.errorInfo) {
+      // Error path
+      return (
+        <div>
+          <h2>Something went wrong.</h2>
+          <details style={{ whiteSpace: 'pre-wrap' }}>
+            {this.state.error && this.state.error.toString()}
+            <br />
+            {this.state.errorInfo.componentStack}
+          </details>
+        </div>
+      );
+    }
+    // Normally, just render children
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/routes/components/errorBoundary/index.js

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

src/routes/index.js

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

src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

src/themes/Theme.js

@@ -0,0 +1,24 @@
+import { unstable_createMuiStrictModeTheme as createMuiTheme } from '@material-ui/core/styles';
+
+import overrides from './overrides';
+
+export const BlueGreen = '#004d40';
+export const Celadon = '#a5d6a7';
+export const Charcoal = '#37474f';
+export const Cultured = '#eceff1';
+
+// 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,
+});

src/themes/index.js

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

src/themes/overrides/MuiAlert.js

@@ -0,0 +1,37 @@
+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',
+  },
+};
+export default MuiAlert;

src/themes/overrides/MuiInputBase.js

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

src/themes/overrides/MuiMenuItem.js

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

src/themes/overrides/MuiOutlinedInput.js

@@ -0,0 +1,56 @@
+import Celadon 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}`,
+
+      // 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,
+
+    '&:disabled': {
+      background: Cultured,
+      opacity: 0.8,
+      color: Charcoal,
+    },
+    notchedOutline: {
+      border: 'transparent',
+    },
+  },
+
+  multiline: {
+    padding: '.5rem !important',
+    border: '0px',
+    margin: 0,
+  },
+};
+export default MuiOutlinedInput;

src/themes/overrides/MuiSelect.js

@@ -0,0 +1,66 @@
+import BlueGreen from '../Theme';
+import Celadon from '../Theme';
+import Cultured from '../Theme';
+import Charcoal 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',
+    },
+  },
+
+  selectMenu: {
+    background: '#FFFFFF',
+    color: Celadon,
+    '&: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,
+  },
+};
+
+export default MuiSelect;

src/themes/overrides/MuiSwitch.js

@@ -0,0 +1,35 @@
+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)',
+      },
+    },
+  },
+
+  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

@@ -0,0 +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';
+
+export default {
+  MuiAlert,
+  MuiInputBase,
+  MuiMenuItem,
+  MuiOutlinedInput,
+  MuiSelect,
+  MuiSwitch,
+};