dadobos/me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated dependencies

Browse Source
This commit is contained in:
Dan Dobos
2022-05-04 00:33:11 +02:00
parent 0b28182458
commit 559654aa9d
59 changed files with 7414 additions and 22938 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintcache
+1 -1
View File
File diff suppressed because one or more lines are too long
.gitignore
+1
View File
@@ -17,6 +17,7 @@
.env.development.local
.env.test.local
.env.production.local
.eslintcache
npm-debug.log*
yarn-debug.log*
.vscode/launch.json
Vendored
+15
View File
@@ -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
+6
View File
@@ -0,0 +1,6 @@
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
package-lock.json
Generated
+6267 -10080
View File
File diff suppressed because it is too large Load Diff
package.json
+26 -12
View File
@@ -4,17 +4,20 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-spring": "^8.0.27",
"web-vitals": "^0.2.4"
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.6.2",
"@mui/material": "^5.6.4",
"@mui/styles": "^5.6.2",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^14.1.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"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
+27 -62
View File
@@ -1,66 +1,31 @@
<!DOCTYPE html>
<html lang="en" style="scroll-behavior: smooth">
<head>
<meta charset="utf-8" />
<link
rel="icon"
href="https://raw.githubusercontent.com/diaid83/details/master/favicon.ico"
type="image/x-icon"
/>
<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="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>
<div id="root"></div>
<!--
<head>
<meta charset="utf-8" />
<link
rel="icon"
href="https://raw.githubusercontent.com/diaid83/details/master/favicon.ico"
type="image/x-icon"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<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"
/>
<title>DAD</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
@@ -70,5 +35,5 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</body>
</html>
public/manifest.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"short_name": "DAD",
"name": "Dan Andrei Dobos",
"icons": [
{
"src": "favicon.ico",
src/App.js
+34 -18
View File
@@ -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 responsiveFontsTheme = responsiveFontSizes(theme);
return (
<ThemeContext.Provider value={{ darkMode, setDarkMode }}>
<ThemeProvider theme={responsiveFontsTheme}>
<Router basename={process.env.PUBLIC_URL}>
<Routes />
</Router>
</ThemeProvider>
</ThemeContext.Provider>
);
}
const [mode, setMode] = useState('dark');
const colorMode = useMemo(
() => ({
toggleColorMode: () => {
setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
},
}),
[]
);
const theme = useMemo(
() => responsiveFontSizes(createTheme(MainTheme(mode))),
[mode]
);
return (
<ColorModeContext.Provider value={colorMode}>
<ThemeProvider theme={theme}>
<Router basename={process.env.PUBLIC_URL}>
<CustomRoutes />
</Router>
</ThemeProvider>
</ColorModeContext.Provider>
);
};
export default App;
src/common/hideOnScroll/HideOnScroll.jsx
-15
View File
@@ -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
+7 -6
View File
@@ -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(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
src/layouts/common/darkModeToogle/DarkModeToogle.jsx
+23
View File
@@ -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/white/components/header/darkModeToogle/index.js → src/layouts/common/darkModeToogle/index.js
View File
src/layouts/common/fullScreenContainer/FullScreenContainer.jsx
+26
View File
@@ -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
+1
View File
@@ -0,0 +1 @@
export { default } from './FullScreenContainer';
src/layouts/common/hideOnScroll/HideOnScroll.jsx
+17
View File
@@ -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/common/hideOnScroll/index.js → src/layouts/common/hideOnScroll/index.js
View File
src/layouts/landing/LandingLayout.jsx
+29
View File
@@ -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
+56
View File
@@ -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/white/components/footer/index.js → src/layouts/landing/components/footer/index.js
View File
src/layouts/landing/components/header/Header.jsx
+88
View File
@@ -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/white/components/header/index.js → src/layouts/landing/components/header/index.js
View File
src/layouts/landing/index.js
+1
View File
@@ -0,0 +1 @@
export {default} from './LandingLayout.jsx'
src/layouts/main/Main.jsx
-42
View File
@@ -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
+24
View File
@@ -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
+24 -17
View File
@@ -1,23 +1,30 @@
import React from 'react';
import {Grid, Typography } from '@material-ui/core';
import { Grid, Typography } from '@mui/material';
const Footer = () => {
return (
<Grid
container
style={{
marginTop: 'auto',
zIndex: 1300,
}}
justify="center"
>
<Grid item>
<Typography inline="true" variant="body1">
Dan Dobos &copy; 2021 Build with passion
</Typography>
</Grid>
</Grid>
);
const getCurrentYear = () => {
return new Date().getFullYear();
};
return (
<Grid
container
sx={{
marginTop: 'auto',
zIndex: 1300,
minHeight: '24px',
}}
justifyContent='center'>
<Grid item>
<Typography
inline='true'
variant='body1'
fontFamily='Nanum Gothic Coding'>
Dan Dobos &copy; {getCurrentYear()} Build with passion
</Typography>
</Grid>
</Grid>
);
};
export default Footer;
src/layouts/main/components/header/Header.jsx
+19 -24
View File
@@ -1,31 +1,26 @@
import React from 'react';
import { AppBar, Toolbar, CssBaseline } from '@material-ui/core';
import { makeStyles } from '@material-ui/styles';
import HideOnScroll from '../../../../common/hideOnScroll'
import { AppBar, Toolbar, CssBaseline, Box } from '@mui/material';
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}>
<Toolbar>
<Navigation />
</Toolbar>
</AppBar>
</HideOnScroll>
<Toolbar />
</>
);
return (
<>
<CssBaseline />
<HideOnScroll>
<AppBar sx={{ position: 'fixed', zIndex: 1301 }} elevation={0}>
<Toolbar>
<Navigation />
<Box sx={{ display: { sm: 'block', xs: 'none' } }}>
<DarkModeToogle />
</Box>
</Toolbar>
</AppBar>
</HideOnScroll>
</>
);
};
export default Header;
src/layouts/main/components/header/navigation/Navigation.jsx
+179 -184
View File
@@ -1,199 +1,194 @@
import React, { useState, useEffect, createRef, useMemo, useRef } from 'react';
import { Link } from 'react-router-dom';
import {
Container,
Hidden,
Tabs,
Tab,
useMediaQuery,
IconButton,
SwipeableDrawer,
ListItem,
ListItemText,
List,
} 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';
Container,
Tabs,
Tab,
useMediaQuery,
IconButton,
SwipeableDrawer,
Paper,
ListItem,
ListItemText,
List,
} from '@mui/material';
import { useTheme } from '@mui/material/styles';
import MenuIcon from '@mui/icons-material/Menu';
import MenuOpenIcon from '@mui/icons-material/MenuOpen';
const useStyles = makeStyles((theme) => ({
toolbar: theme.mixins.toolbar,
import DarkModeToogle from 'layouts/common/darkModeToogle';
drawerIconContainer: {
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 = () => {
const theme = useTheme();
const Navigation = (props) => {
const classes = useStyles();
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.down('sm'));
const iOS =
typeof navigator !== 'undefined' &&
/iPad|iPhone|iPod/.test(navigator.userAgent);
const matches = useMediaQuery(theme.breakpoints.down('sm'));
const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
const [value, setValue] = useState(1);
const [openDrawer, setOpenDrawer] = useState(false);
const [value, setValue] = useState(1);
const [openDrawer, setOpenDrawer] = useState(false);
const tabsActions = useRef(null);
const tabsActions = useRef(null);
const wrapper = createRef();
const handleTabsChange = (e, newValue) => {
setValue(newValue);
};
const handleTabsChange = (e, newValue) => {
setValue(newValue);
};
const open = () => {
setOpenDrawer(true);
};
const close = () => {
setOpenDrawer(false);
};
const wrapper = createRef();
const routes = useMemo(
() => [
{
name: 'Home',
link: '/',
activeIndex: 0,
},
{
name: 'Projects',
link: '/projects',
activeIndex: 1,
},
{
name: 'Games',
link: '/games',
activeIndex: 2,
},
{
name: 'Best Practices',
link: '/best-practices',
activeIndex: 3,
},
{
name: 'About',
link: '/about',
activeIndex: 4,
},
],
[]
);
const routes = useMemo(
() => [
{
name: 'Home',
link: '/',
activeIndex: 0,
},
{
name: 'Projects',
link: '/projects',
activeIndex: 1,
},
{
name: 'Games',
link: '/games',
activeIndex: 2,
},
{
name: 'Snippets',
link: '/snippets',
activeIndex: 3,
},
{
name: 'About',
link: '/about',
activeIndex: 4,
},
],
[]
);
useEffect(() => {
routes.forEach((route) => {
switch (window.location.pathname) {
case `${route.link}`:
if (value !== route.activeIndex) {
setValue(route.activeIndex);
setOpenDrawer(false);
}
break;
default:
return false;
}
});
}, [value, openDrawer, routes]);
useEffect(() => {
routes.forEach((route) => {
switch (window.location.pathname) {
case `${route.link}`:
if (value !== route.activeIndex) {
setValue(route.activeIndex);
}
break;
default:
return false;
}
});
}, [value, routes]);
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>
return (
<Container ref={wrapper}>
<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
color='inherit'>
{openDrawer ? (
<MenuOpenIcon fontSize='inherit' />
) : (
<MenuIcon fontSize='inherit' />
)}
</IconButton>
<DarkModeToogle style={{ alignSelf: 'right', color: 'inherit' }} />
</Paper>
{matches ? (
<SwipeableDrawer
disableBackdropTransition={!iOS}
disableDiscovery={iOS}
open={openDrawer}
onOpen={open}
onClose={close}
classes={{ paper: classes.drawer }}
>
<div className={classes.toolbar} />
<List disablePadding>
{routes.map((route) => (
<ListItem
className={classes.listitems}
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 disableTypography className={classes.listText}>
{route.name}
</ListItemText>
</ListItem>
))}
</List>
</SwipeableDrawer>
) : (
<Hidden smDown>
<Tabs
action={tabsActions}
value={value}
onChange={handleTabsChange}
centered
>
{routes.map((route) => (
<Tab
key={`${route.activeIndex}`}
label={route.name}
component={Link}
to={route.link}
/>
))}
</Tabs>
</Hidden>
)}
</Container>
);
{matches ? (
<SwipeableDrawer
disableBackdropTransition={!iOS}
disableDiscovery={iOS}
disableSwipeToOpen={false}
open={openDrawer}
onOpen={() => setOpenDrawer(true)}
onClose={() => setOpenDrawer(false)}
sx={{
backgroundColor: 'transparent',
}}>
<List sx={{ paddingTop: '4rem' }}>
{routes.map((route) => (
<ListItem
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}
onClick={() => {
setValue(route.activeIndex);
setOpenDrawer(false);
}}>
<ListItemText
disableTypography
sx={{
alignItems: 'flex-start',
fontSize: '1.2rem',
textTransform: 'capitalize',
}}>
{route.name}
</ListItemText>
</ListItem>
))}
</List>
</SwipeableDrawer>
) : (
<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>
</Paper>
)}
</Container>
);
};
export default Navigation;
src/layouts/main/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './Main';
export { default } from './MainLayout';
src/layouts/white/White.jsx
-52
View File
@@ -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
-52
View File
@@ -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
-93
View File
@@ -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
-24
View File
@@ -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
View File
@@ -1 +0,0 @@
export {default} from './White.jsx'
src/pages/about/About.jsx
+69 -86
View File
@@ -1,94 +1,77 @@
import React from 'react';
import { Container, Grid, Typography, Link } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/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',
},
},
}));
import { Container, Grid, Typography, Link } from '@mui/material';
import { useTheme } from '@mui/material/styles';
const About = () => {
const classes = useStyles();
const theme = useTheme();
return (
<Container id="about">
<Grid container direction="row" alignItems="stretch" justify="flex-end">
<div
style={{
height: '70vh',
display: 'flex',
alignItems: 'flex-end',
}}
>
<Grid
className={classes.container}
container
direction="column"
alignItems="flex-end"
justify="flex-end"
spacing={3}
>
<Grid item>
<Typography variant="h4" align="right" inline="true">
Software Developer
</Typography>
</Grid>
<Grid item>
<Typography
variant="h1"
gutterBottom
align="right"
inline="true"
className={classes.name}
>
Dan Dobos
</Typography>
</Grid>
return (
<Container id='about'>
<Grid
container
direction='row'
alignItems='stretch'
justifyContent='flex-end'>
<div
style={{
minHeight: '70vh',
display: 'flex',
alignItems: 'flex-end',
}}>
<Grid
container
direction='column'
alignItems='flex-end'
justifyContent='flex-end'
spacing={3}>
<Grid item>
<Typography variant='h4' align='right' inline='true'>
Software Developer
</Typography>
</Grid>
<Grid item>
<Typography
variant='h1'
gutterBottom
inline='true'
sx={{
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">
Characterized by the desire of understanding and implementing
technological innovations.
</Typography>
</Grid>
{/* <Grid item>Contact</Grid> */}
<Grid item>
<Typography align="right" inline="true">
Contact
</Typography>
<Link
variant="h6"
href="mailto:danandreidobos@gmail.com"
target="_blank"
color="inherit"
>
danandreidobos@gmail.com
</Link>
</Grid>
</Grid>
</div>
</Grid>
</Container>
);
<Grid item>
<Typography align='right' inline='true' variant='h6'>
Characterized by the desire of understanding and implementing
technological innovations.
</Typography>
</Grid>
<Grid item>
<Typography align='right' inline='true'>
Contact
</Typography>
<Link
variant='h6'
href='mailto:danandreidobos@gmail.com'
target='_blank'
color='inherit'>
danandreidobos@gmail.com
</Link>
</Grid>
</Grid>
</div>
</Grid>
</Container>
);
};
export default About;
src/pages/bestPractices/BestPractices.jsx
+9
View File
@@ -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
+1
View File
@@ -0,0 +1 @@
export {default} from './BestPractices'
src/pages/games/Games.jsx
+3 -3
View File
@@ -1,9 +1,9 @@
import React from 'react';
const Games = () => {
return (
<div style={{ minHeight: 'calc(100vh-128px)' }}>Games ...in progress</div>
);
return (
<div style={{ minHeight: 'calc(100vh-128px)' }}>Games ...in progress</div>
);
};
export default Games;
src/pages/home/Home.jsx
-47
View File
@@ -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
View File
@@ -1 +0,0 @@
export { default } from './Home';
src/pages/landing/Landing.jsx
+48
View File
@@ -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
+1
View File
@@ -0,0 +1 @@
export { default } from './Landing';
src/pages/projects/Projects.jsx
+19 -9
View File
@@ -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)' }}>
Projects ...in progress
</div>
)
}
return (
<div >
Projects ...in progress
<Box>
{[...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
-11
View File
@@ -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
View File
@@ -1 +0,0 @@
export {default} from './Snippets'
src/routes/Routes.js
+60 -34
View File
@@ -1,44 +1,70 @@
import React, { Suspense, lazy } from 'react';
import { Switch } from 'react-router-dom';
import CircularProgress from '@material-ui/core/CircularProgress';
import { Routes, Route } from 'react-router-dom';
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 = () => {
return (
<Suspense fallback={<CircularProgress color="secondary" />}>
<ErrorBoundary>
<Switch>
<CustomRoute exact path="/" component={Home} layout={White} />
<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 const CustomRoutes = () => {
return (
<Suspense fallback={<CircularProgress color='secondary' />}>
<ErrorBoundary>
<Routes>
<Route
path='/'
element={
<LandingLayout>
<Home />
</LandingLayout>
}
/>
<Route
path='about'
element={
<MainLayout>
<About />
</MainLayout>
}
/>
<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
+10 -16
View File
@@ -1,18 +1,12 @@
import React from 'react';
import { Route } from 'react-router-dom';
// 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>
);
}}
/>
);
};
// const Layout = ({ layout: Layout, component: Component }) => {
// return (
// <Layout>
// <Component />
// </Layout>
// );
// };
export default CustomRoute;
// export default Layout;
src/routes/components/errorBoundary/ErrorBoundary.jsx
+29 -29
View File
@@ -1,37 +1,37 @@
import React, { Component } from 'react';
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { error: null, errorInfo: null };
}
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
}
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;
}
render() {
if (this.state.errorInfo) {
// Error path
return (
<div>
<h2>Something went wrong.</h2>
<details sx={{ 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/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './Routes';
// export { default } from './Routes';
src/themes/Theme.js
+86 -16
View File
@@ -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
View File
@@ -1 +1 @@
export { default } from './Theme';
// export *from './Theme';
src/themes/overrides/MuiAlert.js
+36 -34
View File
@@ -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
+8 -9
View File
@@ -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
+10 -9
View File
@@ -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
+48 -50
View File
@@ -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
+56 -59
View File
@@ -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
+31 -32
View File
@@ -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
+14 -14
View File
@@ -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,
// };
yarn.lock
-11790
View File
File diff suppressed because it is too large Load Diff