aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package-lock.json44
-rw-r--r--package.json2
-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.js27
-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.js4
16 files changed, 86 insertions, 289 deletions
diff --git a/package-lock.json b/package-lock.json
index 761dc9f..ac02e0d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11343,9 +11343,9 @@
}
},
"react-benzin-test": {
- "version": "2.0.3",
- "resolved": "https://registry.npmjs.org/react-benzin-test/-/react-benzin-test-2.0.3.tgz",
- "integrity": "sha512-PXET2RGxPWW9qbWiUYtjbeJt+x7s/ewsXAaPD/70zo5U3HipGiRDhIFAjoOWu0AGxyUFu2oVmNByTt6bM75c8Q==",
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/react-benzin-test/-/react-benzin-test-2.0.4.tgz",
+ "integrity": "sha512-7cMk82c9eSTHuGhdjHXtmY0FXohgjHUZftns7wipumiTIE1uHI25Kme6cTSZUTkOyZyuXb73smC/rfeMx86b1w==",
"requires": {
"@material-ui/core": "^4.9.0",
"@material-ui/icons": "^4.5.1",
@@ -11355,29 +11355,6 @@
"react-virtualized-auto-sizer": "^1.0.2",
"react-window": "^1.8.5",
"typeface-roboto": "0.0.75"
- },
- "dependencies": {
- "@material-ui/core": {
- "version": "4.9.0",
- "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.0.tgz",
- "integrity": "sha512-zrrr8mPU5DDBYaVil4uJYauW41PjSn5otn7cqGsmWOY0t90fypr9nNgM7rRJaPz2AP6oRSDx1kBQt2igf5uelg==",
- "requires": {
- "@babel/runtime": "^7.4.4",
- "@material-ui/styles": "^4.9.0",
- "@material-ui/system": "^4.7.1",
- "@material-ui/types": "^5.0.0",
- "@material-ui/utils": "^4.7.1",
- "@types/react-transition-group": "^4.2.0",
- "clsx": "^1.0.2",
- "convert-css-length": "^2.0.1",
- "hoist-non-react-statics": "^3.2.1",
- "normalize-scroll-left": "^0.2.0",
- "popper.js": "^1.14.1",
- "prop-types": "^15.7.2",
- "react-is": "^16.8.0",
- "react-transition-group": "^4.3.0"
- }
- }
}
},
"react-dev-utils": {
@@ -11563,9 +11540,11 @@
"eslint": "^6.6.0",
"eslint-config-react-app": "^5.1.0",
"eslint-loader": "3.0.2",
+ "eslint-plugin-flowtype": "3.13.0",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.16.0",
+ "eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "4.3.0",
"fs-extra": "^8.1.0",
"fsevents": "2.1.2",
@@ -11616,6 +11595,14 @@
"isarray": "^1.0.0"
}
},
+ "eslint-plugin-flowtype": {
+ "version": "3.13.0",
+ "resolved": "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-3.13.0.tgz",
+ "integrity": "sha512-bhewp36P+t7cEV0b6OdmoRWJCBYRiHFlqPZAG1oS3SF+Y0LQkeDvFSM4oxoxvczD1OdONCXMlJfQFiWLcV9urw==",
+ "requires": {
+ "lodash": "^4.17.15"
+ }
+ },
"eslint-plugin-import": {
"version": "2.18.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.18.2.tgz",
@@ -11660,6 +11647,11 @@
}
}
},
+ "eslint-plugin-react-hooks": {
+ "version": "1.7.0",
+ "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz",
+ "integrity": "sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA=="
+ },
"find-up": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
diff --git a/package.json b/package.json
index b8bac16..321ddf4 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
"axios": "^0.19.2",
"gh-pages": "^2.2.0",
"react": "^16.12.0",
- "react-benzin-test": "^2.0.3",
+ "react-benzin-test": "^2.0.4",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0",
"react-virtualized-auto-sizer": "^1.0.2",
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 2da3b2e..399a6bb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,16 +2,22 @@ import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import CssBaseline from '@material-ui/core/CssBaseline';
-import { BenzinThemeProvider } from 'react-benzin-test';
+import {
+ BenzinThemeProvider,
+ Header,
+} from 'react-benzin-test';
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) {
@@ -59,7 +72,13 @@ const App = () => {
return (
<BenzinThemeProvider>
<CssBaseline/>
- <Header page={page} setPage={setPage}/>
+ <Header
+ logo={{
+ title: 'ChronoCube'
+ }}
+ contents={headerContents}
+ page={page}
+ setPage={setPage}/>
<Page page={page} />
</BenzinThemeProvider>
);
diff --git a/src/pages/Contribute/Contribute.js b/src/pages/Contribute/Contribute.js
index d94cc80..70003ba 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-test';
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..6ea90c4 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-test';
-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..2aecc4a 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-test';
+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..7385f3a 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-test';
-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..e42e318 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-test';
+
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..254f73c 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),
},
}));
@@ -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()}
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 18:22:29 +0000