revise page - questionnair UI

src/App.tsx

@@ -1,5 +1,6 @@
 import { Home } from "./components/home/Home";
-import { Categories } from './components/categories/Categories'
+import { Categories } from './components/categories/Categories';
+import { Revise } from './components/revise/Revise';
 import { Tabs } from "./components/tabs/Tabs";
 import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
 
@@ -9,6 +10,7 @@ function App() {
             <Switch>
                 <Route path="/home" component={Home} />
                 <Route path="/categories" component={Categories} />
+                <Route path="/revise" component={Revise} />
                 <Redirect from="/" to="/home" />
             </Switch>
             <Tabs />

src/assets/icons/check.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="11.97" height="8.979" viewBox="0 0 11.97 8.979">
   <g id="check" transform="translate(-9.514 -11.635)">
-    <path id="Path_7" data-name="Path 7" d="M14,17.621,11.01,14.629l-1.5,1.5L14,20.614l7.48-7.482-1.495-1.5Z" transform="translate(0)" fill="#fff"/>
+    <path id="Path_7" data-name="Path 7" d="M14,17.621,11.01,14.629l-1.5,1.5L14,20.614l7.48-7.482-1.495-1.5Z" transform="translate(0)"/>
   </g>
 </svg>

src/assets/icons/timer.svg

@@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20.407" viewBox="0 0 18 20.407">
   <g id="timer" transform="translate(-5.76 -2.25)">
-    <path id="Path_8" data-name="Path 8" d="M16.875,12.375h1.573v7.08H16.875Z" transform="translate(-3.342 -3.045)" fill="#918f86"/>
-    <path id="Path_9" data-name="Path 9" d="M14.625,2.25h4.72V3.823h-4.72Z" transform="translate(-2.666)" fill="#918f86"/>
-    <path id="Path_10" data-name="Path 10" d="M23.76,9.13,22.643,8.021l-1.77,1.77a8.606,8.606,0,1,0,.928,1.3ZM14.319,22.5a7.08,7.08,0,1,1,7.08-7.08,7.08,7.08,0,0,1-7.08,7.08Z" transform="translate(0 -1.374)" fill="#918f86"/>
+    <path id="Path_8" data-name="Path 8" d="M16.875,12.375h1.573v7.08H16.875Z" transform="translate(-3.342 -3.045)"/>
+    <path id="Path_9" data-name="Path 9" d="M14.625,2.25h4.72V3.823h-4.72Z" transform="translate(-2.666)"/>
+    <path id="Path_10" data-name="Path 10" d="M23.76,9.13,22.643,8.021l-1.77,1.77a8.606,8.606,0,1,0,.928,1.3ZM14.319,22.5a7.08,7.08,0,1,1,7.08-7.08,7.08,7.08,0,0,1-7.08,7.08Z" transform="translate(0 -1.374)"/>
   </g>
 </svg>

src/components/revise/Revise.module.scss

@@ -0,0 +1,21 @@
+.revisePage {
+    width: 100vw;
+    height: 100vh;
+    background-color: white;
+    position: relative;
+    z-index: 2;
+}
+
+.finishButton {
+    width: 10rem;
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: white;
+    background-color: var(--teal);
+    margin: 0 auto;
+    display: block;
+    border: none;
+    border-radius: 3rem;
+    height: 3rem;
+    cursor: pointer;
+}

src/components/revise/Revise.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import { NavLink } from "react-router-dom";
+import styles from './Revise.module.scss';
+
+import { Question } from "./question/Question";
+import { Summary } from "./summary/Summary";
+
+export const Revise: React.FC = () => {
+    const [progressState, setProgressState] = useState<'INTRO' | 'QUESTION' | 'END'>('QUESTION');
+
+    return <section className={styles.revisePage}>
+        { progressState === 'QUESTION' && <div>
+            <Question />
+
+            <button className={styles.finishButton} onClick={() => setProgressState('END')}>
+                Finish
+            </button>
+        </div> }
+
+
+        { progressState === 'END' && <div>
+            <Summary />
+
+            <NavLink to={'/home'}>
+                <button className={styles.finishButton}>
+                    Done
+                </button>
+            </NavLink>
+        </div> }
+    </section>
+}

src/components/revise/options/Options.module.scss

@@ -0,0 +1,52 @@
+.optionsHolder {
+    list-style: none;
+
+    li {
+        display: flex;
+        width: 100%;
+        border: 0.1rem solid var(--lighter-grey);
+        padding: 0 0.9rem 0 1.5rem;
+        border-radius: 3rem;
+        height: 3.5rem;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 1rem;
+        cursor: pointer;
+
+        &.active {
+            border-color: var(--teal);
+
+            p {
+                color: var(--teal);
+            }
+
+            .checkmark {
+                border-color: var(--teal);
+                background-color: var(--teal);
+
+                svg {
+                    fill: white;
+                }
+            }
+        }
+
+        p {
+            font-size: 1.2rem;
+            font-weight: 500;
+            color: var(--black);
+        }
+
+        .checkmark {
+            width: 1.8rem;
+            height: 1.8rem;
+            border: 1px solid var(--lighter-grey);
+            border-radius: 50%;
+
+            svg {
+                width: 100%;
+                height: 100%;
+                transform: scale(0.7);
+            }
+        }
+    }
+}

src/components/revise/options/Options.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import styles from './Options.module.scss';
+import { ReactComponent as CheckCircleIcon } from '../../../assets/icons/check.svg';
+
+export const Options: React.FC = () => {
+    return <ul className={styles.optionsHolder}>
+                <li className={styles.active}>
+                    <p>
+                        Argentina &amp; Leo Messi
+                    </p>
+                    <div className={styles.checkmark}>
+                        <CheckCircleIcon />
+                    </div>
+                </li>
+
+                <li>
+                    <p>
+                        Brazil &amp; Neymar
+                    </p>
+                    <div className={styles.checkmark}>
+                        
+                    </div>
+                </li>
+
+                <li>
+                    <p>
+                        Chile &amp; Sanchez
+                    </p>
+                    <div className={styles.checkmark}>
+                        
+                    </div>
+                </li>
+
+                <li>
+                    <p>
+                        Mexico &amp; Chicharito
+                    </p>
+                    <div className={styles.checkmark}>
+                        
+                    </div>
+                </li>
+            </ul>;
+}

src/components/revise/question/Question.module.scss

@@ -0,0 +1,79 @@
+$common-width: calc(100% - 4rem);
+
+.questionHolder {
+    height: calc(100vh - 8rem);
+    padding-top: 2rem;
+    overflow: auto;
+}
+
+.progressBarHolder {
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    z-index: 1;
+    width: calc(100% - 5rem);
+    border: 2px solid var(--lighter-grey);
+    margin: 0 auto 2rem;
+    border-radius: 3rem;
+    height: 3rem;
+    padding: 0.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    .progressBar {
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, var(--red), var(--blue));
+        border-radius: inherit;
+    }
+
+    .text {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        color: white;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.4rem;
+    }
+
+    svg {
+        position: absolute;
+        right: 0.4rem;
+        top: 0.4rem;
+        width: 1.8rem;
+        height: 1.8rem;
+        fill: var(--light-grey);
+    }
+}
+
+.questionCount {
+    color: var(--light-grey);
+    font-size: 1.6rem;
+    width: #{$common-width};
+    margin: 0 auto;
+    padding-bottom: 1.5rem;
+    margin-bottom: 2rem;
+    border-bottom: 0.2rem dashed var(--lighter-grey);
+
+    span {
+        font-weight: 300;
+        font-size: 1.4rem;
+    }
+}
+
+.question {
+    width: #{$common-width};
+    margin: 0 auto 2rem;
+    font-size: 1.6rem;
+    color: var(--black);
+}
+
+.answerTypes {
+    width: #{$common-width};
+    margin: 0 auto 2rem;
+}

