Skip to content

Commit 4af4c30

Browse files
zoltantothcomzoltantothcom
committed
Header component added and styled for dark theme
1 parent 4baa140 commit 4af4c30

File tree

7 files changed

+108
-47
lines changed

7 files changed

+108
-47
lines changed

‎src/Layout.jsx‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
3+
import { BrowserRouter as Router, Route } from 'react-router-dom';
44
import { ThemeProvider } from 'styled-components';
55
import { connect } from 'react-redux';
66
import styleLight from './styles/hljs/hljs.light';
77
import styleDark from './styles/hljs/hljs.dark';
8-
import ToggleButton from './components/ToggleButton';
9-
import Title from './components/Title';
8+
import Header from './components/Header';
109
import GlobalStyle from './styles/global';
10+
import { themeCommon } from './styles/themes/theme.common';
1111
import { themeLight } from './styles/themes/theme.light';
1212
import { themeDark } from './styles/themes/theme.dark';
1313
import Game from './pages/Game';
@@ -17,29 +17,19 @@ const Layout = props => {
1717
const { mode } = props;
1818

1919
let style = styleLight;
20-
let theme = themeLight;
20+
let theme = { ...themeCommon, ...themeLight };
2121

2222
if (props.mode === 'dark') {
2323
style = styleDark;
24-
theme = themeDark;
24+
theme = { ...themeCommon, ...themeDark };
2525
}
2626

2727
return (
2828
<Router>
2929
<ThemeProvider theme={theme}>
3030
<React.Fragment>
3131
<GlobalStyle mode={mode} />
32-
33-
<Link to="/">Game</Link>
34-
<Link to="/about">About</Link>
35-
<a href="//github.com/zoltantothcom/javascript-patterns" target="_blank">
36-
GitHub
37-
</a>
38-
39-
<Route exact path="/" render={() => <ToggleButton control="js" />} />
40-
<ToggleButton control="mode" />
41-
42-
<Title />
32+
<Header />
4333

4434
<Route exact path="/" render={props => <Game {...props} style={style} />} />
4535
<Route path="/about" component={About} />

‎src/components/Header.jsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from 'react';
2+
import styled, { css } from 'styled-components';
3+
import { Route, Link } from 'react-router-dom';
4+
import ToggleButton from './ToggleButton';
5+
import Title from './Title';
6+
7+
const StyledHeader = styled.div`
8+
align-items: center;
9+
display: flex;
10+
flex-wrap: wrap;
11+
justify-content: space-between;
12+
margin-top: 1rem;
13+
`;
14+
15+
const StyledLinkContainer = styled.div`
16+
display: inline-flex;
17+
`;
18+
19+
const StyledSettingsContainer = styled.div`
20+
display: inline-flex;
21+
/* display: flex;
22+
align-items: center;
23+
height: 100%; */
24+
`;
25+
26+
const linkStyle = css`
27+
border-bottom: 1px solid transparent;
28+
color: ${props => props.theme.buttonBackgroundHover};
29+
display: inline-flex;
30+
font-size: 0.875rem;
31+
margin: 0.5rem;
32+
padding-bottom: 1px;
33+
text-decoration: none;
34+
35+
&:hover {
36+
border-bottom: 1px solid ${props => props.theme.buttonColor};
37+
color: ${props => props.theme.buttonColor};
38+
}
39+
`;
40+
41+
const StyledRouterLink = styled(Link)`
42+
${linkStyle}
43+
`;
44+
const StyledLink = styled.a`
45+
${linkStyle}
46+
`;
47+
48+
const Header = () => (
49+
<StyledHeader>
50+
<StyledLinkContainer>
51+
<StyledRouterLink to="/">Game</StyledRouterLink>
52+
<StyledRouterLink to="/about">About</StyledRouterLink>
53+
<StyledLink href="//github.com/zoltantothcom/javascript-patterns" target="_blank">
54+
GitHub
55+
</StyledLink>
56+
</StyledLinkContainer>
57+
58+
<StyledSettingsContainer>
59+
<Route exact path="/" render={() => <ToggleButton control="js" />} />
60+
<ToggleButton control="mode" />
61+
</StyledSettingsContainer>
62+
63+
<Title />
64+
</StyledHeader>
65+
);
66+
67+
export default Header;

‎src/components/ProgressBar.jsx‎

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
1-
/* eslint-disable */
21
import React from 'react';
32
import PropTypes from 'prop-types';
4-
import styled, { ThemeProvider } from 'styled-components';
3+
import styled from 'styled-components';
54
import { connect } from 'react-redux';
6-
import { commonTheme as theme } from '../styles/themes/theme.common';
75

86
const Container = styled.div`
97
display: flex;
108
height: 3px;
119
justify-content: space-between;
12-
margin: 0.5rem 0;
10+
margin: 1.25rem 0 1rem;
1311
width: 100%;
1412
`;
1513

@@ -24,29 +22,27 @@ export const ProgressBar = props => {
2422
const { answers, remaining } = props;
2523

2624
return (
27-
<ThemeProvider theme={theme}>
28-
<Container>
29-
{answers.map(pattern => {
30-
let nature;
31-
32-
if (pattern.answered) {
33-
nature = pattern.correct ? 'success' : 'error';
34-
}
35-
36-
return <Step key={pattern.uuid} nature={nature} />;
37-
})}
38-
39-
{remaining.map(pattern => (
40-
<Step key={pattern.uuid} />
41-
))}
42-
</Container>
43-
</ThemeProvider>
25+
<Container>
26+
{answers.map(pattern => {
27+
let nature;
28+
29+
if (pattern.answered) {
30+
nature = pattern.correct ? 'success' : 'error';
31+
}
32+
33+
return <Step key={pattern.uuid} nature={nature} />;
34+
})}
35+
36+
{remaining.map(pattern => (
37+
<Step key={pattern.uuid} />
38+
))}
39+
</Container>
4440
);
4541
};
4642

4743
ProgressBar.propTypes = {
4844
answers: PropTypes.array.isRequired,
49-
remaining: PropTypes.array.isRequired,
45+
remaining: PropTypes.array.isRequired
5046
};
5147

5248
const mapStateToProps = ({ progress: { answers, remaining } }) => ({ answers, remaining });

‎src/components/Title.jsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,18 @@ import withThemeProvider from '../hoc/withThemeProvider';
44

55
const StyledTitle = styled.h1`
66
font-family: 'Karla', sans-serif;
7-
padding: 2em;
8-
background: ${props => props.theme.background};
9-
font-size: 2em;
7+
padding: 1.5rem;
8+
border-radius: 4px;
9+
background: ${props => props.theme.headerBackground};
10+
font-size: 1.75rem;
11+
color: ${props => props.theme.orange};
12+
margin: 1rem 0 0 -50vw;
1013
text-align: center;
11-
color: #e22a23;
12-
margin: 0;
14+
left: 50%;
15+
max-width: 100vw;
16+
position: relative;
17+
right: 50%;
18+
width: 100vw;
1319
`;
1420

1521
export const Title = () => <StyledTitle>JavaScript Design Patterns</StyledTitle>;

‎src/components/ToggleButton.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const StyledToggleButton = styled.button`
1313
color: #999999;
1414
cursor: pointer;
1515
height: 2.5rem;
16-
margin: 1rem 0 0 1rem;
16+
margin: 0 0 0 1rem;
1717
outline: 0;
1818
width: 2.5rem;
1919

‎src/styles/themes/theme.common.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
export const commonTheme = {
1+
export const themeCommon = {
22
error: '#FF0000',
33
success: '#9ACD32',
4-
lightGrey: '#D8D8D8'
4+
lightGrey: '#D8D8D8',
5+
orange: '#e22a23'
56
};

‎src/styles/themes/theme.dark.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,6 @@ export const themeDark = {
55
buttonBorder: '#707070',
66
buttonBorderHover: '#c4c4c4',
77
buttonColor: '#f5f5f5',
8-
buttonColorHover: '#ffffff'
8+
buttonColorHover: '#ffffff',
9+
headerBackground: '#282828'
910
};

0 commit comments

Comments
 (0)