From 5194bb072503cdfb3e515faaa61911671cf60563 Mon Sep 17 00:00:00 2001
From: RihardsJ <rihards.jukna@gmail.com>
Date: Wed, 21 Oct 2020 13:41:32 +0100
Subject: [PATCH] create casePage, greyBadge svd and theme for the page &&
 displayed badges to the page Relates #10'

---
 src/App.css              | 10 ++++++++++
 src/App.js               | 12 +++++++++++-
 src/components/Image.js  | 19 +++++++++++++------
 src/components/Text.js   |  2 +-
 src/components/themes.js | 13 ++++++++++++-
 src/images/greyBadge.svg |  3 +++
 src/pages/casesPage.js   | 40 ++++++++++++++++++++++++++++++++++++++++
 src/pages/profile.js     |  3 ++-
 8 files changed, 92 insertions(+), 10 deletions(-)
 create mode 100644 src/images/greyBadge.svg
 create mode 100644 src/pages/casesPage.js

diff --git a/src/App.css b/src/App.css
index d0cce6e..7c60d85 100644
--- a/src/App.css
+++ b/src/App.css
@@ -28,6 +28,7 @@
 
 .avatar {
   height: 10rem;
+  width: 10rem;
   background-image: url(./images/avatar.svg);
   background-repeat: no-repeat;
   background-size: contain;
@@ -60,3 +61,12 @@
   background-size: contain;
   background-position: center;
 }
