Skip to content

Commit 5a97643

Browse files
bantek89bantek89
committed
results page styling
2 parents c1c7735 + 43fdd60 commit 5a97643

22 files changed

+386
-143
lines changed

‎package-lock.json

+19-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,14 @@
1111
"eslint-plugin-node": "^9.1.0",
1212
"eslint-plugin-react": "^7.13.0",
1313
"husky": "^2.4.0",
14+
"is-touch-device": "^1.0.1",
1415
"lint-staged": "^8.2.0",
1516
"node-fetch": "^2.6.0",
1617
"prettier": "^1.18.1",
1718
"react": "^16.8.6",
1819
"react-dnd": "^7.6.0",
1920
"react-dnd-html5-backend": "^7.6.0",
21+
"react-dnd-touch-backend": "^0.8.3",
2022
"react-dom": "^16.8.6",
2123
"react-modal": "^3.8.1",
2224
"react-router-dom": "^5.0.1",

‎public/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
5+
<!-- <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> -->
66
<link
77
href="https://fonts.googleapis.com/css?family=Bangers&display=swap"
88
rel="stylesheet"
@@ -23,7 +23,7 @@
2323
work correctly both with client-side routing and a non-root public URL.
2424
Learn how to configure a non-root public URL by running `npm run build`.
2525
-->
26-
<title>React App</title>
26+
<title>RECYLCING HEROES</title>
2727
</head>
2828
<body>
2929
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App/App.js

+6-21
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,18 @@
11
import React from "react";
2-
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
2+
import { BrowserRouter as Router, Route } from "react-router-dom";
33

4-
import Game from "../components/game/Game";
5-
import Main from "../components/main/Main";
4+
import Game from "../components/game/GameContainer";
65
import Home from "../components/home/Home";
76
import Results from "../components/results/Results";
87
import FactPage from "../components/factPage/FactPage";
98

10-
// import fetchData from "../utils/fetchData";
11-
129
function App() {
13-
// const [data, setData] = React.useState(null);
14-
15-
// React.useEffect(() => {
16-
// fetchData(setData);
17-
// }, []);
18-
19-
// if (!data) return <div>Loading...</div>;
20-
2110
return (
2211
<Router>
23-
<Main>
24-
<Route exact path="/" component={Home} />
25-
<Route path="/game" component={Game} />
26-
<Route path="/factpage" component={FactPage} />
27-
<Route path="/results" component={Results} />
28-
{/* <Superhero character={ninja} />
29-
<SmallButton onClick={handleSetNinja}>Click me!</SmallButton> */}
30-
</Main>
12+
<Route exact path="/" component={Home} />
13+
<Route path="/game" component={Game} />
14+
<Route path="/factpage" component={FactPage} />
15+
<Route path="/results" component={Results} />
3116
</Router>
3217
);
3318
}

‎src/assets/FactBubble.png

49.1 KB
Loading

‎src/assets/GreenComicBG.jpg

31.3 KB
Loading

‎src/assets/RecyclingHeroesLogo.png

140 KB
Loading

‎src/assets/RecyclingHeroesTitle.png

16.6 KB
Loading

