aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/ContentSection/ContentSection.js42
-rw-r--r--src/components/Header/Header.js72
-rw-r--r--src/components/Loading/Loading.js3
-rw-r--r--src/components/SmartList/SmartList.js28
-rw-r--r--src/components/SolutionCard/SolutionCard.js18
-rw-r--r--src/components/Window/Window.js55
-rw-r--r--src/components/Window/WindowSurface/WindowSurface.js33
-rw-r--r--src/index.js34
-rw-r--r--src/pages/Contribute/Contribute.js11
-rw-r--r--src/pages/Profile/Profile.js11
-rw-r--r--src/pages/Profile/Registration/Registration.js6
-rw-r--r--src/pages/Scoreboard/Scoreboard.js6
-rw-r--r--src/pages/Timer/Timer.js13
-rw-r--r--src/pages/Timer/TimerButton/TimerButton.js6
-rw-r--r--src/theme.js24
15 files changed, 71 insertions, 291 deletions
diff --git a/src/components/ContentSection/ContentSection.js b/src/components/ContentSection/ContentSection.js
deleted file mode 100644
index 5108ce0..0000000
--- a/src/components/ContentSection/ContentSection.js
+++ /dev/null
@@ -1,42 +0,0 @@
-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 (
- <>
- <Typography variant="h4">{sectionName}</Typography>
- <Divider variant="middle"/>
- <Typography component="div" className={classes.content}>
- {children}
- </Typography>
- </>
- );
-
-};
-
-
-export default ContentSection;
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
deleted file mode 100644
index 1595141..0000000
--- a/src/components/Header/Header.js
+++ /dev/null
@@ -1,72 +0,0 @@
-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: (<TimerIcon />),
- profile: (<AccountCircleIcon />),
- scoreboard: (<AssignmentIcon />),
- contribute: (<GitHubIcon />),
- };
-
- return (
- <AppBar position="sticky">
- <Toolbar>
- <Typography variant="h4" className={classes.logo}>
- ChronoCube
- </Typography>
- <Tabs onChange={handleChange} value={page}>
- { Object.keys(icons).map(item => (
- <Tab
- label={item}
- icon={icons[item]}
- value={item}
- className={classes.tab}
- key={item}
- />
- ))}
- </Tabs>
- </Toolbar>
- </AppBar>
- );
-};
-
-export default Header;
diff --git a/src/components/Loading/Loading.js b/src/components/Loading/Loading.js
index e8b9701..e8793cc 100644
--- a/src/components/Loading/Loading.js
+++ b/src/components/Loading/Loading.js
@@ -12,6 +12,7 @@ import CircularProgress from '@material-ui/core/CircularProgress';
const useStyles = makeStyles(theme => ({
root: {
padding: theme.spacing(1),
+ background: theme.palette.background.elevation2,
},
}));
@@ -19,7 +20,7 @@ const Loading = () => {
const classes = useStyles();
return (
- <Card elevation={5} className={classes.root}>
+ <Card className={classes.root}>
<CardHeader
avatar={(<CircularProgress color="secondary" />)}
title="Loading"
diff --git a/src/components/SmartList/SmartList.js b/src/components/SmartList/SmartList.js
deleted file mode 100644
index b462c47..0000000
--- a/src/components/SmartList/SmartList.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { FixedSizeList } from 'react-window';
-import AutoSizer from 'react-virtualized-auto-sizer';
-
-
-const SmartList = ({ itemSize, itemCount, renderItem }) => {
-
- return (
- <div style={{ flex: '1 1 auto', overflow: 'hidden' }}>
- <AutoSizer>
- {({ width, height }) => (
- <FixedSizeList
- height={height}
- width={width}
- itemSize={itemSize}
- itemCount={itemCount}
- >
- {renderItem}
- </FixedSizeList>
- )}
- </AutoSizer>
- </div>
- );
-};
-
-
-export default SmartList;
diff --git a/src/components/SolutionCard/SolutionCard.js b/src/components/SolutionCard/SolutionCard.js
index 8252347..fdd4bdf 100644
--- a/src/components/SolutionCard/SolutionCard.js
+++ b/src/components/SolutionCard/SolutionCard.js
@@ -15,6 +15,7 @@ import {
import { makeStyles } from '@material-ui/core/styles';
import TimerIcon from '@material-ui/icons/Timer';
import MoreVertIcon from '@material-ui/icons/MoreVert';
+import DeleteIcon from '@material-ui/icons/Delete';
import { del } from '../../requests';
@@ -30,12 +31,17 @@ const DATE_FORMAT = {
const useStyles = makeStyles(theme => ({
root: {
padding: theme.spacing(1),
+ background: theme.palette.background.elevation2,
'& .MuiTypography-h3': {
- color: theme.palette.secondary.main,
margin: theme.spacing(2),
},
},
+ menu: {
+ '& ul': {
+ background: theme.palette.background.elevation3,
+ }
+ },
}));
const SolutionCard = ({ data, removeThisCard }) => {
@@ -61,7 +67,7 @@ const SolutionCard = ({ data, removeThisCard }) => {
};
return (
- <Card elevation={5} className={classes.root}>
+ <Card className={classes.root}>
<CardHeader
avatar={
author === 'anonymous'?
@@ -82,8 +88,12 @@ const SolutionCard = ({ data, removeThisCard }) => {
open={Boolean(anchorEl)}
keepMounted
onClose={handleClose}
+ className={classes.menu}
>
- <MenuItem onClick={handleDelete}>Delete</MenuItem>
+ <MenuItem onClick={handleDelete}>
+ <DeleteIcon />
+ Delete
+ </MenuItem>
</Menu>
<CardContent>
<Grid container direction="row" justify="center" alignItems="center">
@@ -91,7 +101,7 @@ const SolutionCard = ({ data, removeThisCard }) => {
<TimerIcon/>
</Grid>
<Grid item>
- <Typography variant="h3">
+ <Typography variant="h3" color="primary">
{ data.result }
</Typography>
</Grid>
diff --git a/src/components/Window/Window.js b/src/components/Window/Window.js
deleted file mode 100644
index 0ba2454..0000000
--- a/src/components/Window/Window.js
+++ /dev/null
@@ -1,55 +0,0 @@
-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 (
- <WindowSurface
- size={size}
- position={position}
- >
- {name &&
- <div>
- <Typography variant="h5" className={classes.header}>{name}</Typography>
- <Divider />
- </div>
- }
- {children}
- </WindowSurface>
- );
-};
-
-
-export default Window;
diff --git a/src/components/Window/WindowSurface/WindowSurface.js b/src/components/Window/WindowSurface/WindowSurface.js
deleted file mode 100644
index 26fea01..0000000
--- a/src/components/Window/WindowSurface/WindowSurface.js
+++ /dev/null
@@ -1,33 +0,0 @@
-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 (
- <Paper
- elevation={3}
- style={{...size, ...position}}
- className={classes.surface}
- >
- {children}
- </Paper>
- )
-};
-
-
-export default WindowSurface; \ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 869ec3d..49c66e7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,17 +1,23 @@
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import { ThemeProvider } from '@material-ui/core/styles';
+import {
+ BenzinThemeProvider,
+ Header,
+} from 'react-benzin';
+
import 'typeface-roboto';
-import theme from './theme';
-import Header from './components/Header/Header';
import Timer from './pages/Timer/Timer';
import Scoreboard from './pages/Scoreboard/Scoreboard';
import Contribute from './pages/Contribute/Contribute';
import Profile from './pages/Profile/Profile';
+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';
+
import { get } from './requests';
@@ -21,6 +27,13 @@ const App = () => {
const [user, setUser] = useState({ username: 'anonymous', id: null });
const [recentSolutions, setRecentSolutions] = useState([]);
+ const headerContents = {
+ app: (<TimerIcon />),
+ profile: (<AccountCircleIcon />),
+ scoreboard: (<AssignmentIcon />),
+ contribute: (<GitHubIcon />),
+ };
+
useEffect(() => {
const userId = +localStorage.getItem('userId');
if (userId) {
@@ -57,11 +70,16 @@ const App = () => {
};
return (
- <ThemeProvider theme={theme}>
- <CssBaseline/>
- <Header page={page} setPage={setPage}/>
+ <BenzinThemeProvider>
+ <Header
+ logo={{
+ title: 'ChronoCube'
+ }}
+ contents={headerContents}
+ page={page}
+ setPage={setPage}/>
<Page page={page} />
- </ThemeProvider>
+ </BenzinThemeProvider>
);
};
diff --git a/src/pages/Contribute/Contribute.js b/src/pages/Contribute/Contribute.js
index d94cc80..aa1c3f7 100644
--- a/src/pages/Contribute/Contribute.js
+++ b/src/pages/Contribute/Contribute.js
@@ -15,8 +15,7 @@ import TrendingUpIcon from '@material-ui/icons/TrendingUp';
import BugReportIcon from '@material-ui/icons/BugReport';
import NewReleasesIcon from '@material-ui/icons/NewReleases';
-import Window from '../../components/Window/Window';
-import ContentSection from '../../components/ContentSection/ContentSection';
+import { Window, ContentSection } from 'react-benzin';
const useStyles = makeStyles(theme => ({
@@ -47,7 +46,7 @@ const Contribute = () => {
</p>
<Button
variant="contained"
- color="secondary"
+ color="primary"
startIcon={<TrendingUpIcon />}
href="https://github.com/users/Eug-VS/projects/3"
>
@@ -94,7 +93,7 @@ const Contribute = () => {
</p>
<Button
variant="contained"
- color="secondary"
+ color="primary"
startIcon={<NewReleasesIcon />}
href="https://github.com/Eug-VS/chrono-cube/issues/new"
>
@@ -102,7 +101,7 @@ const Contribute = () => {
</Button>
<Button
variant="contained"
- color="secondary"
+ color="primary"
startIcon={<BugReportIcon />}
href="https://github.com/Eug-VS/chrono-cube/issues/new"
>
@@ -142,7 +141,7 @@ const Contribute = () => {
</List>
<Button
variant="contained"
- color="secondary"
+ color="primary"
size="large"
href="https://github.com/users/Eug-VS/projects/3"
>
diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index 783d497..65c3734 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -1,5 +1,4 @@
import React, { useState, useEffect } from 'react';
-import Window from '../../components/Window/Window';
import {
Button,
@@ -7,12 +6,16 @@ import {
} from '@material-ui/core';
import Registration from './Registration/Registration';
-import ContentSection from '../../components/ContentSection/ContentSection';
-import SmartList from '../../components/SmartList/SmartList';
+import {
+ Window,
+ ContentSection,
+ SmartList,
+} from 'react-benzin';
-import { get } from '../../requests';
import SolutionCard from '../../components/SolutionCard/SolutionCard';
+import { get } from '../../requests';
+
const useStyles = makeStyles(theme => ({
primary: {
diff --git a/src/pages/Profile/Registration/Registration.js b/src/pages/Profile/Registration/Registration.js
index af4ec30..b2d5503 100644
--- a/src/pages/Profile/Registration/Registration.js
+++ b/src/pages/Profile/Registration/Registration.js
@@ -8,8 +8,8 @@ import {
Grid,
} from '@material-ui/core';
-import ContentSection from '../../../components/ContentSection/ContentSection';
-import {get, post} from '../../../requests';
+import { ContentSection } from 'react-benzin';
+import { get, post } from '../../../requests';
const Registration = ({ setUser }) => {
@@ -67,7 +67,7 @@ const Registration = ({ setUser }) => {
/>
</Grid>
<Grid item>
- <Button variant="contained" color="secondary" size="large" onClick={handleSubmit}>
+ <Button variant="contained" color="secondary" onClick={handleSubmit}>
Submit!
</Button>
</Grid>
diff --git a/src/pages/Scoreboard/Scoreboard.js b/src/pages/Scoreboard/Scoreboard.js
index 335c06b..47c0899 100644
--- a/src/pages/Scoreboard/Scoreboard.js
+++ b/src/pages/Scoreboard/Scoreboard.js
@@ -2,12 +2,12 @@ import React, { useEffect, useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
-import { get } from '../../requests';
+import { Window, SmartList } from 'react-benzin';
-import SmartList from '../../components/SmartList/SmartList';
import SolutionCard from '../../components/SolutionCard/SolutionCard';
import Loading from '../../components/Loading/Loading';
-import Window from '../../components/Window/Window';
+
+import { get } from '../../requests';
const useStyles = makeStyles(theme => ({
diff --git a/src/pages/Timer/Timer.js b/src/pages/Timer/Timer.js
index 1323d97..6020c1b 100644
--- a/src/pages/Timer/Timer.js
+++ b/src/pages/Timer/Timer.js
@@ -2,10 +2,13 @@ import React from 'react';
import { post } from '../../requests';
-import Window from '../../components/Window/Window';
-import ContentSection from '../../components/ContentSection/ContentSection';
+import {
+ Window,
+ ContentSection,
+ SmartList,
+} from 'react-benzin';
+
import TimerButton from './TimerButton/TimerButton';
-import SmartList from '../../components/SmartList/SmartList';
import SolutionCard from '../../components/SolutionCard/SolutionCard';
import { Button, makeStyles } from '@material-ui/core';
@@ -63,12 +66,12 @@ const Timer = ({ user, recentSolutions, setRecentSolutions, setPage }) => {
Every speedcuber will benefit
from using it - both amateur and professional!
</p>
- <Button variant="contained" color="secondary" onClick={handleLearnMore}> Learn more </Button>
+ <Button variant="contained" color="primary" onClick={handleLearnMore}> Learn more </Button>
</ContentSection>
{user.id === null &&
<ContentSection sectionName="Log into an account">
<p> Tell us your name so we can track your progress</p>
- <Button variant="contained" color="secondary" onClick={handleLogin} size="large"> Login </Button>
+ <Button variant="contained" color="primary" onClick={handleLogin} size="large"> Login </Button>
</ContentSection>
}
<TimerButton registerResult={registerResult} />
diff --git a/src/pages/Timer/TimerButton/TimerButton.js b/src/pages/Timer/TimerButton/TimerButton.js
index 0f43c5a..fdb6b7c 100644
--- a/src/pages/Timer/TimerButton/TimerButton.js
+++ b/src/pages/Timer/TimerButton/TimerButton.js
@@ -7,7 +7,7 @@ const useStyles = makeStyles(theme => ({
root: {
textAlign: 'center',
padding: theme.spacing(5),
- background: theme.palette.primary.main,
+ background: theme.palette.background.elevation3,
marginTop: theme.spacing(10),
},
}));
@@ -74,7 +74,7 @@ const TimerButton = ({ registerResult }) => {
const composeHelperText = () => {
switch (mode) {
- case 'running': return '_';
+ case 'running': return 'Go fast!';
case 'countdown': return 'Release SPACE to begin';
case 'over': return 'You are too late!';
default: return 'Hold SPACE to start countdown';
@@ -90,7 +90,7 @@ const TimerButton = ({ registerResult }) => {
};
return (
- <Paper elevation={3} className={classes.root}>
+ <Paper className={classes.root}>
<Typography variant="h1"> {time} </Typography>
<Typography variant="h5" color={helperColor()}>
{composeHelperText()}
diff --git a/src/theme.js b/src/theme.js
deleted file mode 100644
index 3c671e6..0000000
--- a/src/theme.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { createMuiTheme } from '@material-ui/core/styles'
-
-const theme = createMuiTheme({
- palette: {
- type: 'dark',
- primary: {
- main: '#0a0909',
- },
- secondary: {
- main: '#ff7315',
- },
- background: {
- default: '#232020',
- paper: '#0f0e0e',
- elevation: 'rgba(255, 255, 255, 0.04)',
- },
- text: {
- primary: '#f4f4f4',
- secondary: '#6f6666',
- }
- },
-});
-
-export default theme;
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 21:27:16 +0000