From 995569867c9481442de52042ed807429e229cd57 Mon Sep 17 00:00:00 2001 From: Ajay_S Date: Mon, 25 Apr 2022 19:50:31 +0530 Subject: [PATCH] partially created assignment and submit assignment page --- src/App.tsx | 13 +++ src/components/formInput/Input.module.scss | 4 +- src/components/stepsHeader/StepHeader.tsx | 3 + src/pages/Quiz/Quiz.tsx | 2 +- src/pages/assignment/Assignment.module.scss | 46 ++++++++++ src/pages/assignment/Assignment.tsx | 36 ++++++++ .../assignment/AssignmentDetails.module.scss | 90 +++++++++++++++++++ src/pages/assignment/AssignmentDetails.tsx | 49 ++++++++++ .../assignment/ReviewAssignment.module.scss | 0 src/pages/assignment/ReviewAssignment.tsx | 9 ++ .../assignment/SubmitAssignment.module.scss | 45 ++++++++++ src/pages/assignment/SubmitAssignment.tsx | 45 ++++++++++ src/pages/interviewRounds/InterviewRounds.tsx | 28 ++++-- .../StepDescreption.module.scss | 1 + src/pages/interviewRounds/StepDescreption.tsx | 8 +- src/pages/interviewRounds/Steps.tsx | 4 +- .../PreliminaryRoundResults.tsx | 2 - .../technicalInterview/TechnicalInterview.tsx | 4 +- 18 files changed, 369 insertions(+), 20 deletions(-) create mode 100644 src/pages/assignment/Assignment.module.scss create mode 100644 src/pages/assignment/Assignment.tsx create mode 100644 src/pages/assignment/AssignmentDetails.module.scss create mode 100644 src/pages/assignment/AssignmentDetails.tsx create mode 100644 src/pages/assignment/ReviewAssignment.module.scss create mode 100644 src/pages/assignment/ReviewAssignment.tsx create mode 100644 src/pages/assignment/SubmitAssignment.module.scss create mode 100644 src/pages/assignment/SubmitAssignment.tsx diff --git a/src/App.tsx b/src/App.tsx index 8a32970..ff45701 100644 --- a/src/App.tsx +++ b/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 = () => ( + + + + + + + + + + diff --git a/src/components/formInput/Input.module.scss b/src/components/formInput/Input.module.scss index 83a6a8d..a6e76a2 100644 --- a/src/components/formInput/Input.module.scss +++ b/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 { diff --git a/src/components/stepsHeader/StepHeader.tsx b/src/components/stepsHeader/StepHeader.tsx index fbf9b97..8b2cb09 100644 --- a/src/components/stepsHeader/StepHeader.tsx +++ b/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) => {
Step {props.stepNumber}

{props.roundName}

+ {/* */} + {/* */} ) } diff --git a/src/pages/Quiz/Quiz.tsx b/src/pages/Quiz/Quiz.tsx index a991b9b..4fe96ac 100644 --- a/src/pages/Quiz/Quiz.tsx +++ b/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'; diff --git a/src/pages/assignment/Assignment.module.scss b/src/pages/assignment/Assignment.module.scss new file mode 100644 index 0000000..a2b1e56 --- /dev/null +++ b/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); + } + } +} \ No newline at end of file diff --git a/src/pages/assignment/Assignment.tsx b/src/pages/assignment/Assignment.tsx new file mode 100644 index 0000000..6206a63 --- /dev/null +++ b/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 ( + + + + +
+
+ +
+ +
+

You are one step ahead to the final round

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
+ + + Show Details + + + + ); +} + +export default Assignment; \ No newline at end of file diff --git a/src/pages/assignment/AssignmentDetails.module.scss b/src/pages/assignment/AssignmentDetails.module.scss new file mode 100644 index 0000000..101c874 --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/src/pages/assignment/AssignmentDetails.tsx b/src/pages/assignment/AssignmentDetails.tsx new file mode 100644 index 0000000..0afb3ad --- /dev/null +++ b/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 ( + + + +
+

Make a text analyser from a text file

+

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

+
+
+

Details

+
+
+ +
Weekend Project
+
+
+ +
Before Monday, 01 May 2021
+
+
+ +
Note: 85% of results minimum
+
+
+ + + Accept + +
All the best!
+ +
+ + + ); +}; + +export default AssignmentDetails; \ No newline at end of file diff --git a/src/pages/assignment/ReviewAssignment.module.scss b/src/pages/assignment/ReviewAssignment.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/assignment/ReviewAssignment.tsx b/src/pages/assignment/ReviewAssignment.tsx new file mode 100644 index 0000000..3deebcd --- /dev/null +++ b/src/pages/assignment/ReviewAssignment.tsx @@ -0,0 +1,9 @@ +const ReviewAssignment: React.FC = () => { + return ( +
+ +
+ ); +} + +export default ReviewAssignment; diff --git a/src/pages/assignment/SubmitAssignment.module.scss b/src/pages/assignment/SubmitAssignment.module.scss new file mode 100644 index 0000000..2388a78 --- /dev/null +++ b/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); + } + } +} \ No newline at end of file diff --git a/src/pages/assignment/SubmitAssignment.tsx b/src/pages/assignment/SubmitAssignment.tsx new file mode 100644 index 0000000..bc7661f --- /dev/null +++ b/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 ( + + + + + +
+
+ + +
+ +
+

Submit your Assignment

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
+ +
+ +
+ + Submit + + + + ); +} + +export default SubmitAssignment; \ No newline at end of file diff --git a/src/pages/interviewRounds/InterviewRounds.tsx b/src/pages/interviewRounds/InterviewRounds.tsx index fcf05c7..af38d97 100644 --- a/src/pages/interviewRounds/InterviewRounds.tsx +++ b/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} /> ); }); diff --git a/src/pages/interviewRounds/StepDescreption.module.scss b/src/pages/interviewRounds/StepDescreption.module.scss index 3c05e61..e3a91a8 100644 --- a/src/pages/interviewRounds/StepDescreption.module.scss +++ b/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; diff --git a/src/pages/interviewRounds/StepDescreption.tsx b/src/pages/interviewRounds/StepDescreption.tsx index 72a38c4..796e77e 100644 --- a/src/pages/interviewRounds/StepDescreption.tsx +++ b/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) => { @@ -42,9 +44,9 @@ const StepsDescription: React.FC = (props) => { Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-
+ {props.buttonText} -
+ ); diff --git a/src/pages/interviewRounds/Steps.tsx b/src/pages/interviewRounds/Steps.tsx index dd03b0c..5fc7c8f 100644 --- a/src/pages/interviewRounds/Steps.tsx +++ b/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) => { roundName={props.roundName} isUnlocked={props.isUnlocked} buttonText={props.buttonText} - descriptionImage={props.descriptionImage} /> : + descriptionImage={props.descriptionImage} + link={props.link} /> :
diff --git a/src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx b/src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx index 350c430..ec54340 100644 --- a/src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx +++ b/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"; diff --git a/src/pages/technicalInterview/TechnicalInterview.tsx b/src/pages/technicalInterview/TechnicalInterview.tsx index 7c6e31f..c92da9f 100644 --- a/src/pages/technicalInterview/TechnicalInterview.tsx +++ b/src/pages/technicalInterview/TechnicalInterview.tsx @@ -86,10 +86,10 @@ const TechnicalInterview: React.FC = () => {
:
- + Goto Dashboard - + Goto Next Step