+
+.greyBadge {
+  height: 12rem;
+  width: 12rem;
+  background-image: url(./images/greyBadge.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
diff --git a/src/App.js b/src/App.js
index 0935ced..a856fbb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,11 +9,17 @@ import Profile from './pages/profile';
 import TryAgain from './pages/tryAgain';
 import GameOver from './pages/gameoverPage';
 import BadgePage from './pages/badgePage';
+import CasesPage from './pages/casesPage';
 
 function App() {
   const [points, setPoints] = React.useState(2);
-  const badgeType = 'Troll Hunter';
+  const badgeType = null;
   const alias = 'BrownFox';
+  const cases = {
+    case1: 'Troll Hunter',
+    case2: null,
+    case3: null
+  };
 
   return (
     <BrowserRouter>
@@ -29,6 +35,10 @@ function App() {
             <NavBar points={points} />
             <Profile />
           </Route>
+          <Route path="/cases" exact>
+            <NavBar points={points} />
+            <CasesPage alias={alias} cases={cases}></CasesPage>
+          </Route>
           <Route path="/first-case-intro" exact></Route>
           <Route path="/first-case-task" exact>
             <NavBar points={points} />
diff --git a/src/components/Image.js b/src/components/Image.js
index bb66c2b..0f7828d 100644
--- a/src/components/Image.js
+++ b/src/components/Image.js
@@ -7,17 +7,22 @@ export const Img = styled.img`
   border: solid red 3px;
 `;
 
-const BadgeImage = styled.div``;
+export const Avatar = styled.div``;
 
-const BadgeContainer = styled.div`
+export const BadgeImage = styled.div``;
+
+export 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};
+export const BadgeTitle = styled.h2`
+  color: ${props =>
+    props.badgeType === null
+      ? props.theme.badgeGreyColor
+      : props.theme.badgeTextColor};
   font-family: var(--title-font);
   margin-top: 0;
 `;
@@ -25,8 +30,10 @@ const BadgeTitle = styled.h2`
 export const Badge = ({ badgeType }) => {
   return (
     <BadgeContainer>
-      <BadgeTitle>{badgeType}</BadgeTitle>
-      <BadgeImage className="badge" />
+      <BadgeTitle badgeType={badgeType}>
+        {badgeType !== null ? badgeType : 'Earn a badge'}
+      </BadgeTitle>
+      <BadgeImage className={badgeType !== null ? 'badge' : 'greyBadge'} />
     </BadgeContainer>
   );
 };
diff --git a/src/components/Text.js b/src/components/Text.js
index 1c160a6..22271e9 100644
--- a/src/components/Text.js
+++ b/src/components/Text.js
@@ -21,7 +21,7 @@ export const MainTitle = styled.span`
 
 export const Text = styled.p`
   color: ${props => props.theme.textColor};
-  font-family: var(--title-font);
+  font-family: var(--info-font);
 `;
 
 export const Title = () => {
diff --git a/src/components/themes.js b/src/components/themes.js
index e981a67..c0f4325 100644
--- a/src/components/themes.js
+++ b/src/components/themes.js
@@ -37,5 +37,16 @@ export const badgePageTheme = {
   h1Color: 'var(--color-3)',
   btnColor: 'var(--color-3)',
   btnTextColor: 'var(--color-4)',
-  borderColor: 'var(--color-1)'
+  borderColor: 'var(--color-1)',
+  badgeGreyColor: 'var(--color-1)'
+};
+
+export const casesPageTheme = {
+  textColor: 'var(--color-3)',
+  h1Color: 'var(--color-5)',
+  btnColor: 'var(--color-3)',
+  btnTextColor: 'var(--color-4)',
+  borderColor: 'var(--color-1)',
+  badgeGreyColor: 'var(--color-1)',
+  badgeTextColor: 'var(--color-2)'
 };
diff --git a/src/images/greyBadge.svg b/src/images/greyBadge.svg
new file mode 100644
index 0000000..724a35d
--- /dev/null
+++ b/src/images/greyBadge.svg
@@ -0,0 +1,3 @@
+<svg width="145" height="177" viewBox="0 0 145 177" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M144.75 80.4167C144.75 125.048 113.87 166.784 72.375 176.917C30.88 166.784 0 125.048 0 80.4167V32.1667L72.375 0L144.75 32.1667V80.4167ZM72.375 160.833C102.531 152.792 128.667 116.926 128.667 82.1858V42.6208L72.375 17.5308L16.0833 42.6208V82.1858C16.0833 116.926 42.2188 152.792 72.375 160.833ZM96.9021 120.625L72.1338 105.748L47.4458 120.625L53.9596 92.4792L32.1667 73.6617L60.9558 71.1687L72.1338 44.6312L83.3921 71.0883L112.181 73.5812L90.3079 92.4792L96.9021 120.625Z" fill="none" stroke="#9BA4C1" />
+</svg>
\ No newline at end of file
diff --git a/src/pages/casesPage.js b/src/pages/casesPage.js
new file mode 100644
index 0000000..9c42c3c
--- /dev/null
+++ b/src/pages/casesPage.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { Badge, Avatar } from '../components/Image';
+import { H1, H2, Text } from '../components/Text';
+import { casesPageTheme } from './../components/themes';
+import styled from 'styled-components';
+
+const BadgeDisplay = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 90%;
+`;
+
+const SubTitle = styled(H2)`
+  margin-left: 4rem;
+  align-self: flex-start;
+`;
+
+const CasesPage = ({ alias, cases }) => {
+  const displayBadges = cases => {
+    let badgeArray = [];
+    for (const property in cases) {
+      badgeArray.push(<Badge badgeType={cases[property]} />);
+    }
+    return badgeArray;
+  };
+
+  const Badges = displayBadges(cases);
+
+  return (
+    <ThemeProvider theme={casesPageTheme}>
+      <H1>Cases solved</H1>
+      <Avatar className="avatar" />
+      <Text>Alias: {alias}</Text>
+      <SubTitle>Badges</SubTitle>
+      <BadgeDisplay>{Badges}</BadgeDisplay>
+    </ThemeProvider>
+  );
+};
+export default CasesPage;
diff --git a/src/pages/profile.js b/src/pages/profile.js
index 443d049..185d736 100644
--- a/src/pages/profile.js
+++ b/src/pages/profile.js
@@ -6,6 +6,7 @@ import { Container } from './../components/Forms';
 import { ThemeProvider } from 'styled-components';
 import { ratingPageTheme } from './../components/themes';
 import RatingBar from '../components/RatingBar.js';
+import { Avatar } from '../components/Image';
 
 const Profile = () => {
   const history = useHistory();
@@ -17,7 +18,7 @@ const Profile = () => {
     <Container>
       <ThemeProvider theme={ratingPageTheme}>
         <H1>Hello Brown Fox!</H1>
-        <div className="avatar" />
+        <Avatar className="avatar" />
         <H2>RATE YOUR SKILLS!</H2>
         <RatingBar />
         <Button onClick={createProfile}>START YOUR FIRST TASK</Button>