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(-)
(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 (
- <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