From 4c679a09c8db5e17f2ef8d5e00812cb11cd620e6 Mon Sep 17 00:00:00 2001 From: RihardsJ Date: Wed, 21 Oct 2020 11:31:53 +0100 Subject: [PATCH] add badge page, add badge, fixed padding for landing page Co-authored-by: My Hoa Tien Relates #10 --- src/App.css | 48 ++++++++-------------- src/App.js | 9 +++- src/components/Image.js | 25 +++++++++++ src/components/themes.js | 11 +++++ src/images/badge.svg | 3 ++ src/index.css | 31 ++++++++++---- src/pages/badgePage.js | 19 +++++++++ src/pages/{gameover.js => gameoverPage.js} | 2 +- src/pages/landingPage.js | 14 +++---- src/pages/tryAgain.js | 25 +++++------ 10 files changed, 123 insertions(+), 64 deletions(-) create mode 100644 src/images/badge.svg create mode 100644 src/pages/badgePage.js rename src/pages/{gameover.js => gameoverPage.js} (93%) diff --git a/src/App.css b/src/App.css index 0602429..d0cce6e 100644 --- a/src/App.css +++ b/src/App.css @@ -1,27 +1,7 @@ .App { - /* root colours and fonts go there */ - /* light grey */ - --color-1: hsl(225.8, 23.5%, 68.2%); - - /* mustard yellow */ - --color-2: hsl(52.5, 65.4%, 47.6%); - - /* cyan */ - --color-3: hsl(167.4, 67.3%, 55.7%); - - /* dark grey */ - --color-4: hsl(224.2, 17.1%, 21.8%); - - /* white */ - --color-5: hsl(0, 0%, 100%); - - --title-font: 'Orbitron', sans-serif; - --info-font: 'Aldrich', sans-serif; -} - -.App { - height: 100vh; - background-color: var(--color-4); + display: flex; + flex-direction: column; + align-items: center; } @keyframes globe { @@ -35,6 +15,7 @@ .globe { height: 10rem; + width: 10rem; background-image: url(./images/globe.svg); background-repeat: no-repeat; background-size: contain; @@ -51,26 +32,31 @@ background-repeat: no-repeat; background-size: contain; background-position: center; - animation-iteration-count: infinite; - animation-timing-function: linear; } .skull { - height: 10rem; + height: 12rem; + width: 12rem; background-image: url(./images/skull.svg); background-repeat: no-repeat; background-size: contain; background-position: center; - animation-iteration-count: infinite; - animation-timing-function: linear; } .alert { - height: 10rem; + height: 12rem; + width: 12rem; background-image: url(./images/alert.svg); background-repeat: no-repeat; background-size: contain; background-position: center; - animation-iteration-count: infinite; - animation-timing-function: linear; +} + +.badge { + height: 12rem; + width: 12rem; + background-image: url(./images/badge.svg); + background-repeat: no-repeat; + background-size: contain; + background-position: center; } diff --git a/src/App.js b/src/App.js index e7b918b..0935ced 100644 --- a/src/App.js +++ b/src/App.js @@ -7,10 +7,13 @@ import TrainingManual from './pages/trainingManual'; import FirstCasePage from './pages/firstCasePage'; import Profile from './pages/profile'; import TryAgain from './pages/tryAgain'; -import GameOver from './pages/gameover'; +import GameOver from './pages/gameoverPage'; +import BadgePage from './pages/badgePage'; function App() { const [points, setPoints] = React.useState(2); + const badgeType = 'Troll Hunter'; + const alias = 'BrownFox'; return ( @@ -38,7 +41,9 @@ function App() { - + + + diff --git a/src/components/Image.js b/src/components/Image.js index ff85937..bb66c2b 100644 --- a/src/components/Image.js +++ b/src/components/Image.js @@ -1,7 +1,32 @@ import styled from 'styled-components'; +import React from 'react'; export const Img = styled.img` width: 80vw; height: 60vh; border: solid red 3px; `; + +const BadgeImage = styled.div``; + +const BadgeContainer = styled.div` + border: 5px solid; + padding: 2rem; + border-radius: 50px; + border-color: ${props => props.theme.borderColor}; +`; + +const BadgeTitle = styled.h2` + color: ${props => props.theme.badgeTextColor}; + font-family: var(--title-font); + margin-top: 0; +`; + +export const Badge = ({ badgeType }) => { + return ( + + {badgeType} + + + ); +}; diff --git a/src/components/themes.js b/src/components/themes.js index deda05c..e981a67 100644 --- a/src/components/themes.js +++ b/src/components/themes.js @@ -1,3 +1,5 @@ +import { findByLabelText } from '@testing-library/react'; + export const landingPageTheme = { btnColor: 'var(--color-2)', btnTextColor: 'var(--color-4)', @@ -28,3 +30,12 @@ export const gameOverPageTheme = { btnColor: 'var(--color-3)', btnTextColor: 'var(--color-4)' }; + +export const badgePageTheme = { + textColor: 'var(--color-5)', + badgeTextColor: 'var(--color-2)', + h1Color: 'var(--color-3)', + btnColor: 'var(--color-3)', + btnTextColor: 'var(--color-4)', + borderColor: 'var(--color-1)' +}; diff --git a/src/images/badge.svg b/src/images/badge.svg new file mode 100644 index 0000000..99e1c89 --- /dev/null +++ b/src/images/badge.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/index.css b/src/index.css index ec2585e..5092138 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,28 @@ +:root { + /* root colours and fonts go there */ + /* light grey */ + --color-1: hsl(225.8, 23.5%, 68.2%); + + /* mustard yellow */ + --color-2: hsl(52.5, 65.4%, 47.6%); + + /* cyan */ + --color-3: hsl(167.4, 67.3%, 55.7%); + + /* dark grey */ + --color-4: hsl(224.2, 17.1%, 21.8%); + + /* white */ + --color-5: hsl(0, 0%, 100%); + + --title-font: 'Orbitron', sans-serif; + --info-font: 'Aldrich', sans-serif; +} + body { + text-align: center; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + background-color: var(--color-4); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/pages/badgePage.js b/src/pages/badgePage.js new file mode 100644 index 0000000..dff5758 --- /dev/null +++ b/src/pages/badgePage.js @@ -0,0 +1,19 @@ +import React from 'react'; +import { ThemeProvider } from 'styled-components'; +import { badgePageTheme } from './../components/themes'; +import { H1, Text } from './../components/Text'; +import { Badge } from './../components/Image'; +import { Button } from './../components/Buttons'; + +const BadgePage = ({ alias, badgeType }) => { + return ( + +

