From 1a0831212070ba42649a5bd1e2527925cfd1cbbc Mon Sep 17 00:00:00 2001 From: Eug-VS 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 (limited to 'src') 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 ( -
- - - This is the {page} page! - { - (page === 'scoreboard')? - () - : - ( -

- This text is rendered outside of Header component, but - interacting with Header can influence content of this page! -

- ) - } - - + +
+ + + This is the {page} page! + { + (page === 'scoreboard')? + () + : + ( +

+ This text is rendered outside of Header component, but + interacting with Header can influence content of this page! +

+ ) + } + + + ); }; 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 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(-) (limited to 'src') 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 ( - + - -
- - - This is the {page} page! - { - (page === 'scoreboard')? - () - : - ( -

- This text is rendered outside of Header component, but - interacting with Header can influence content of this page! -

- ) - } - - - - +
+ + This is the {page} page! + { + (page === 'scoreboard')? + () + : + ( +

+ This text is rendered outside of Header component, but + interacting with Header can influence content of this page! +

+ ) + } + + ); }; -const Root = styled.div` -`; - - ReactDOM.render(, 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 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(-) (limited to 'src') 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 ( - - - - - - - - + + + ChronoCube + { menuItems.map(menuItem => ( + + ))} + ); }; -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 Date: Fri, 3 Jan 2020 02:21:54 +0300 Subject: Apply styles to the Scoreboard --- src/components/Scoreboard/Scoreboard.js | 9 ++-- src/components/Scoreboard/Solution.js | 76 +++++++++++++++++++++++++-------- 2 files changed, 63 insertions(+), 22 deletions(-) (limited to 'src') 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 ( -
- { solutions.map(solution => ) } -
+ + {solutions.map(solution => ())} + ); }; -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 ( - - - { solution.result } - - - by {author} - - + + + + + + { solution.result } + + + + + + }> + + By {author} + + + + + 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. + + + + ) }; -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 Date: Fri, 3 Jan 2020 22:04:00 +0300 Subject: Uninstall styled-components --- src/components/Header/Header.js | 1 - src/components/Timer/Timer.js | 14 +++----------- 2 files changed, 3 insertions(+), 12 deletions(-) (limited to 'src') 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 ( - - {time} - + {time} ); } -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 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(-) (limited to 'src') 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 ( + Scoreboard {solutions.map(solution => ())} ); 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 = () => {
- This is the {page} page! { getPageComponent(page) } -- cgit v1.2.3