From 1a0831212070ba42649a5bd1e2527925cfd1cbbc Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Thu, 2 Jan 2020 18:21:27 +0300
Subject: Create initial theme
---
src/index.js | 43 ++++++++++++++++++++++---------------------
src/theme.js | 18 ++++++++++++++++++
2 files changed, 40 insertions(+), 21 deletions(-)
create mode 100644 src/theme.js
diff --git a/src/index.js b/src/index.js
index 38a79a6..3f9c97e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,10 +6,11 @@ import {
Paper,
Container,
} from "@material-ui/core";
-
import styled from 'styled-components';
-import CssBaseline from '@material-ui/core/CssBaseline'
+import CssBaseline from '@material-ui/core/CssBaseline';
+import { ThemeProvider } from '@material-ui/core/styles';
+import theme from "./theme";
import Header from './components/Header/Header';
import Scoreboard from "./components/Scoreboard/Scoreboard";
@@ -21,30 +22,30 @@ const App = () => {
return (
<Root>
<CssBaseline/>
- <Header setPage={setPage} />
- <Container maxWidth="xl">
- <Paper elevation={4} style={{backgroundColor: "bisque"}}>
- <Typography variant="h4"> This is the {page} page! </Typography>
- {
- (page === 'scoreboard')?
- (<Scoreboard/>)
- :
- (
- <p>
- This text is rendered outside of <code>Header</code> component, but
- interacting with <code>Header</code> can influence content of this page!
- </p>
- )
- }
- </Paper>
- </Container>
+ <ThemeProvider theme={theme}>
+ <Header setPage={setPage} />
+ <Container maxWidth="xl">
+ <Paper elevation={4} >
+ <Typography variant="h4"> This is the {page} page! </Typography>
+ {
+ (page === 'scoreboard')?
+ (<Scoreboard/>)
+ :
+ (
+ <p>
+ This text is rendered outside of <code>Header</code> component, but
+ interacting with <code>Header</code> can influence content of this page!
+ </p>
+ )
+ }
+ </Paper>
+ </Container>
+ </ThemeProvider>
</Root>
);
};
const Root = styled.div`
- background: cornsilk;
- padding-bottom: 25px;
`;
diff --git a/src/theme.js b/src/theme.js
new file mode 100644
index 0000000..54b289d
--- /dev/null
+++ b/src/theme.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles'
+
+
+const theme = createMuiTheme({
+ palette: {
+ primary: {
+ light: '#3a3535',
+ main: '#232020',
+ },
+ secondary: {
+ main: '#f4f4f4',
+ dark: '#ff7315',
+ },
+ },
+});
+
+export default theme;
--
cgit v1.2.3
From 4b39b512a63134c9882b356e9f641f967e870482 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Thu, 2 Jan 2020 21:46:24 +0300
Subject: Improve theme and use makeStyles hook
---
src/index.js | 56 +++++++++++++++++++++++++++-----------------------------
src/theme.js | 44 +++++++++++++++++++++++++++++++++-----------
2 files changed, 60 insertions(+), 40 deletions(-)
diff --git a/src/index.js b/src/index.js
index 3f9c97e..bacf937 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,50 +3,48 @@ import ReactDOM from 'react-dom';
import {
Typography,
- Paper,
- Container,
+ Box,
} from "@material-ui/core";
-import styled from 'styled-components';
import CssBaseline from '@material-ui/core/CssBaseline';
-import { ThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider, makeStyles } from '@material-ui/core/styles';
import theme from "./theme";
import Header from './components/Header/Header';
import Scoreboard from "./components/Scoreboard/Scoreboard";
+const useStyles = makeStyles(theme => ({
+ root: {
+ padding: theme.spacing(2),
+ },
+}));
+
+
const App = () => {
const [page, setPage] = useState('app');
+ const classes = useStyles();
return (
- <Root>
+ <ThemeProvider theme={theme}>
<CssBaseline/>
- <ThemeProvider theme={theme}>
- <Header setPage={setPage} />
- <Container maxWidth="xl">
- <Paper elevation={4} >
- <Typography variant="h4"> This is the {page} page! </Typography>
- {
- (page === 'scoreboard')?
- (<Scoreboard/>)
- :
- (
- <p>
- This text is rendered outside of <code>Header</code> component, but
- interacting with <code>Header</code> can influence content of this page!
- </p>
- )
- }
- </Paper>
- </Container>
- </ThemeProvider>
- </Root>
+ <Header setPage={setPage}/>
+ <Box className={classes.root}>
+ <Typography variant="h4"> This is the {page} page! </Typography>
+ {
+ (page === 'scoreboard')?
+ (<Scoreboard/>)
+ :
+ (
+ <p>
+ This text is rendered outside of <code>Header</code> component, but
+ interacting with <code>Header</code> can influence content of this page!
+ </p>
+ )
+ }
+ </Box>
+ </ThemeProvider>
);
};
-const Root = styled.div`
-`;
-
-
ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/src/theme.js b/src/theme.js
index 54b289d..350fc49 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -1,18 +1,40 @@
-import React from 'react';
import { createMuiTheme } from '@material-ui/core/styles'
+import createPalette from "@material-ui/core/styles/createPalette";
+const colorScheme = {
+ dark: '#232020',
+ grey: '#3a3535',
+ white: '#f4f4f4',
+ orange: '#ff7315',
+};
-const theme = createMuiTheme({
- palette: {
- primary: {
- light: '#3a3535',
- main: '#232020',
- },
- secondary: {
- main: '#f4f4f4',
- dark: '#ff7315',
- },
+const palette = createPalette({
+ primary: {
+ main: colorScheme.dark,
+ },
+ secondary: {
+ main: colorScheme.grey,
+ },
+ white: {
+ main: colorScheme.white,
},
+ orange: {
+ main: colorScheme.orange,
+ },
+});
+
+palette.background = {
+ default: palette.secondary.main,
+ paper: palette.secondary.dark,
+};
+
+palette.text = {
+ primary: palette.white.main,
+ secondary: palette.orange.main,
+};
+
+const theme = createMuiTheme({
+ palette
});
export default theme;
--
cgit v1.2.3
From 73eae8e0b49ebe4d85efdc7e6913d7c03e7d543c Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Thu, 2 Jan 2020 22:01:49 +0300
Subject: Style Header component
---
src/components/Header/Header.js | 43 +++++++++++++++++++++--------------------
1 file changed, 22 insertions(+), 21 deletions(-)
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 9bfe5c4..caa30a0 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -6,37 +6,38 @@ import {
Typography
} from "@material-ui/core";
import styled from 'styled-components';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+ header: {
+ backgroundColor: theme.palette.primary.dark,
+ },
+ logo: {
+ color: theme.palette.orange.main,
+ margin: theme.spacing(2, 3, 2, 2)
+ },
+}));
+
const Header = ({ setPage }) => {
+ const classes = useStyles();
const handleChange = (event, newPage) => {
setPage(newPage);
};
+ const menuItems = ['app', 'profile', 'scoreboard', 'news'];
+
return (
- <AppBar position="static">
- <TabsWrapper onChange={handleChange}>
- <Typography variant="h4" id="logo"> ChronoCube </Typography>
- <Tab label="App" value="app"/>
- <Tab label="Profile" value="profile"/>
- <Tab label="Scoreboard" value="scoreboard"/>
- <Tab label="News" value="news"/>
- </TabsWrapper>
+ <AppBar position="sticky" className={classes.header}>
+ <Tabs onChange={handleChange}>
+ <Typography variant="h4" className={classes.logo}> ChronoCube </Typography>
+ { menuItems.map(menuItem => (
+ <Tab label={menuItem} value={menuItem}/>
+ ))}
+ </Tabs>
</AppBar>
);
};
-const TabsWrapper = styled(Tabs)`
- border-bottom: 1px solid black;
- & .MuiTab-wrapper {
- padding: 10px;
- }
- & .MuiTypography-root {
- font-weight: bold;
- padding: 10px;
- margin-right: 50px;
- margin-left: 30px;
- }
-`;
-
export default Header;
--
cgit v1.2.3
From 15cf186e8b5ef25188df92be18d421a486033ee2 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Fri, 3 Jan 2020 02:21:54 +0300
Subject: Apply styles to the Scoreboard
---
package-lock.json | 8 ++++
package.json | 1 +
src/components/Scoreboard/Scoreboard.js | 9 ++--
src/components/Scoreboard/Solution.js | 76 +++++++++++++++++++++++++--------
4 files changed, 72 insertions(+), 22 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 647c38b..08b138a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1269,6 +1269,14 @@
"react-transition-group": "^4.3.0"
}
},
+ "@material-ui/icons": {
+ "version": "4.5.1",
+ "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.5.1.tgz",
+ "integrity": "sha512-YZ/BgJbXX4a0gOuKWb30mBaHaoXRqPanlePam83JQPZ/y4kl+3aW0Wv9tlR70hB5EGAkEJGW5m4ktJwMgxQAeA==",
+ "requires": {
+ "@babel/runtime": "^7.4.4"
+ }
+ },
"@material-ui/styles": {
"version": "4.8.2",
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.8.2.tgz",
diff --git a/package.json b/package.json
index 185f490..ae85ac9 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
"private": true,
"dependencies": {
"@material-ui/core": "^4.8.2",
+ "@material-ui/icons": "^4.5.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^7.2.1",
diff --git a/src/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js
index 1ebca90..5545d19 100644
--- a/src/components/Scoreboard/Scoreboard.js
+++ b/src/components/Scoreboard/Scoreboard.js
@@ -1,5 +1,6 @@
import React, {useEffect, useState} from 'react';
+import { Container } from "@material-ui/core";
import { get } from "../../requests";
import Solution from "./Solution";
@@ -19,10 +20,10 @@ const Scoreboard = () => {
return (
- <div>
- { solutions.map(solution => <Solution solution={solution}/>) }
- </div>
+ <Container maxWidth="sm">
+ {solutions.map(solution => (<Solution solution={solution}/>))}
+ </Container>
);
};
-export default Scoreboard;
\ No newline at end of file
+export default Scoreboard;
diff --git a/src/components/Scoreboard/Solution.js b/src/components/Scoreboard/Solution.js
index 3f46eb5..6f87723 100644
--- a/src/components/Scoreboard/Solution.js
+++ b/src/components/Scoreboard/Solution.js
@@ -1,32 +1,72 @@
import React from 'react';
import {
- Card,
- CardContent,
Typography,
- Paper,
+ Card,
+ Container,
+ Box,
+ ExpansionPanelSummary,
+ ExpansionPanel,
+ ExpansionPanelDetails,
} from "@material-ui/core";
-import styled from "styled-components";
+import { makeStyles } from "@material-ui/core/styles";
+import TimerIcon from '@material-ui/icons/Timer';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+
+const useStyles = makeStyles(theme => ({
+ item: {
+ backgroundColor: theme.palette.secondary.dark,
+ margin: theme.spacing(3),
+ width: theme.spacing(60),
+
+ '& .MuiBox-root': {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+
+ '& .MuiTypography-h2': {
+ color: theme.palette.orange.main,
+ margin: theme.spacing(2),
+ },
+ },
+
+}));
const Solution = ({ solution }) => {
+ const classes = useStyles();
const author = solution.author? solution.author : 'anonymous';
return (
- <PaperWrapper elevation={2} style={{backgroundColor: "#ddbea3"}}>
- <Typography variant="h4" style={{fontWeight: "bold"}}>
- { solution.result }
- </Typography>
- <Typography>
- by {author}
- </Typography>
- </PaperWrapper>
+ <Card elevation={4} className={classes.item}>
+ <Container maxWidth="xs">
+ <Box>
+ <TimerIcon/>
+ <Typography variant="h2">
+ { solution.result }
+ </Typography>
+ </Box>
+ </Container>
+
+ <ExpansionPanel>
+ <ExpansionPanelSummary expandIcon={<ExpandMoreIcon style={{color: 'white'}}/>}>
+ <Typography variant="h6">
+ By {author}
+ </Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <Typography>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+ </Typography>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ </Card>
)
};
-const PaperWrapper = styled(Card)`
- padding: 10px;
- margin: 25px;
-`;
-
-export default Solution;
\ No newline at end of file
+export default Solution;
--
cgit v1.2.3
From 747503569130a6ac93be89ca72acd0e9a4d3a26c Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Fri, 3 Jan 2020 22:04:00 +0300
Subject: Uninstall styled-components
---
package-lock.json | 109 ----------------------------------------
package.json | 3 +-
src/components/Header/Header.js | 1 -
src/components/Timer/Timer.js | 14 ++----
4 files changed, 4 insertions(+), 123 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 08b138a..df69def 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1005,24 +1005,6 @@
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.4.tgz",
"integrity": "sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A=="
},
- "@emotion/is-prop-valid": {
- "version": "0.8.6",
- "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.6.tgz",
- "integrity": "sha512-mnZMho3Sq8BfzkYYRVc8ilQTnc8U02Ytp6J1AwM6taQStZ3AhsEJBX2LzhA/LJirNCwM2VtHL3VFIZ+sNJUgUQ==",
- "requires": {
- "@emotion/memoize": "0.7.4"
- }
- },
- "@emotion/memoize": {
- "version": "0.7.4",
- "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
- "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
- },
- "@emotion/unitless": {
- "version": "0.7.5",
- "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
- "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
- },
"@hapi/address": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -2463,22 +2445,6 @@
"resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.5.tgz",
"integrity": "sha512-sGhfINU+AuMw9oFAdIn/nD5sem3pn/WgxAfDZ//Q3CnF+5uaho7C7shh2rKLk6sKE/XkfmyibghocwKdVjLIKg=="
},
- "babel-plugin-styled-components": {
- "version": "1.10.6",
- "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz",
- "integrity": "sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA==",
- "requires": {
- "@babel/helper-annotate-as-pure": "^7.0.0",
- "@babel/helper-module-imports": "^7.0.0",
- "babel-plugin-syntax-jsx": "^6.18.0",
- "lodash": "^4.17.11"
- }
- },
- "babel-plugin-syntax-jsx": {
- "version": "6.18.0",
- "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
- "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
- },
"babel-plugin-syntax-object-rest-spread": {
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -3070,11 +3036,6 @@
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
},
- "camelize": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
- "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
- },
"caniuse-api": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -4180,11 +4141,6 @@
"postcss": "^7.0.5"
}
},
- "css-color-keywords": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
- "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
- },
"css-color-names": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -4275,23 +4231,6 @@
"resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
"integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
},
- "css-to-react-native": {
- "version": "2.3.2",
- "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz",
- "integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==",
- "requires": {
- "camelize": "^1.0.0",
- "css-color-keywords": "^1.0.0",
- "postcss-value-parser": "^3.3.0"
- },
- "dependencies": {
- "postcss-value-parser": {
- "version": "3.3.1",
- "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
- "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
- }
- }
- },
"css-tree": {
"version": "1.0.0-alpha.37",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -7126,11 +7065,6 @@
"resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
"integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
},
- "is-what": {
- "version": "3.5.0",
- "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.5.0.tgz",
- "integrity": "sha512-00pwt/Jf7IaRh5m2Dp93Iw8LG2cd3OpDj3NrD1XPNUpAWVxPvBP296p4IiGmIU4Ur0f3f56IoIM+fS2pFYF+tQ=="
- },
"is-windows": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -8775,11 +8709,6 @@
"p-is-promise": "^2.0.0"
}
},
- "memoize-one": {
- "version": "5.1.1",
- "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
- "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
- },
"memory-fs": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -8813,14 +8742,6 @@
}
}
},
- "merge-anything": {
- "version": "2.4.4",
- "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.4.tgz",
- "integrity": "sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ==",
- "requires": {
- "is-what": "^3.3.1"
- }
- },
"merge-deep": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.2.tgz",
@@ -12849,26 +12770,6 @@
"schema-utils": "^2.0.1"
}
},
- "styled-components": {
- "version": "4.4.1",
- "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.1.tgz",
- "integrity": "sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g==",
- "requires": {
- "@babel/helper-module-imports": "^7.0.0",
- "@babel/traverse": "^7.0.0",
- "@emotion/is-prop-valid": "^0.8.1",
- "@emotion/unitless": "^0.7.0",
- "babel-plugin-styled-components": ">= 1",
- "css-to-react-native": "^2.2.2",
- "memoize-one": "^5.0.0",
- "merge-anything": "^2.2.4",
- "prop-types": "^15.5.4",
- "react-is": "^16.6.0",
- "stylis": "^3.5.0",
- "stylis-rule-sheet": "^0.0.10",
- "supports-color": "^5.5.0"
- }
- },
"stylehacks": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -12891,16 +12792,6 @@
}
}
},
- "stylis": {
- "version": "3.5.4",
- "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
- "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
- },
- "stylis-rule-sheet": {
- "version": "0.0.10",
- "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
- "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
- },
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/package.json b/package.json
index ae85ac9..de99244 100644
--- a/package.json
+++ b/package.json
@@ -11,8 +11,7 @@
"axios": "^0.19.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
- "react-scripts": "3.3.0",
- "styled-components": "^4.4.1"
+ "react-scripts": "3.3.0"
},
"scripts": {
"start": "react-scripts start",
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index caa30a0..1c4e77d 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -5,7 +5,6 @@ import {
Tab,
Typography
} from "@material-ui/core";
-import styled from 'styled-components';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles(theme => ({
diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js
index 367cce5..1b7dec4 100644
--- a/src/components/Timer/Timer.js
+++ b/src/components/Timer/Timer.js
@@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
+import { Typography } from "@material-ui/core";
+
import {post} from '../../requests';
const Timer = () => {
@@ -56,19 +57,10 @@ const Timer = () => {
return (
- <Root>
- <span>{time}</ span>
- </Root>
+ <Typography variant="h2"> {time} </Typography>
);
}
-const Root = styled.div`
- background-color: skyblue;
- padding: 8px;
- display: inline-block;
- font-size: 32px;
- color: pink;
-`;
export default Timer;
--
cgit v1.2.3
From a7b17c6f460031c8caf0b3f6173b817b4a6cc8fa Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Fri, 3 Jan 2020 22:48:18 +0300
Subject: Remove page name from blank pages.
---
src/components/Scoreboard/Scoreboard.js | 5 +++--
src/index.js | 1 -
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js
index 5545d19..1235f9a 100644
--- a/src/components/Scoreboard/Scoreboard.js
+++ b/src/components/Scoreboard/Scoreboard.js
@@ -1,6 +1,6 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
-import { Container } from "@material-ui/core";
+import { Container, Typography } from "@material-ui/core";
import { get } from "../../requests";
import Solution from "./Solution";
@@ -21,6 +21,7 @@ const Scoreboard = () => {
return (
<Container maxWidth="sm">
+ <Typography variant="h3" style={{textAlign: 'center'}}>Scoreboard</Typography>
{solutions.map(solution => (<Solution solution={solution}/>))}
</Container>
);
diff --git a/src/index.js b/src/index.js
index a397310..e88b342 100644
--- a/src/index.js
+++ b/src/index.js
@@ -48,7 +48,6 @@ const App = () => {
<CssBaseline/>
<Header setPage={setPage}/>
<Box className={classes.root}>
- <Typography variant="h4"> This is the {page} page! </Typography>
{ getPageComponent(page) }
</Box>
</ThemeProvider>
--
cgit v1.2.3