From caee577929870603eb0ef7f28c89c2c4207b8050 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sun, 26 Jan 2020 15:50:08 +0300 Subject: feat: initialize npm module, add components --- .../components/ContentSection/ContentSection.js | 42 +++++++++++++ src/lib/components/Header/Header.js | 72 ++++++++++++++++++++++ src/lib/components/SmartList/SmartList.js | 28 +++++++++ src/lib/components/Window/Window.js | 55 +++++++++++++++++ .../Window/WindowSurface/WindowSurface.js | 33 ++++++++++ 5 files changed, 230 insertions(+) create mode 100644 src/lib/components/ContentSection/ContentSection.js create mode 100644 src/lib/components/Header/Header.js create mode 100644 src/lib/components/SmartList/SmartList.js create mode 100644 src/lib/components/Window/Window.js create mode 100644 src/lib/components/Window/WindowSurface/WindowSurface.js (limited to 'src/lib/components') diff --git a/src/lib/components/ContentSection/ContentSection.js b/src/lib/components/ContentSection/ContentSection.js new file mode 100644 index 0000000..5108ce0 --- /dev/null +++ b/src/lib/components/ContentSection/ContentSection.js @@ -0,0 +1,42 @@ +import React from 'react'; + +import { + Typography, + Divider, + makeStyles +} from '@material-ui/core'; + + +const useStyles = makeStyles(theme => ({ + content: { + padding: theme.spacing(0, 2, 1, 2), + marginBottom: theme.spacing(1), + + '& a': { + color: theme.palette.secondary.light, + }, + '& .MuiButton-root': { + color: theme.palette.background.paper, + margin: theme.spacing(1, 2, 2, 0), + fontWeight: 'bold', + }, + }, +})); + +const ContentSection = ({ sectionName, children }) => { + const classes = useStyles(); + + return ( + <> + {sectionName} + + + {children} + + + ); + +}; + + +export default ContentSection; diff --git a/src/lib/components/Header/Header.js b/src/lib/components/Header/Header.js new file mode 100644 index 0000000..1595141 --- /dev/null +++ b/src/lib/components/Header/Header.js @@ -0,0 +1,72 @@ +import React from 'react'; + +import { + AppBar, + Tabs, + Tab, + Typography, + Toolbar, +} from '@material-ui/core'; + +import { makeStyles } from '@material-ui/core/styles'; +import TimerIcon from '@material-ui/icons/Timer'; +import AccountCircleIcon from '@material-ui/icons/AccountCircle'; +import AssignmentIcon from '@material-ui/icons/Assignment'; +import GitHubIcon from '@material-ui/icons/GitHub'; + + +const useStyles = makeStyles(theme => ({ + logo: { + color: theme.palette.secondary.main, + margin: theme.spacing(0, 3, 0, 3), + }, + tab: { + '& .MuiTab-wrapper': { + padding: theme.spacing(2), + flexDirection: 'row', + '& svg': { + marginRight: theme.spacing(1), + marginBottom: '0 !important', + } + } + } +})); + + +const Header = ({ page, setPage }) => { + const classes = useStyles(); + + const handleChange = (event, newPage) => { + setPage(newPage); + }; + + const icons = { + app: (), + profile: (), + scoreboard: (), + contribute: (), + }; + + return ( + + + + ChronoCube + + + { Object.keys(icons).map(item => ( + + ))} + + + + ); +}; + +export default Header; diff --git a/src/lib/components/SmartList/SmartList.js b/src/lib/components/SmartList/SmartList.js new file mode 100644 index 0000000..b462c47 --- /dev/null +++ b/src/lib/components/SmartList/SmartList.js @@ -0,0 +1,28 @@ +import React from 'react'; + +import { FixedSizeList } from 'react-window'; +import AutoSizer from 'react-virtualized-auto-sizer'; + + +const SmartList = ({ itemSize, itemCount, renderItem }) => { + + return ( +
+ + {({ width, height }) => ( + + {renderItem} + + )} + +
+ ); +}; + + +export default SmartList; diff --git a/src/lib/components/Window/Window.js b/src/lib/components/Window/Window.js new file mode 100644 index 0000000..0ba2454 --- /dev/null +++ b/src/lib/components/Window/Window.js @@ -0,0 +1,55 @@ +import React from 'react'; + +import { Typography, Divider, makeStyles } from '@material-ui/core'; + +import WindowSurface from './WindowSurface/WindowSurface'; + + +const useStyles = makeStyles(theme => ({ + header: { + padding: theme.spacing(1, 0, 1, 2), + background: theme.palette.background.elevation, + }, +})); + + +const Window = ({ type, name, children }) => { + const classes = useStyles(); + + const size = { + height: '85vh', + }; + + const position = { + bottom: '3vh', + }; + + if (type === 'primary') { + size.width = '63vw'; + position.left = '2vw'; + } else if (type === 'secondary') { + size.width = '31vw'; + position.right = '2vw'; + } else if (type === 'mono') { + position.left = '2vw'; + position.right = '2vw'; + } + + return ( + + {name && +
+ {name} + +
+ } + {children} + + ); +}; + + +export default Window; diff --git a/src/lib/components/Window/WindowSurface/WindowSurface.js b/src/lib/components/Window/WindowSurface/WindowSurface.js new file mode 100644 index 0000000..26fea01 --- /dev/null +++ b/src/lib/components/Window/WindowSurface/WindowSurface.js @@ -0,0 +1,33 @@ +import React from 'react'; + +import { Paper, makeStyles } from '@material-ui/core'; + + +const useStyles = makeStyles(theme => ({ + surface: { + position: 'absolute', + display: 'flex', + flexDirection: 'column', + background: theme.palette.background.elevation, + overflowY: 'auto', + scrollbarColor: `${theme.palette.primary.dark} ${theme.palette.primary.light}`, + } +})); + + +const WindowSurface = ({ size, position, children }) => { + const classes = useStyles(); + + return ( + + {children} + + ) +}; + + +export default WindowSurface; \ No newline at end of file -- cgit v1.2.3 From 8a75fef7a7b68f82b745f7d73cbafdfb1f444825 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Mon, 27 Jan 2020 12:19:48 +0300 Subject: feat: update components --- src/lib/components/ContentSection/ContentSection.js | 5 ----- src/lib/components/Header/Header.js | 8 ++++++-- src/lib/components/Window/Window.js | 2 +- src/lib/components/Window/WindowSurface/WindowSurface.js | 11 +++++++---- 4 files changed, 14 insertions(+), 12 deletions(-) (limited to 'src/lib/components') diff --git a/src/lib/components/ContentSection/ContentSection.js b/src/lib/components/ContentSection/ContentSection.js index 5108ce0..461a9c2 100644 --- a/src/lib/components/ContentSection/ContentSection.js +++ b/src/lib/components/ContentSection/ContentSection.js @@ -12,13 +12,8 @@ const useStyles = makeStyles(theme => ({ padding: theme.spacing(0, 2, 1, 2), marginBottom: theme.spacing(1), - '& a': { - color: theme.palette.secondary.light, - }, '& .MuiButton-root': { - color: theme.palette.background.paper, margin: theme.spacing(1, 2, 2, 0), - fontWeight: 'bold', }, }, })); diff --git a/src/lib/components/Header/Header.js b/src/lib/components/Header/Header.js index 1595141..fddf8b3 100644 --- a/src/lib/components/Header/Header.js +++ b/src/lib/components/Header/Header.js @@ -16,9 +16,13 @@ import GitHubIcon from '@material-ui/icons/GitHub'; const useStyles = makeStyles(theme => ({ + root: { + background: theme.palette.background.elevation2, + color: theme.palette.text.primary, + }, logo: { - color: theme.palette.secondary.main, margin: theme.spacing(0, 3, 0, 3), + color: theme.palette.primary.main, }, tab: { '& .MuiTab-wrapper': { @@ -48,7 +52,7 @@ const Header = ({ page, setPage }) => { }; return ( - + ChronoCube diff --git a/src/lib/components/Window/Window.js b/src/lib/components/Window/Window.js index 0ba2454..027213f 100644 --- a/src/lib/components/Window/Window.js +++ b/src/lib/components/Window/Window.js @@ -8,7 +8,7 @@ import WindowSurface from './WindowSurface/WindowSurface'; const useStyles = makeStyles(theme => ({ header: { padding: theme.spacing(1, 0, 1, 2), - background: theme.palette.background.elevation, + background: theme.palette.background.elevation2, }, })); diff --git a/src/lib/components/Window/WindowSurface/WindowSurface.js b/src/lib/components/Window/WindowSurface/WindowSurface.js index 26fea01..7859bf6 100644 --- a/src/lib/components/Window/WindowSurface/WindowSurface.js +++ b/src/lib/components/Window/WindowSurface/WindowSurface.js @@ -8,9 +8,12 @@ const useStyles = makeStyles(theme => ({ position: 'absolute', display: 'flex', flexDirection: 'column', - background: theme.palette.background.elevation, overflowY: 'auto', - scrollbarColor: `${theme.palette.primary.dark} ${theme.palette.primary.light}`, + scrollbarColor: `${theme.palette.secondary.dark} ${theme.palette.secondary.light}`, + + '& a.MuiTypography-root': { + color: theme.palette.primary.light, + }, } })); @@ -20,7 +23,7 @@ const WindowSurface = ({ size, position, children }) => { return ( @@ -30,4 +33,4 @@ const WindowSurface = ({ size, position, children }) => { }; -export default WindowSurface; \ No newline at end of file +export default WindowSurface; -- cgit v1.2.3 From 72e9ea60b82f95f858aa341b5c0b63e277f6779f Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Mon, 27 Jan 2020 13:32:50 +0300 Subject: feat: export ThemeProvider instead of theme --- .../BenzinThemeProvider/BenzinThemeProvider.js | 37 ++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js (limited to 'src/lib/components') diff --git a/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js b/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js new file mode 100644 index 0000000..48eca72 --- /dev/null +++ b/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js @@ -0,0 +1,37 @@ +import React from 'react'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles' + + +const benzinTheme = createMuiTheme({ + palette: { + type: 'dark', + primary: { + main: '#ffa726', + }, + secondary: { + main: '#9c27b0', + }, + background: { + default: '#121212', + paper: '#1e1e1e', + elevation1: '#1e1e1e', + elevation2: '#232323', + elevation3: '#252525', + }, + text: { + primary: '#f4f4f4', + secondary: 'rgba(255, 255, 255, 0.6)', + } + }, +}); + + +const BenzinThemeProvider = ({ children }) => ( + + {children} + +); + + +export default BenzinThemeProvider; + -- cgit v1.2.3 From 92316d9e41c1285cddcc7407225bdbfa841c6de8 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Mon, 27 Jan 2020 13:38:31 +0300 Subject: feat: install Roboto font --- src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/lib/components') diff --git a/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js b/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js index 48eca72..6218308 100644 --- a/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js +++ b/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js @@ -1,5 +1,6 @@ import React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles' +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import 'typeface-roboto'; const benzinTheme = createMuiTheme({ -- cgit v1.2.3 From 8f0a5024a2b062c7ddf8d73f909b39050a624888 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Mon, 27 Jan 2020 19:48:22 +0300 Subject: feat: make Header more abstract --- src/lib/components/Header/Header.js | 28 +++++++++------------------- 1 file changed, 9 insertions(+), 19 deletions(-) (limited to 'src/lib/components') diff --git a/src/lib/components/Header/Header.js b/src/lib/components/Header/Header.js index fddf8b3..a055fcb 100644 --- a/src/lib/components/Header/Header.js +++ b/src/lib/components/Header/Header.js @@ -9,20 +9,16 @@ import { } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; -import TimerIcon from '@material-ui/icons/Timer'; -import AccountCircleIcon from '@material-ui/icons/AccountCircle'; -import AssignmentIcon from '@material-ui/icons/Assignment'; -import GitHubIcon from '@material-ui/icons/GitHub'; const useStyles = makeStyles(theme => ({ root: { background: theme.palette.background.elevation2, color: theme.palette.text.primary, + paddingLeft: theme.spacing(3), }, logo: { - margin: theme.spacing(0, 3, 0, 3), - color: theme.palette.primary.main, + margin: theme.spacing(0, 3, 0, 1), }, tab: { '& .MuiTab-wrapper': { @@ -37,31 +33,25 @@ const useStyles = makeStyles(theme => ({ })); -const Header = ({ page, setPage }) => { +const Header = ({ logo, contents, page, setPage }) => { const classes = useStyles(); const handleChange = (event, newPage) => { setPage(newPage); }; - const icons = { - app: (), - profile: (), - scoreboard: (), - contribute: (), - }; - return ( - - ChronoCube - + {logo.icon} + + {logo.title} + - { Object.keys(icons).map(item => ( + {contents && Object.keys(contents).map(item => ( Date: Tue, 28 Jan 2020 11:36:22 +0300 Subject: feat: decrease font-size in Header --- src/lib/components/Header/Header.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'src/lib/components') diff --git a/src/lib/components/Header/Header.js b/src/lib/components/Header/Header.js index a055fcb..3ade7b3 100644 --- a/src/lib/components/Header/Header.js +++ b/src/lib/components/Header/Header.js @@ -24,6 +24,7 @@ const useStyles = makeStyles(theme => ({ '& .MuiTab-wrapper': { padding: theme.spacing(2), flexDirection: 'row', + fontSize: '0.8125rem', '& svg': { marginRight: theme.spacing(1), marginBottom: '0 !important', @@ -43,10 +44,10 @@ const Header = ({ logo, contents, page, setPage }) => { return ( - {logo.icon} - - {logo.title} - + {logo.icon} + + {logo.title} + {contents && Object.keys(contents).map(item => ( Date: Tue, 28 Jan 2020 12:28:02 +0300 Subject: feat: add CssBaseline to BenzinThemeProvider --- src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/lib/components') diff --git a/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js b/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js index 6218308..8e52ed4 100644 --- a/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js +++ b/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js @@ -1,5 +1,6 @@ import React from 'react'; import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { CssBaseline } from '@material-ui/core'; import 'typeface-roboto'; @@ -29,6 +30,7 @@ const benzinTheme = createMuiTheme({ const BenzinThemeProvider = ({ children }) => ( + {children} ); -- cgit v1.2.3