You earned the badge!

+ Well done {alias}! + + + + ); +}; + +export default BadgePage; diff --git a/src/pages/gameover.js b/src/pages/gameoverPage.js similarity index 93% rename from src/pages/gameover.js rename to src/pages/gameoverPage.js index 9f87723..c9b1aa3 100644 --- a/src/pages/gameover.js +++ b/src/pages/gameoverPage.js @@ -5,7 +5,7 @@ import { ThemeProvider } from 'styled-components'; import { H1, H2 } from '../components/Text'; import { Container } from '../components/Forms'; -import { gameOverPageTheme } from './../components/themes'; +import { gameOverPageTheme } from '../components/themes'; const GameOver = () => { const history = useHistory(); diff --git a/src/pages/landingPage.js b/src/pages/landingPage.js index 7d833a0..b19766e 100644 --- a/src/pages/landingPage.js +++ b/src/pages/landingPage.js @@ -4,19 +4,17 @@ import { LandingPageForm } from './../components/Forms'; import { ThemeProvider } from 'styled-components'; import { landingPageTheme } from './../components/themes'; import { useHistory } from 'react-router-dom'; -import { Container } from './../components/Forms'; +// import { Container } from './../components/Forms'; const LandingPage = () => { const history = useHistory(); history.push('/'); return ( - - - - <div className="globe" /> - <LandingPageForm /> - </ThemeProvider> - </Container> + <ThemeProvider theme={landingPageTheme}> + <Title /> + <div className="globe" /> + <LandingPageForm /> + </ThemeProvider> ); }; diff --git a/src/pages/tryAgain.js b/src/pages/tryAgain.js index befe68f..46feaa5 100644 --- a/src/pages/tryAgain.js +++ b/src/pages/tryAgain.js @@ -5,7 +5,6 @@ import { useHistory } from 'react-router-dom'; import { ThemeProvider } from 'styled-components'; import { H1, H2 } from '../components/Text'; -import { Container } from '../components/Forms'; import { gameOverPageTheme } from './../components/themes'; const TryAgain = () => { @@ -15,19 +14,17 @@ const TryAgain = () => { }; return ( - <Container> - <ThemeProvider theme={gameOverPageTheme}> - <H1>Incorrect!</H1> - <div className="alert" /> - <H2> - Have a look at the case again. - <br /> If you are unsure information is - <br /> true,try to look it up and see if more - <br /> than one trusted source is reporting it. - </H2> - <Button onClick={createProfile}>TRY AGAIN</Button> - </ThemeProvider> - </Container> + <ThemeProvider theme={gameOverPageTheme}> + <H1>Incorrect!</H1> + <div className="alert" /> + <H2> + Have a look at the case again. + <br /> If you are unsure information is + <br /> true,try to look it up and see if more + <br /> than one trusted source is reporting it. + </H2> + <Button onClick={createProfile}>TRY AGAIN</Button> + </ThemeProvider> ); };