add badge page, add badge, fixed padding for landing page

Co-authored-by: My Hoa Tien <[email protected]>Relates #10
fac20 · Oct 21, 2020 · 4c679a0 · 4c679a0
1 parent fcdf5c6
commit 4c679a0
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 64 deletions.
diff --git 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
@@ -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 (
     <BrowserRouter>
@@ -38,7 +41,9 @@ function App() {
             <TryAgain />
           </Route>
           <Route path="/success" exact></Route>
-          <Route path="/badge" exact></Route>
+          <Route path="/badge" exact>
+            <BadgePage badgeType={badgeType} alias={alias} />
+          </Route>
           <Route path="/second-case-intro" exact></Route>
           <Route path="/second-case-task" exact></Route>
           <Route path="/third-case-intro" exact></Route>

diff --git 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 (
+    <BadgeContainer>
+      <BadgeTitle>{badgeType}</BadgeTitle>
+      <BadgeImage className="badge" />
+    </BadgeContainer>
+  );
+};
diff --git 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
diff --git 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
@@ -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 (
+    <ThemeProvider theme={badgePageTheme}>
+      <H1>You earned the badge!</H1>
+      <Text>Well done {alias}!</Text>
+      <Badge badgeType={badgeType} />
+      <Button>Accept</Button>
+    </ThemeProvider>
+  );
+};
+
+export default BadgePage;
diff --git a/src/pages/gameover.js → src/pages/gameoverPage.js b/src/pages/gameover.js → 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
@@ -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 (
-    <Container>
-      <ThemeProvider theme={landingPageTheme}>
-        <Title />
-        <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
@@ -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>
   );
 };