From 2c67953064cbc980f99c2df1401c9fc5fe777e3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chif.gergo@cloud.bme.hu>
Date: Sun, 24 Jan 2021 22:00:51 +0100
Subject: [PATCH] Add theme color values to components
---
src/components/Header.tsx | 9 ++++++---
src/components/News.tsx | 3 ++-
src/pages/Page.tsx | 8 ++++++--
src/theme.ts | 11 ++++++++---
4 files changed, 22 insertions(+), 9 deletions(-)
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index e6c3963..191c5bc 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -37,15 +37,16 @@ const MENU_ITEMS: AppBarMenuItem[] = [
const useStyles = makeStyles((theme) => ({
appBar: {
- backgroundColor: '#E5BD2F',
+ backgroundColor: theme.palette.primary.main,
padding: theme.spacing(1),
},
tab: {
+ color: theme.palette.secondary.main,
fontWeight: 600,
padding: '0px',
},
indicator: {
- backgroundColor: 'white',
+ backgroundColor: theme.palette.secondary.main,
},
navItem: {
flex: 1,
@@ -94,7 +95,9 @@ const Header: React.FC = () => {
<Typography variant="h4">SCH-BODY</Typography>
</Grid>
<Grid className={classes.navItem} item container justify="flex-end">
- <Button variant="contained">Login</Button>
+ <Button color="secondary" variant="contained">
+ Login
+ </Button>
</Grid>
</Grid>
</Toolbar>
diff --git a/src/components/News.tsx b/src/components/News.tsx
index d674e39..6927dde 100644
--- a/src/components/News.tsx
+++ b/src/components/News.tsx
@@ -10,8 +10,9 @@ interface NewsProps {
const useStyles = makeStyles((theme) => ({
container: {
+ color: 'white',
borderRadius: '8px',
- backgroundColor: '#E5E5E5',
+ backgroundColor: theme.palette.background.paper,
margin: theme.spacing(2),
padding: theme.spacing(1),
},
diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
index fed7ec3..d2204f6 100644
--- a/src/pages/Page.tsx
+++ b/src/pages/Page.tsx
@@ -3,12 +3,16 @@ import styled from 'styled-components';
import Footer from '../components/Footer';
import Header from '../components/Header';
-const Container = styled.div`
+const Container = styled.div(
+ (props) => `
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
-`;
+
+ background-color: ${props.theme.palette.background.default};
+`,
+);
const MainContent = styled.div`
height: 100%;
diff --git a/src/theme.ts b/src/theme.ts
index a72bf25..b40cff6 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -33,11 +33,16 @@ export const darkTheme = createMuiTheme({
main: '#FF0C3E',
},
background: {
- default: '#222222',
+ default: '#2A2A28',
+ paper: '#202020',
},
- success: {},
+ /* success: {},
info: {},
- warning: {},
+ warning: {}, */
+
+ text: {
+ primary: '#FFFFFF',
+ },
},
typography: {
fontFamily: 'Roboto',
--
GitLab