create casePage, greyBadge svd and theme for the page && displayed ba…

…dges to the page

Relates #10'

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;
+}

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} />

src/components/Image.js

@@ -7,26 +7,33 @@ 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;
 `;
 
 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>
   );
 };

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 = () => {

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)'
 };

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;

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>