src/components/revise/question/Question.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import styles from './Question.module.scss';
+import { ReactComponent as TimeIcon } from '../../../assets/icons/timer.svg';
+import { Options } from "../options/Options";
+
+export const Question: React.FC = () => {
+    return <section className={styles.questionHolder}>
+        <div className={styles.progressBarHolder}>
+            <span className={styles.progressBar} style={{width: '60%'}}></span>
+            <span className={styles.text}> 30 </span>
+            <TimeIcon />
+        </div>
+
+        <h3 className={styles.questionCount}> Question 10/<span>10</span> </h3>
+
+        <h3 className={styles.question}> Who won Copa America 2021 and who was the Captian? </h3>        
+
+        <section className={styles.answerTypes}>
+            <Options />
+        </section>
+    </section>
+}

src/components/revise/summary/Summary.module.scss

@@ -0,0 +1,34 @@
+.upfold {
+    width: 100vw;
+    height: 30rem;
+    margin-bottom: 17rem;
+    position: relative;
+    background-color: transparent;
+
+    &::before {
+        content: '';
+        position: absolute;
+        left: calc(50% - 15rem);
+        top: 0;
+        width: 30rem;
+        height: 30rem;
+        background-color: var(--dark-blue);
+        border-radius: 10rem;
+        transform: scale(1.8)translateY(-6rem);
+    }
+
+    h4 {
+        color: white;
+        font-size: 1.6rem;
+        text-align: center;
+    }
+
+    .medalHolder {
+        width: 30rem;
+        height: 30rem;
+        background-color: var(--dark-blue);
+        border-radius: 50%;
+        margin: 0 auto;
+        margin-top: 12rem;
+    }
+}

src/components/revise/summary/Summary.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from './Summary.module.scss';
+
+export const Summary: React.FC = () => {
+    return <section>
+        <section className={styles.upfold}>
+            <h4> Revision Completed </h4>
+
+            <div className={styles.medalHolder}>
+                
+            </div>
+        </section>
+    </section>
+}

src/components/tabs/Tabs.module.scss

@@ -12,6 +12,7 @@ $tab-width: 95vw;
     height: 5rem;
     align-items: center;
     justify-content: center;
+    z-index: 1;
 
     button, a {
         width: calc(#{$tab-width} / 5);

src/components/tabs/Tabs.tsx

@@ -9,18 +9,18 @@ import { ReactComponent as MoreIcon } from '../../assets/icons/more-vertical.svg
 import { NavLink } from "react-router-dom";
 
 export const Tabs: React.FC = () => {
-    return <section className={styles.tabs}>
+    return <section className={styles.tabs} id="tabs">
         <NavLink to={'/home'} activeClassName={styles.active}>
             <HomeIcon />
         </NavLink >
         <NavLink  to={'/categories'} activeClassName={styles.active}>
             <GridIcon />
         </NavLink >
-        <div className={styles.utility}>
+        <NavLink to={'/revise'} className={styles.utility}>
             <button>
                 <BookIcon />
             </button>
-        </div>
+        </NavLink>
         <button>
             <StatsIcon />
         </button>

src/index.css

@@ -13,11 +13,13 @@
     --orange: #f1be83;
     --red: #d47077;
     --blue: #668fe1;
+    --dark-blue: #11253d;
     --teal: #4e9096;
     --black: #11253d;
     --brownish-black: #472020;
     --grey: #586471;
     --light-grey: #84919e;
+    --lighter-grey: #d5e0ec;
     --creamy-white: #fef8ec;
     font-size: 62.5%;
 }