partially created assignment and submit assignment page

src/App.tsx

@@ -26,6 +26,9 @@ import Quiz from './pages/Quiz/Quiz';
 import PreliminaryRoundResults from './pages/preliminaryRoundResults/PreliminaryRoundResults';
 import TechnicalInterview from './pages/technicalInterview/TechnicalInterview';
 import TimeSlot from './components/timeSlot/TimeSlot';
+import Assignment from './pages/assignment/Assignment';
+import AssignmentDetails from './pages/assignment/AssignmentDetails';
+import SubmitAssignment from './pages/assignment/SubmitAssignment';
 
 
 
@@ -53,6 +56,16 @@ const App: React.FC = () => (
         <Route exact path="/technicalInterview">
           <TechnicalInterview />
         </Route>
+        <Route exact path="/assignment">
+          <Assignment />
+        </Route>
+        <Route exact path="/assignmentDetails">
+          <AssignmentDetails />
+        </Route>
+        <Route exact path="/SubmitAssignment">
+          <SubmitAssignment />
+        </Route>
+
         <Route exact path="/">
           <Redirect to="/interviewRounds" />
         </Route>

src/components/formInput/Input.module.scss

@@ -17,8 +17,8 @@ $dim-grey: #696969;
 }
 
 ion-icon {
-    width: 1rem;
-    height: 1rem;
+    width: 1.5rem;
+    height: 1.5rem;
 }
 
 ion-input {

src/components/stepsHeader/StepHeader.tsx

@@ -2,6 +2,7 @@ import styles from './StepHeader.module.scss';
 
 import { IonHeader, IonIcon } from '@ionic/react';
 import { closeOutline } from 'ionicons/icons'
+import { Link } from 'react-router-dom';
 
 interface Props {
     stepNumber: number;
@@ -15,7 +16,9 @@ const StepHeader: React.FC<Props> = (props) => {
                 <div className={styles.step}>Step {props.stepNumber}</div>
                 <h3 className={styles.roundName}>{props.roundName}</h3>
             </div>
+            {/* <Link to="/interviewRounds"> */}
             <IonIcon icon={closeOutline}></IonIcon>
+            {/* </Link> */}
         </header>
     )
 }

src/pages/Quiz/Quiz.tsx

@@ -1,6 +1,6 @@
 import styles from './Quiz.module.scss';
 
-import { IonButton, IonCheckbox, IonIcon, IonItem, IonLabel, IonPage, IonRadio } from '@ionic/react';
+import { IonButton, IonIcon } from '@ionic/react';
 import Options from './Options';
 import { closeOutline } from 'ionicons/icons'
 import { Link } from 'react-router-dom';

src/pages/assignment/Assignment.module.scss

@@ -0,0 +1,46 @@
+.assignment {
+
+    .description {
+        .icon {
+            margin-top: 4rem;
+            display: flex;
+            justify-content: center;
+            ion-icon {
+                width: 10rem;
+                height: 10rem;
+            }
+        }
+
+        .stepDescription {
+            h4 {
+                color: #363636;
+                text-align: center;
+                font-size: 2.4rem;
+                font-weight: 300;
+                letter-spacing: 0.024rem;
+                margin-top: 3rem;
+            }
+            p {
+                color: #868686;
+                font-size: 1.4rem;
+                text-align: center;
+                width: 90%;
+                margin: 0 auto;
+                margin-top: 2rem;
+                line-height: 1.8;
+            }
+        }
+    }
+
+    .assignmentButton {
+        text-decoration: none;
+        
+        ion-button {
+            width: 95%;
+            margin: 0 auto;
+            margin-top: 35vh;
+            margin-bottom: 0;
+            --background: var(--primary-button-color);
+        }
+    }
+}

src/pages/assignment/Assignment.tsx

@@ -0,0 +1,36 @@
+import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
+import StepHeader from "../../components/stepsHeader/StepHeader";
+import assignmentImage from "../../assets/icons/Assignment.svg";
+import styles from "./Assignment.module.scss";
+import { Link } from "react-router-dom";
+
+const Assignment: React.FC = () => {
+
+    return (
+        <IonPage>
+            <StepHeader stepNumber={4} roundName="Assignment" />
+            <IonContent className={styles.assignment}>
+
+                <div className={styles.description}>
+                    <div className={styles.icon}>
+                        <IonIcon src={assignmentImage} />
+                    </div>
+
+                    <div className={styles.stepDescription}>
+                        <h4>You are one step ahead to the final round</h4>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        </p>
+                    </div>
+                </div>
+
+                <Link to="/assignmentDetails"
+                    className={styles.assignmentButton}>
+                    <IonButton shape="round" expand='block'>Show Details</IonButton>
+                </Link>
+            </IonContent>
+        </IonPage>
+    );
+}
+
+export default Assignment;

src/pages/assignment/AssignmentDetails.module.scss

@@ -0,0 +1,90 @@
+.assignmentDetails {
+
+    .assignmentTask {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        justify-content: space-around;
+        height: 44vh;
+        width: 90%;
+        margin: 0 auto;
+
+        .heading {
+            color: #363636;
+            font-weight: 300;
+            font-size: 2.4rem;
+        }
+    
+        .description {
+            color: #868686;
+            font-size: 1.4rem;
+            line-height: 2.8rem;
+    
+        }
+    }
+
+    .taskDescription {
+        height: 44vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        background-color: #151515;
+        background-image: url("../../assets/icons/desktop-particles-2.svg");
+        background-repeat: no-repeat;
+        background-position: 25% 30%;
+        border-top-right-radius: 75%;
+    
+    
+        &::before {
+            position: absolute;
+            content:" ";
+            top: 50%;
+            right: 0;
+            left: 0;
+            bottom: 0;
+            background-color: #151515;
+            height: 30vh; 	
+            transform: skewY(5deg);
+            z-index: -1;
+        }
+    
+        .heading {
+            color: #BCBCBC;
+            font-weight: 300;
+            letter-spacing: 0.024rem;
+            font-size: 2.4rem;
+            margin-left: 2rem;
+        }
+    
+        .description {
+            margin-left: 2rem;
+            .textHolder {
+                display: flex;
+                margin-bottom: 2rem;
+                .text {
+                    color: #E5E5E5;
+                    font-size: 1.4rem;
+                    font-weight: 600;
+                    margin-left: 2rem;
+                }
+            }
+        }
+        a {
+            text-decoration: none;
+        }
+        ion-button {
+            --background: var(--primary-button-color);
+            font-weight: 500;
+            font-family: 'Poppins', sans-serif;
+            width: 90%;
+            margin: 0 auto;
+        }
+    
+        .wish {
+            color: #E5E5E5;
+            font-size: 1.8rem;
+            text-align: center;
+        }
+    }
+}

src/pages/assignment/AssignmentDetails.tsx

@@ -0,0 +1,49 @@
+import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
+import StepHeader from "../../components/stepsHeader/StepHeader";
+import questionIcon from '../../assets/icons/question-circle-fill.svg';
+import checkIcon from '../../assets/icons/check-circle-fill.svg';
+import timeIcon from '../../assets/icons/time.svg';
+
+import styles from "./AssignmentDetails.module.scss";
+import { Link } from "react-router-dom";
+
+const AssignmentDetails: React.FC = () => {
+    return (
+        <IonPage>
+            <StepHeader roundName="Assignment" stepNumber={4} />
+            <IonContent className={styles.assignmentDetails}>
+                <div className={styles.assignmentTask}>
+                    <h4 className={styles.heading}>Make a text analyser from a text file</h4>
+                    <p className={styles.description}>
+                        Make an api with Node which accepts a text file and I was supposed to return the most repeated words in it. A huge text file (around 7 mb) was given to me as an example. Here is the code if anywants to know how I built it https://github.com/fayazara/text-analyser
+                    </p>
+                </div>
+                <div className={styles.taskDescription}>
+                    <h4 className={styles.heading}>Details</h4>
+                    <div className={styles.description}>
+                        <div className={styles.textHolder}>
+                            <IonIcon src={questionIcon}></IonIcon>
+                            <div className={styles.text}>Weekend Project</div>
+                        </div>
+                        <div className={styles.textHolder}>
+                            <IonIcon src={timeIcon}></IonIcon>
+                            <div className={styles.text}>Before Monday, 01 May 2021</div>
+                        </div>
+                        <div className={styles.textHolder}>
+                            <IonIcon src={checkIcon}></IonIcon>
+                            <div className={styles.text}>Note: 85% of results minimum</div>
+                        </div>
+                    </div>
+
+                    <Link to="./SubmitAssignment">
+                        <IonButton shape="round" expand='block'>Accept</IonButton>
+                    </Link>
+                    <div className={styles.wish}>All the best!</div>
+
+                </div>
+            </IonContent>
+        </IonPage>
+    );
+};
+
+export default AssignmentDetails;

src/pages/assignment/ReviewAssignment.tsx

@@ -0,0 +1,9 @@
+const ReviewAssignment: React.FC = () => {
+    return (
+        <div>
+
+        </div>
+    );
+}
+
+export default ReviewAssignment;

src/pages/assignment/SubmitAssignment.module.scss

@@ -0,0 +1,45 @@
+.submitAssignment {
+    .description {
+        .icon {
+            margin-top: 4rem;
+            display: flex;
+            justify-content: center;
+            ion-icon {
+                width: 10rem;
+                height: 10rem;
+            }
+        }
+    
+        .stepDescription {
+            h4 {
+                color: #363636;
+                text-align: center;
+                font-size: 2.4rem;
+                font-weight: 300;
+                letter-spacing: 0.024rem;
+                margin-top: 3rem;
+            }
+            p {
+                color: #868686;
+                font-size: 1.4rem;
+                text-align: center;
+                width: 90%;
+                margin: 0 auto;
+                margin-top: 2rem;
+                line-height: 1.8;
+            }
+        }
+    }
+    .inputHolder {
+        margin-top: 5rem;
+    }
+    .submitAssigment {
+        text-decoration: none;
+        ion-button {
+            width: 90%;
+            margin: 0 auto;
+            margin-top: 12rem;
+            --background: var(--primary-button-color);
+        }
+    }
+}

src/pages/assignment/SubmitAssignment.tsx

@@ -0,0 +1,45 @@
+import styles from "./SubmitAssignment.module.scss";
+import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react"
+import assignmentImage from "../../assets/icons/Assignment.svg";
+import StepHeader from "../../components/stepsHeader/StepHeader";
+import Input from "../../components/formInput/Input";
+import linkIcon from "../../assets/icons/link.svg";
+import time from "../../assets/icons/time.svg";
+import { linkOutline } from 'ionicons/icons'
+import { Link } from "react-router-dom";
+
+
+const SubmitAssignment: React.FC = () => {
+    return (
+        <IonPage>
+            <StepHeader roundName="Assignment" stepNumber={4} />
+
+            <IonContent className={styles.submitAssignment}>
+
+                <div className={styles.description}>
+                    <div className={styles.icon}>
+                        <IonIcon src={assignmentImage} />
+
+                    </div>
+
+                    <div className={styles.stepDescription}>
+                        <h4>Submit your Assignment</h4>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        </p>
+                    </div>
+                </div>
+
+                <div className={styles.inputHolder}>
+                    <Input placeholder="Insert the project Link" icon={linkOutline} />
+                </div>
+                <Link to="/assignmentDetails"
+                    className={styles.submitAssigment}>
+                    <IonButton shape="round" expand='block'>Submit</IonButton>
+                </Link>
+            </IonContent>
+        </IonPage>
+    );
+}
+
+export default SubmitAssignment;

src/pages/interviewRounds/InterviewRounds.tsx

@@ -19,6 +19,7 @@ interface stepDetail {
     descriptionImage: string;
     buttonText: string;
     isUnlocked: boolean;
+    link: string;
 }
 
 const InterviewRounds: React.FC = () => {
@@ -29,56 +30,64 @@ const InterviewRounds: React.FC = () => {
             stepName: "Skill Information",
             descriptionImage: skillInfo,
             buttonText: "Let's start now",
-            isUnlocked: true
+            isUnlocked: true,
+            link: "/skillInformationStep"
         },
         {
             stepNumber: 2,
             stepName: "Preliminary Round",
             descriptionImage: preliminaryRound,
             buttonText: "Let's do this",
-            isUnlocked: false
+            isUnlocked: false,
+            link: "/preliminaryRound"
         },
         {
             stepNumber: 3,
             stepName: "Technical Interview",
             descriptionImage: technicalInterview,
             buttonText: "Schedule meeting",
-            isUnlocked: false
+            isUnlocked: false,
+            link: "/technicalInterview"
         },
         {
             stepNumber: 4,
             stepName: "Assignment",
             descriptionImage: assignment,
             buttonText: "Show details",
-            isUnlocked: false
+            isUnlocked: false,
+            link: "/assignment"
         },
         {
             stepNumber: 5,
             stepName: "Final Interview",
             descriptionImage: finalInterview,
             buttonText: "Schedule meeting",
-            isUnlocked: false
+            isUnlocked: false,
+            link: "/assignment"
         },
         {
             stepNumber: 6,
             stepName: "Closing Docs",
             descriptionImage: closingDocs,
             buttonText: "Upload docs",
-            isUnlocked: false
+            isUnlocked: false,
+            link: "/assignment"
         },
         {
             stepNumber: 7,
             stepName: "Joining Letter",
             descriptionImage: joiningLetter,
             buttonText: "Show details",
-            isUnlocked: false
+            isUnlocked: false,
+            link: "/assignment"
         },
         {
             stepNumber: 8,
             stepName: "Celebrations",
             descriptionImage: Celebrations,
             buttonText: "Join Workex",
-            isUnlocked: false
+            isUnlocked: false,
+            link: "/assignment"
         },
     ];
 
@@ -98,7 +107,8 @@ const InterviewRounds: React.FC = () => {
                 descriptionImage={step.descriptionImage}
                 buttonText={step.buttonText}
                 setDescription={setDescription}
-                showDescription={(stepNo === step.stepNumber) ? true : false} />
+                showDescription={(stepNo === step.stepNumber) ? true : false}
+                link={step.link} />
         );
     });
 