‎src/components/avatars/Ninja.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import React from "react";
33
const Ninja = ({ colours }) => {
44
return (
55
<svg
6-
width="512"
7-
height="512"
6+
width="6rem"
7+
height="6rem"
88
viewBox="0 0 512 512"
99
fill="none"
1010
xmlns="http://www.w3.org/2000/svg"

‎src/components/button/Button.js

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import React from "react";
2-
import { StyledSmallButton, StyledLargeButton } from "./Button.style";
2+
import {
3+
StyledSmallButton,
4+
StyledLargeButton,
5+
StyledInactiveButton,
6+
} from "./Button.style";
37

48
const SmallButton = props => {
59
return (
@@ -17,4 +21,8 @@ const LargeButton = props => {
1721
);
1822
};
1923

20-
export { SmallButton, LargeButton };
24+
const InactiveButton = props => {
25+
return <StyledInactiveButton>{props.children}</StyledInactiveButton>;
26+
};
27+
28+
export { SmallButton, LargeButton, InactiveButton };

‎src/components/button/Button.style.js

+10-5
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ const StyledButton = styled.button`
77
font-weight: normal;
88
font-size: 2em;
99
padding: 0.5em;
10-
color: black
11-
background: white;
10+
color: black;
11+
background-color: white;
1212
border: 4px solid black;
1313
box-sizing: border-box;
1414
border-radius: 3em;
1515
width: ${props => props.length}em;
16-
cursor: pointer
16+
cursor: pointer;
1717
`;
1818

1919
const StyledSmallButton = styled(StyledButton)`
@@ -25,10 +25,15 @@ const StyledSmallButton = styled(StyledButton)`
2525

2626
const StyledLargeButton = styled(StyledButton)`
2727
width: 32rem;
28-
margin: auto;
2928
@media only screen and (max-width: 768px) {
3029
width: 16rem;
3130
}
3231
`;
3332

34-
export { StyledSmallButton, StyledLargeButton };
33+
const StyledInactiveButton = styled(StyledLargeButton)`
34+
background-color: grey;
35+
opacity: 0.5;
36+
cursor: default;
37+
`;
38+
39+
export { StyledSmallButton, StyledLargeButton, StyledInactiveButton };

‎src/components/factPage/FactPage.js

+42-12
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,51 @@
11
import React from "react";
22
import { Link } from "react-router-dom";
3+
import Header from "../header/Header";
4+
import Main from "../main/Main";
5+
6+
import {
7+
StyledFactPage,
8+
FactBubble,
9+
FactBubbleContainer,
10+
FactBubbleFact,
11+
WiseManContainer,
12+
WiseMan,
13+
WiseManText,
14+
} from "./FactPage.style";
15+
import { LargeButton } from "../button/Button";
16+
import FactBubbleImg from "../../assets/FactBubble.png";
17+
import WiseManSvg from "../avatars/wise-man.svg";
318

419
const FactPage = ({ location: { score, data } }) => {
5-
console.log(data);
620
return (
721
<React.Fragment>
8-
<p>Hey, well done! Just before we see your score, did you know:</p>
9-
<div>{data[0].Fact}</div>
10-
<Link
11-
to={{
12-
pathname: "/results",
13-
items: data,
14-
score: score,
15-
}}
16-
>
17-
See Your Results!
18-
</Link>
22+
<Header text="Results" />
23+
<Main>
24+
<StyledFactPage>
25+
<WiseManContainer>
26+
<WiseManText>
27+
Hey, well done! Just before we see your score, did
28+
you know:
29+
</WiseManText>
30+
<WiseMan src={WiseManSvg} />
31+
</WiseManContainer>
32+
33+
<FactBubbleContainer>
34+
<FactBubbleFact>{data[0].Fact}</FactBubbleFact>
35+
<FactBubble src={FactBubbleImg} />
36+
</FactBubbleContainer>
37+
38+
<Link
39+
to={{
40+
pathname: "/results",
41+
score: score,
42+
items: data,
43+
}}
44+
>
45+
<LargeButton>See Your Results!</LargeButton>
46+
</Link>
47+
</StyledFactPage>
48+
</Main>
1949
</React.Fragment>
2050
);
2151
};

‎src/components/factPage/FactPage.style.js

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import styled from "styled-components";
2+
import GreenComicBG from "../../assets/GreenComicBG.jpg";
3+
import FactBubbleImg from "../../assets/FactBubble.png";
4+
5+
const StyledFactPage = styled.div`
6+
background-image: url(${GreenComicBG});
7+
background-repeat: no-repeat;
8+
background-size: cover;
9+
background-position: center center;
10+
font-family: Bangers;
11+
font-style: normal;
12+
font-weight: normal;
13+
display: flex;
14+
flex-wrap: wrap;
15+
justify-content: center;
16+
`;
17+
const FactBubbleContainer = styled.div`
18+
width: 40em;
19+
height: 32em;
20+
position: relative;
21+
display: flex;
22+
justify-content: center;
23+
`;
24+
25+
const FactBubble = styled.img`
26+
width: 40em;
27+
height: auto;
28+
`;
29+
const FactBubbleFact = styled.div`
30+
width: 16em;
31+
text-align: center;
32+
font-size: 1.5em;
33+
margin: auto;
34+
position: absolute;
35+
height: inherit;
36+
display: flex;
37+
flex-direction: column;
38+
justify-content: center;
39+
transform: rotate(-20deg);
40+
`;
41+
42+
const WiseManContainer = styled.div`
43+
width: 32em;
44+
`;
45+
46+
const WiseManText = styled.div`
47+
width: fit-content;
48+
border: 4px solid black;
49+
border-radius: 1em;
50+
background-color: white;
51+
padding: 1em;
52+
margin: 3em;
53+
`;
54+
55+
const WiseMan = styled.img`
56+
width: 16em;
57+
`;
58+
59+
export {
60+
StyledFactPage,
61+
FactBubble,
62+
FactBubbleContainer,
63+
FactBubbleFact,
64+
WiseManContainer,
65+
WiseMan,
66+
WiseManText,
67+
};

0 commit comments

Comments
 (0)