Skip to content
This repository was archived by the owner on Jun 10, 2019. It is now read-only.

Commit 295a8e6

Browse files
CooperbuiltCooperbuilt
committed
Styles the 404 page and adds a swtich to router to allow for wildcard routing to 404 page
1 parent 1e83624 commit 295a8e6

3 files changed

Lines changed: 100 additions & 78 deletions

File tree

‎src/scenes/home/404/fourOhFour.css‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,26 @@
1-
.pageContainer .bg {
2-
position: absolute;
3-
top: 0;
4-
left: 0;
1+
.FourOhFour {
2+
width: 100vw;
3+
height: 100vh;
4+
background: #121212;
5+
}
6+
7+
.FourOhFour .bg {
8+
background-image: url('./404.gif');
59
width: 100vw;
610
height: 100vh;
711
background-size: cover;
8-
mix-blend-mode: overlay;
9-
}
12+
color: white;
13+
display:flex;
14+
flex-direction: column;
15+
justify-content: center;
16+
align-items: center;
17+
}
18+
19+
.title{
20+
font-size: 4rem;
21+
}
22+
23+
.paragraph {
24+
font-size: 1.4rem;
25+
}
26+

‎src/scenes/home/404/fourOhFour.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import React, { Component } from 'react';
2-
import Gif from './404.gif';
32
import styles from './fourOhFour.css';
43

54
export default class FourOhFour extends Component {
65

76
render() {
87
return (
9-
<div className={styles.pageContainer}>
10-
<img src={Gif} alt="Gif of a fake tank falling over" />
11-
<h1 className={styles.title}>404</h1>
8+
<div className={styles.FourOhFour}>
9+
<div className={styles.bg}>
10+
<h1 className={styles.title}>404!</h1>
11+
<p className={styles.paragraph}>You definitely weren&apos;t supposed to see this...</p>
12+
</div>
1213
</div>
1314
);
1415
}

‎src/scenes/home/home.js‎

Lines changed: 72 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable no-console, react/forbid-prop-types */
22

33
import React, { Component } from 'react';
4-
import { Route, withRouter } from 'react-router-dom';
4+
import { Route, withRouter, Switch } from 'react-router-dom';
55
import PropTypes from 'prop-types';
66
import classNames from 'classnames';
77
import * as CookieHelpers from 'shared/utils/cookieHelper';
@@ -83,73 +83,77 @@ class Home extends Component {
8383
>
8484
<Header transparent={this.state.bgImage} logOut={this.logOut} signedIn={signedIn} mentor={mentor} />
8585
<div className={styles.main} >
86-
<Route
87-
path="/home"
88-
component={Dashboard}
89-
/>
90-
<Route
91-
path="/code-schools"
92-
component={CodeSchools}
93-
/>
94-
<Route
95-
path="/code_schools"
96-
component={CodeSchools}
97-
/>
98-
<Route
99-
path="/signup"
100-
component={SignUp}
101-
/>
102-
<Route
103-
path="/join"
104-
component={SignUp}
105-
/>
106-
<Route
107-
path="/sign-up"
108-
component={SignUp}
109-
/>
110-
<Route
111-
path="/thanks"
112-
component={Thanks}
113-
/>
114-
<Route
115-
exact
116-
path="/"
117-
render={props => (
118-
<Landing {...props} />
119-
)}
120-
/>
121-
<Route
122-
path="/mentor-request"
123-
render={() => (
124-
<MentorRequest {...authProps} />
125-
)}
126-
/>
127-
<Route
128-
path="/requests"
129-
render={() => (
130-
<MentorRequestsTable {...authProps} />
131-
)}
132-
/>
133-
<Route
134-
path="/squads/new-squad"
135-
render={() => (
136-
<SquadsNew {...authProps} />
137-
)}
138-
/>
139-
<Route
140-
exact path="/mentors"
141-
render={() => (
142-
<MentorsTable {...authProps} />
143-
)}
144-
/>
145-
<Route
146-
path="/squads"
147-
render={() => (
148-
<SquadsTable {...authProps} />
149-
)}
150-
/>
151-
<Route exact path="/about/financial-statements" component={FinancialStatements} />
152-
<Route component={FourOhFour} />
86+
<Switch>
87+
<Route
88+
path="/home"
89+
component={Dashboard}
90+
/>
91+
<Route
92+
path="/code-schools"
93+
component={CodeSchools}
94+
/>
95+
<Route
96+
path="/code_schools"
97+
component={CodeSchools}
98+
/>
99+
<Route
100+
path="/signup"
101+
component={SignUp}
102+
/>
103+
<Route
104+
path="/join"
105+
component={SignUp}
106+
/>
107+
<Route
108+
path="/sign-up"
109+
component={SignUp}
110+
/>
111+
<Route
112+
path="/thanks"
113+
component={Thanks}
114+
/>
115+
<Route
116+
exact
117+
path="/"
118+
render={props => (
119+
<Landing {...props} />
120+
)}
121+
/>
122+
<Route
123+
path="/mentor-request"
124+
render={() => (
125+
<MentorRequest {...authProps} />
126+
)}
127+
/>
128+
<Route
129+
path="/requests"
130+
render={() => (
131+
<MentorRequestsTable {...authProps} />
132+
)}
133+
/>
134+
<Route
135+
path="/squads/new-squad"
136+
render={() => (
137+
<SquadsNew {...authProps} />
138+
)}
139+
/>
140+
<Route
141+
exact path="/mentors"
142+
render={() => (
143+
<MentorsTable {...authProps} />
144+
)}
145+
/>
146+
<Route
147+
path="/squads"
148+
render={() => (
149+
<SquadsTable {...authProps} />
150+
)}
151+
/>
152+
<Route exact path="/about/financial-statements" component={FinancialStatements} />
153+
<Route
154+
path="*" component={FourOhFour}
155+
/>
156+
</Switch>
153157
</div>
154158
<Footer />
155159
</div>

0 commit comments

Comments
 (0)