diff --git a/src/App.tsx b/src/App.tsx index 44aa46f..93260d5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -33,6 +33,7 @@ import ReviewAssignment from './pages/assignment/ReviewAssignment'; import AssignmentCompleted from './pages/assignment/AssignmentCompleted'; import FinalInterview from './pages/FinalInterview/FinalInterview'; import FinalInterviewResult from './pages/FinalInterview/FinalInterviewResult'; +import ClosingDocs from './pages/closingDocs/ClosingDocs'; @@ -81,6 +82,10 @@ const App: React.FC = () => ( + + + + diff --git a/src/assets/icons/check.svg b/src/assets/icons/check.svg new file mode 100644 index 0000000..b1ced66 --- /dev/null +++ b/src/assets/icons/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/upload.svg b/src/assets/icons/upload.svg new file mode 100644 index 0000000..21f7d5e --- /dev/null +++ b/src/assets/icons/upload.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/closingDocs/ClosingDocs.module.scss b/src/pages/closingDocs/ClosingDocs.module.scss new file mode 100644 index 0000000..fc5bf76 --- /dev/null +++ b/src/pages/closingDocs/ClosingDocs.module.scss @@ -0,0 +1,74 @@ +.closingDocs { + + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + height: 88vh; + + .closingDocsImg { + width: 12rem; + height: 12rem; + } + + .docsHeader { + color: #363636; + font-size: 2.4rem; + font-weight: 300; + text-align: center; + } + + .docsSubHeader { + color: #868686; + font-size: 1.6rem; + font-weight: 600; + } + + .uploadDocsHolder { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + height: 30vh; + width: 95%; + + .docs { + display: flex; + justify-content: space-between; + align-items: center; + width: 95%; + margin: 0 auto; + + .docsName { + font-size: 1.2rem; + } + + .iconBorder { + border: 0.1rem solid var(--primary-button-color); + border-radius: 50%; + width: 3rem; + height: 3rem; + display: flex; + align-items: center; + justify-content: center; + } + } + } + + .closingDocsButton { + width: 95%; + margin: 0 auto; + text-decoration: none; + + ion-button { + width: 100%; + --background: #DDDDDD; + } + } + + .active { + ion-button { + --background: var(--primary-button-color); + } + } +} \ No newline at end of file diff --git a/src/pages/closingDocs/ClosingDocs.tsx b/src/pages/closingDocs/ClosingDocs.tsx new file mode 100644 index 0000000..17ce06a --- /dev/null +++ b/src/pages/closingDocs/ClosingDocs.tsx @@ -0,0 +1,76 @@ +import styles from "./ClosingDocs.module.scss"; + +import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react" +import StepHeader from "../../components/stepsHeader/StepHeader" +import closingDocsImg from '../../assets/icons/Closing_Docs.svg'; +import uploadIcon from "../../assets/icons/upload.svg"; +import checkIcon from "../../assets/icons/check.svg"; +import { useState } from "react"; +import { Link } from "react-router-dom"; + + +const ClosingDocs: React.FC = () => { + + const [isUploaded, setUploaded] = useState(false); + + return ( + + + +
+ + +

Upload your docs to join our team

+ {/*
*/} +
Gather all documents as mentioned below:
+
+
+
ID proof(Aadhar)
+ {!isUploaded &&
+ setUploaded(true)} /> +
} + {isUploaded &&
+ +
} +
+
+
convocation certificate
+ {!isUploaded &&
+ setUploaded(true)} /> +
} + {isUploaded &&
+ +
} +
+
+
Experience Letter
+ {!isUploaded &&
+ setUploaded(true)} /> +
} + {isUploaded &&
+ +
} +
+
+
Last 3 months Payslips
+ {!isUploaded &&
+ setUploaded(true)} /> +
} + {isUploaded &&
+ +
} +
+
+ {/*
*/} + + + Proceed + +
+
+
+ ); +} + +export default ClosingDocs; \ No newline at end of file