src/pages/interviewRounds/StepDescreption.module.scss

@@ -56,6 +56,7 @@
         animation-fill-mode: forwards;
     }
     .button {
+        text-decoration: none;
         animation: fadeInAnimation ease 0.2s;
         animation-iteration-count: 1;
         animation-fill-mode: forwards;

src/pages/interviewRounds/StepDescreption.tsx

@@ -1,8 +1,9 @@
 import styles from './StepDescreption.module.scss';
 
 import { IonButton, IonIcon } from '@ionic/react';
-import { lockOpen, lockClosed } from 'ionicons/icons'
+import { lockOpen, lockClosed } from 'ionicons/icons';
 import { useEffect, useRef } from 'react';
+import { Link } from 'react-router-dom';
 
 interface Props {
     stepNumber: number;
@@ -10,6 +11,7 @@ interface Props {
     isUnlocked: boolean;
     buttonText: string;
     descriptionImage: string;
+    link: string;
 }
 
 const StepsDescription: React.FC<Props> = (props) => {
@@ -42,9 +44,9 @@ const StepsDescription: React.FC<Props> = (props) => {
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
             </p>
 
-            <div className={styles.button}>
+            <Link to={props.link} className={styles.button}>
                 <IonButton shape="round" expand='block'>{props.buttonText}</IonButton>
-            </div>
+            </Link>
 
         </div>
     );

src/pages/interviewRounds/Steps.tsx

@@ -10,6 +10,7 @@ interface Props {
     showDescription?: boolean;
     buttonText: string;
     descriptionImage: string;
+    link: string;
     setDescription: (stepNumber: number) => void;
     // rename to select step
 }
@@ -24,7 +25,8 @@ const Steps: React.FC<Props> = (props) => {
                 roundName={props.roundName}
                 isUnlocked={props.isUnlocked}
                 buttonText={props.buttonText}
-                descriptionImage={props.descriptionImage} /> :
+                descriptionImage={props.descriptionImage}
+                link={props.link} /> :
                 <div className={styles.stepHolder}>
                     <IonIcon icon={props.isUnlocked ? lockOpen : lockClosed} color={props.isUnlocked ? '' : "dark"} ></IonIcon>
 

src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx

@@ -3,8 +3,6 @@ import styles from "./PreliminaryRoundResults.module.scss"
 import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
 import StepHeader from "../../components/stepsHeader/StepHeader";
 
-import checkIcon from "../../assets/icons/check-circle-fill.svg";
-import closeIcon from "../../assets/icons/close-filled.svg";
 import goodJobIcon from "../../assets/icons/good_job.svg";
 
 import { closeCircle, checkmarkCircle } from "ionicons/icons";

src/pages/technicalInterview/TechnicalInterview.tsx

@@ -86,10 +86,10 @@ const TechnicalInterview: React.FC = () => {
                         </div>
                         :
                         <div className={styles.buttonHolder}>
-                            <Link to="/" className={styles.dashboardButton}>
+                            <Link to="/interviewRounds" className={styles.dashboardButton}>
                                 <IonButton shape="round">Goto Dashboard</IonButton>
                             </Link>
-                            <Link to="/" className={styles.nextStepButton}>
+                            <Link to="/assignment" className={styles.nextStepButton}>
                                 <IonButton shape="round">Goto Next Step</IonButton>
                             </Link>
                         </div>