From 04b19535f549e488ecc1720206865098a71e0340 Mon Sep 17 00:00:00 2001 From: Ajay_S Date: Tue, 26 Apr 2022 15:03:30 +0530 Subject: [PATCH] added classnames for ion components --- src/components/formInput/Input.module.scss | 58 +++---- src/components/formInput/Input.tsx | 2 +- src/components/timeSlot/TimeSlot.module.scss | 152 +++++++++--------- src/components/timeSlot/TimeSlot.tsx | 2 +- .../FinalInterview/FInalInterview.module.scss | 2 +- src/pages/FinalInterview/FinalInterview.tsx | 2 +- .../FinalInterviewResult.module.scss | 132 +++++++-------- .../FinalInterview/FinalInterviewResult.tsx | 2 +- src/pages/Quiz/Options.module.scss | 2 +- src/pages/Quiz/Options.tsx | 2 +- src/pages/closingDocs/ClosingDocs.tsx | 2 +- src/pages/interviewRounds/StepDescreption.tsx | 2 +- .../PreliminaryRound.module.scss | 152 +++++++++--------- .../preliminaryRound/PreliminaryRound.tsx | 2 +- .../PreliminaryRoundResults.module.scss | 2 +- .../PreliminaryRoundResults.tsx | 2 +- .../TechnicalInterview.module.scss | 2 +- .../technicalInterview/TechnicalInterview.tsx | 2 +- 18 files changed, 266 insertions(+), 256 deletions(-) diff --git a/src/components/formInput/Input.module.scss b/src/components/formInput/Input.module.scss index a6e76a2..6ed835c 100644 --- a/src/components/formInput/Input.module.scss +++ b/src/components/formInput/Input.module.scss @@ -14,36 +14,38 @@ $dim-grey: #696969; border-radius: 2.5rem; } -} - -ion-icon { - width: 1.5rem; - height: 1.5rem; -} - -ion-input { - font-size: 1.4rem !important; - --color: #696969 !important; - font-weight: 400 !important; - width: 25rem !important; - - input { - --padding-start: 1rem; + ion-icon { + width: 1.5rem; + height: 1.5rem; + } + + ion-input { + font-size: 1.4rem !important; + --color: #696969 !important; + font-weight: 400 !important; + width: 25rem !important; + + input { + --padding-start: 1rem; + } + } + + .inputHolder { + border-radius: 2.5rem; + width: 32rem; + height: 4rem; + margin: 0.2rem; + + } + + ion-label { + margin: 0; + margin-left: 0.8rem; + --color: #696969 !important; + font-size: 1.4rem !important; } -} - -ion-item { - border-radius: 2.5rem; - width: 32rem; - height: 4rem; - margin: 0.2rem; } -ion-label { - margin: 0; - margin-left: 0.8rem; - --color: #696969 !important; - font-size: 1.4rem !important; -} + diff --git a/src/components/formInput/Input.tsx b/src/components/formInput/Input.tsx index f9319fd..095cd52 100644 --- a/src/components/formInput/Input.tsx +++ b/src/components/formInput/Input.tsx @@ -12,7 +12,7 @@ const Input: React.FC = (props) => { return (
- + {props.icon && } diff --git a/src/components/timeSlot/TimeSlot.module.scss b/src/components/timeSlot/TimeSlot.module.scss index ce0b027..ba102b2 100644 --- a/src/components/timeSlot/TimeSlot.module.scss +++ b/src/components/timeSlot/TimeSlot.module.scss @@ -20,88 +20,90 @@ } } -.month { - color: #959595; - font-size: 1.6rem; - margin-top: 3.5rem; - margin-left: 3rem; -} - -.dateSlotHolder { - display: flex; - align-items: center; - justify-content: space-evenly; - margin-top: 4rem; - - .date { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 7rem; - height: 7rem; - border: 1px solid #EFEFEF; - border-radius: 25px; - color: lighten($color: #959595, $amount: 15%); - font-size: 1.8rem; - font-weight: 600; - - .day { - font-size: 1.4rem; - font-weight: 200; - } +.timeSlotContent { + .month { + color: #959595; + font-size: 1.6rem; + margin-top: 3.5rem; + margin-left: 3rem; } -} - -.timeSlotHolder { - width: 90%; - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-gap: 2rem; - margin: 0 auto; - margin-top: 4rem; - - .time { + + .dateSlotHolder { display: flex; align-items: center; - justify-content: center; - width: 15.5rem; - height: 5rem; - border: 1px solid #EFEFEF; - border-radius: 25px; - color: lighten($color: #959595, $amount: 10%); - font-size: 1.6rem; + justify-content: space-evenly; + margin-top: 4rem; + + .date { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 7rem; + height: 7rem; + border: 1px solid #EFEFEF; + border-radius: 25px; + color: lighten($color: #959595, $amount: 15%); + font-size: 1.8rem; + font-weight: 600; + + .day { + font-size: 1.4rem; + font-weight: 200; + } + } } -} - -.timeSlotButton { - text-decoration: none; - - ion-button { + + .timeSlotHolder { width: 90%; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 2rem; margin: 0 auto; - margin-top: 18vh; - margin-bottom: 0; - --background: #DDDDDD; - + margin-top: 4rem; + + .time { + display: flex; + align-items: center; + justify-content: center; + width: 15.5rem; + height: 5rem; + border: 1px solid #EFEFEF; + border-radius: 25px; + color: lighten($color: #959595, $amount: 10%); + font-size: 1.6rem; + } } -} - -.active { - box-shadow: 0px 0px 10px #00000039; - div { - color: #33CE93; + .timeSlotButton { + text-decoration: none; + + ion-button { + width: 90%; + margin: 0 auto; + margin-top: 18vh; + margin-bottom: 0; + --background: #DDDDDD; + + } } -} - -.activeTime { - color: #33CE93 !important; - box-shadow: 0px 0px 10px #00000039; -} - -.buttonActive { - ion-button { - --background: var(--primary-button-color); + + .active { + + box-shadow: 0px 0px 10px #00000039; + div { + color: #33CE93; + } } -} \ No newline at end of file + + .activeTime { + color: #33CE93 !important; + box-shadow: 0px 0px 10px #00000039; + } + + .buttonActive { + ion-button { + --background: var(--primary-button-color); + } + } +} diff --git a/src/components/timeSlot/TimeSlot.tsx b/src/components/timeSlot/TimeSlot.tsx index a48d7ca..70bba7e 100644 --- a/src/components/timeSlot/TimeSlot.tsx +++ b/src/components/timeSlot/TimeSlot.tsx @@ -69,7 +69,7 @@ const TimeSlot: React.FC = (props) => {

Find a Slot

- +
{props.month}
diff --git a/src/pages/FinalInterview/FInalInterview.module.scss b/src/pages/FinalInterview/FInalInterview.module.scss index 5c88ccd..f7a88a7 100644 --- a/src/pages/FinalInterview/FInalInterview.module.scss +++ b/src/pages/FinalInterview/FInalInterview.module.scss @@ -1,4 +1,4 @@ -ion-content { +.finalInterviewContent { display: fixed; height: 100vh; width: 100vw; diff --git a/src/pages/FinalInterview/FinalInterview.tsx b/src/pages/FinalInterview/FinalInterview.tsx index 44d8b4d..2ee6bb8 100644 --- a/src/pages/FinalInterview/FinalInterview.tsx +++ b/src/pages/FinalInterview/FinalInterview.tsx @@ -48,7 +48,7 @@ const FinalInterview: React.FC = () => { return ( - +
{ diff --git a/src/pages/FinalInterview/FinalInterviewResult.module.scss b/src/pages/FinalInterview/FinalInterviewResult.module.scss index a50855f..415013c 100644 --- a/src/pages/FinalInterview/FinalInterviewResult.module.scss +++ b/src/pages/FinalInterview/FinalInterviewResult.module.scss @@ -1,75 +1,79 @@ .finalInterviewResults { - .description { - .icon { - margin-top: 4rem; - display: flex; - justify-content: center; - ion-icon { - width: 10rem; - height: 10rem; - } - } + .finalInterviewResultsContent { - .stepDescription { - h4 { - color: #363636; - text-align: center; - font-size: 2.4rem; - font-weight: 300; - letter-spacing: 0.024rem; - margin-top: 3rem; + .description { + .icon { + margin-top: 4rem; + display: flex; + justify-content: center; + ion-icon { + width: 10rem; + height: 10rem; + } } - p { - color: #868686; - font-size: 1.4rem; - text-align: center; - width: 90%; - margin: 0 auto; - margin-top: 2rem; - line-height: 1.8; + + .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; + } } } - } - - .buttonHolder { - display: flex; - justify-content: space-around; - align-items: center; - width: 95%; - margin: 0 auto; - margin-top: 22rem; - a { - text-decoration: none; - } - - .dashboardButton { - width: 18rem; - - ion-button { - margin: 0; - --border-style: solid; - --border-width: 0.1rem; - --border-color: var(--primary-button-color); - --background: transparent; - --color: var(--primary-button-color); - font-size: 1.6rem; - font-weight: 600; + + .buttonHolder { + display: flex; + justify-content: space-around; + align-items: center; + width: 95%; + margin: 0 auto; + margin-top: 22rem; + a { + text-decoration: none; } - } - - .nextStepButton { - width: 18rem; - - margin-left: 1rem; - ion-button { - - font-size: 1.6rem; - font-weight: 600; - --background: var(--primary-button-color); - + + .dashboardButton { + width: 18rem; + + ion-button { + margin: 0; + --border-style: solid; + --border-width: 0.1rem; + --border-color: var(--primary-button-color); + --background: transparent; + --color: var(--primary-button-color); + font-size: 1.6rem; + font-weight: 600; + } + } + + .nextStepButton { + width: 18rem; + + margin-left: 1rem; + ion-button { + + font-size: 1.6rem; + font-weight: 600; + --background: var(--primary-button-color); + + } } + } - } + } \ No newline at end of file diff --git a/src/pages/FinalInterview/FinalInterviewResult.tsx b/src/pages/FinalInterview/FinalInterviewResult.tsx index a717c43..b341d0d 100644 --- a/src/pages/FinalInterview/FinalInterviewResult.tsx +++ b/src/pages/FinalInterview/FinalInterviewResult.tsx @@ -11,7 +11,7 @@ const FinalInterviewResult: React.FC = () => { - +
diff --git a/src/pages/Quiz/Options.module.scss b/src/pages/Quiz/Options.module.scss index 885e1e7..b1505f4 100644 --- a/src/pages/Quiz/Options.module.scss +++ b/src/pages/Quiz/Options.module.scss @@ -7,7 +7,7 @@ justify-content: space-around; height: 40vh; - ion-item { + .options { width: 99%; margin: 0 auto; --background: white; diff --git a/src/pages/Quiz/Options.tsx b/src/pages/Quiz/Options.tsx index 81b4ac3..681aedf 100644 --- a/src/pages/Quiz/Options.tsx +++ b/src/pages/Quiz/Options.tsx @@ -15,7 +15,7 @@ const Options: React.FC = (props) => { const options = props.options.map((option, key) => { return ( - + {option} diff --git a/src/pages/closingDocs/ClosingDocs.tsx b/src/pages/closingDocs/ClosingDocs.tsx index 17ce06a..6c83b6e 100644 --- a/src/pages/closingDocs/ClosingDocs.tsx +++ b/src/pages/closingDocs/ClosingDocs.tsx @@ -16,7 +16,7 @@ const ClosingDocs: React.FC = () => { return ( - +
diff --git a/src/pages/interviewRounds/StepDescreption.tsx b/src/pages/interviewRounds/StepDescreption.tsx index 6039403..796e77e 100644 --- a/src/pages/interviewRounds/StepDescreption.tsx +++ b/src/pages/interviewRounds/StepDescreption.tsx @@ -44,7 +44,7 @@ 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/preliminaryRound/PreliminaryRound.module.scss b/src/pages/preliminaryRound/PreliminaryRound.module.scss index f266cd5..d114b08 100644 --- a/src/pages/preliminaryRound/PreliminaryRound.module.scss +++ b/src/pages/preliminaryRound/PreliminaryRound.module.scss @@ -1,90 +1,92 @@ -.roundDescription { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - justify-content: space-around; - height: 44.5vh; - width: 90%; - margin: 0 auto; - ion-icon { - width: 8rem; - height: 8rem; - padding-top: 2rem; - } +.preliminaryRoundContent{ + .roundDescription { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + justify-content: space-around; + height: 44.5vh; + width: 90%; + margin: 0 auto; + ion-icon { + width: 8rem; + height: 8rem; + padding-top: 2rem; + } - .heading { - color: #363636; - font-weight: 300; - font-size: 2.4rem; - } + .heading { + color: #363636; + font-weight: 300; + font-size: 2.4rem; + } - .description { - color: #868686; - font-size: 1.4rem; - line-height: 2.8rem; + .description { + color: #868686; + font-size: 1.4rem; + line-height: 2.8rem; + } } -} -.quizDescription { - 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%; + .quizDescription { + 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; - } + &::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; - } + .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; + .description { + margin-left: 2rem; + .textHolder { + display: flex; + margin-bottom: 2rem; + .text { + color: #E5E5E5; + font-size: 1.4rem; + font-weight: 600; + margin-left: 2rem; + } } } - } - ion-button { - --background: var(--primary-button-color); - font-weight: 500; - font-family: 'Poppins', sans-serif; - width: 90%; - margin: 0 auto; - } + 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; + .wish { + color: #E5E5E5; + font-size: 1.8rem; + text-align: center; + } } } \ No newline at end of file diff --git a/src/pages/preliminaryRound/PreliminaryRound.tsx b/src/pages/preliminaryRound/PreliminaryRound.tsx index 31b6d01..c0f49a0 100644 --- a/src/pages/preliminaryRound/PreliminaryRound.tsx +++ b/src/pages/preliminaryRound/PreliminaryRound.tsx @@ -11,7 +11,7 @@ const PreliminaryRound: React.FC = () => { return ( - +
diff --git a/src/pages/preliminaryRoundResults/PreliminaryRoundResults.module.scss b/src/pages/preliminaryRoundResults/PreliminaryRoundResults.module.scss index 304ae8a..45d07d3 100644 --- a/src/pages/preliminaryRoundResults/PreliminaryRoundResults.module.scss +++ b/src/pages/preliminaryRoundResults/PreliminaryRoundResults.module.scss @@ -1,4 +1,4 @@ -ion-content { +.preliminaryRoundResultsContent { .quizResultsContainer { height: 88vh; .upfold { diff --git a/src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx b/src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx index ec54340..244f609 100644 --- a/src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx +++ b/src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx @@ -12,7 +12,7 @@ const PreliminaryRoundResults: React.FC = () => { return ( - +
diff --git a/src/pages/technicalInterview/TechnicalInterview.module.scss b/src/pages/technicalInterview/TechnicalInterview.module.scss index 5c88ccd..f61b51f 100644 --- a/src/pages/technicalInterview/TechnicalInterview.module.scss +++ b/src/pages/technicalInterview/TechnicalInterview.module.scss @@ -1,4 +1,4 @@ -ion-content { +.techinicalInterviewContent { display: fixed; height: 100vh; width: 100vw; diff --git a/src/pages/technicalInterview/TechnicalInterview.tsx b/src/pages/technicalInterview/TechnicalInterview.tsx index c92da9f..eb462c4 100644 --- a/src/pages/technicalInterview/TechnicalInterview.tsx +++ b/src/pages/technicalInterview/TechnicalInterview.tsx @@ -48,7 +48,7 @@ const TechnicalInterview: React.FC = () => { return ( - +
{