From ee484ed888f272366461789af4351d3c2e81f003 Mon Sep 17 00:00:00 2001 From: Ajay_S Date: Wed, 27 Apr 2022 14:45:37 +0530 Subject: [PATCH] made UI adjustments --- src/components/formInput/Input.module.scss | 18 ++-- src/components/formInput/Input.tsx | 4 +- src/components/timeSlot/TimeSlot.module.scss | 100 +++++++++--------- src/components/timeSlot/TimeSlot.tsx | 22 ++-- .../FinalInterview/FInalInterview.module.scss | 3 +- .../FinalInterviewResult.module.scss | 8 +- src/pages/Quiz/Question.tsx | 5 +- .../assignment/SubmitAssignment.module.scss | 2 +- src/pages/celebration/Celebration.tsx | 2 +- .../TechnicalInterview.module.scss | 7 +- 10 files changed, 91 insertions(+), 80 deletions(-) diff --git a/src/components/formInput/Input.module.scss b/src/components/formInput/Input.module.scss index e01871b..abace8f 100644 --- a/src/components/formInput/Input.module.scss +++ b/src/components/formInput/Input.module.scss @@ -5,7 +5,7 @@ $dim-grey: #696969; display: flex; flex-direction: column; - .inputHolder { + .inputHolderContainer { margin-left: 2rem; margin-top: 2rem; width: max-content; @@ -18,16 +18,20 @@ $dim-grey: #696969; width: 1.5rem; height: 1.5rem; align-self: center; + color: #AFAFAF; + margin-left: 1rem; + margin-bottom: 0.2rem; } ion-input { - font-size: 1.4rem !important; - --color: #696969 !important; - font-weight: 400 !important; - width: 25rem !important; + font-size: 1.4rem; + --color: #696969; + font-weight: 400; + width: 25rem; input { --padding-start: 1rem; + --padding-top: 0.5rem; } } @@ -42,8 +46,8 @@ $dim-grey: #696969; ion-label { margin: 0; margin-left: 0.8rem; - --color: #696969 !important; - font-size: 1.4rem !important; + --color: #696969; + font-size: 1.4rem; } } diff --git a/src/components/formInput/Input.tsx b/src/components/formInput/Input.tsx index 095cd52..3c8035c 100644 --- a/src/components/formInput/Input.tsx +++ b/src/components/formInput/Input.tsx @@ -11,7 +11,8 @@ interface Props { const Input: React.FC = (props) => { return (
-
+
+ {props.icon && @@ -22,6 +23,7 @@ const Input: React.FC = (props) => { +
diff --git a/src/components/timeSlot/TimeSlot.module.scss b/src/components/timeSlot/TimeSlot.module.scss index ba102b2..756d097 100644 --- a/src/components/timeSlot/TimeSlot.module.scss +++ b/src/components/timeSlot/TimeSlot.module.scss @@ -21,67 +21,71 @@ } .timeSlotContent { - .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 { + + .dateHolder { + height: 60vh; + .month { + color: #959595; + font-size: 1.6rem; + margin-top: 3.5rem; + margin-left: 3rem; + } + + .dateSlotHolder { 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; + 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; + } } } - } - - .timeSlotHolder { - width: 90%; - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-gap: 2rem; - margin: 0 auto; - 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; + + .timeSlotHolder { + width: 90%; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 2rem; + margin: 0 auto; + 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; + } } } + .timeSlotButton { text-decoration: none; ion-button { width: 90%; margin: 0 auto; - margin-top: 18vh; margin-bottom: 0; --background: #DDDDDD; diff --git a/src/components/timeSlot/TimeSlot.tsx b/src/components/timeSlot/TimeSlot.tsx index 70bba7e..b480da0 100644 --- a/src/components/timeSlot/TimeSlot.tsx +++ b/src/components/timeSlot/TimeSlot.tsx @@ -70,16 +70,18 @@ const TimeSlot: React.FC = (props) => { -
- {props.month} -
- -
- {dates} -
- -
- {timeSlots} +
+
+ {props.month} +
+ +
+ {dates} +
+ +
+ {timeSlots} +
props.getDate("test") : undefined} diff --git a/src/pages/FinalInterview/FInalInterview.module.scss b/src/pages/FinalInterview/FInalInterview.module.scss index f7a88a7..be9a2ce 100644 --- a/src/pages/FinalInterview/FInalInterview.module.scss +++ b/src/pages/FinalInterview/FInalInterview.module.scss @@ -3,6 +3,7 @@ height: 100vh; width: 100vw; .description { + height: 80vh; ion-icon { width: 15rem; height: 10rem; @@ -88,7 +89,6 @@ ion-button { width: 95%; margin: 0 auto; - margin-top: 38vh; margin-bottom: 0; --background: var(--primary-button-color); } @@ -100,7 +100,6 @@ align-items: center; width: 95%; margin: 0 auto; - margin-top: 7rem; a { text-decoration: none; } diff --git a/src/pages/FinalInterview/FinalInterviewResult.module.scss b/src/pages/FinalInterview/FinalInterviewResult.module.scss index 415013c..05011a4 100644 --- a/src/pages/FinalInterview/FinalInterviewResult.module.scss +++ b/src/pages/FinalInterview/FinalInterviewResult.module.scss @@ -3,13 +3,14 @@ .finalInterviewResultsContent { .description { + height: 72vh; .icon { margin-top: 4rem; display: flex; justify-content: center; ion-icon { - width: 10rem; - height: 10rem; + width: 15rem; + height: 15rem; } } @@ -40,7 +41,6 @@ align-items: center; width: 95%; margin: 0 auto; - margin-top: 22rem; a { text-decoration: none; } @@ -63,7 +63,7 @@ .nextStepButton { width: 18rem; - margin-left: 1rem; + padding-left: 1rem; ion-button { font-size: 1.6rem; diff --git a/src/pages/Quiz/Question.tsx b/src/pages/Quiz/Question.tsx index 882f261..d57f2fe 100644 --- a/src/pages/Quiz/Question.tsx +++ b/src/pages/Quiz/Question.tsx @@ -59,9 +59,10 @@ const Question: React.FC = (props) => { duration={COUNTDOWN_AMOUNT_TOTAL} colors={'#6BD534'} size={60} - strokeWidth={5} - > + strokeWidth={5} > + {renderTime} +
diff --git a/src/pages/assignment/SubmitAssignment.module.scss b/src/pages/assignment/SubmitAssignment.module.scss index 4557c1d..2afca34 100644 --- a/src/pages/assignment/SubmitAssignment.module.scss +++ b/src/pages/assignment/SubmitAssignment.module.scss @@ -33,7 +33,7 @@ } .inputHolder { // margin-top: 5rem; - width: 85%; + width: 95%; margin: 0 auto; } .submitAssigment { diff --git a/src/pages/celebration/Celebration.tsx b/src/pages/celebration/Celebration.tsx index a0e1ce7..bbe924c 100644 --- a/src/pages/celebration/Celebration.tsx +++ b/src/pages/celebration/Celebration.tsx @@ -16,7 +16,7 @@ const Celebration: React.FC = () => { Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

- + Join workex diff --git a/src/pages/technicalInterview/TechnicalInterview.module.scss b/src/pages/technicalInterview/TechnicalInterview.module.scss index f61b51f..1c771c3 100644 --- a/src/pages/technicalInterview/TechnicalInterview.module.scss +++ b/src/pages/technicalInterview/TechnicalInterview.module.scss @@ -3,6 +3,7 @@ height: 100vh; width: 100vw; .description { + height: 75vh; ion-icon { width: 15rem; height: 10rem; @@ -88,7 +89,6 @@ ion-button { width: 95%; margin: 0 auto; - margin-top: 38vh; margin-bottom: 0; --background: var(--primary-button-color); } @@ -98,9 +98,8 @@ display: flex; justify-content: space-around; align-items: center; - width: 95%; + width: 100%; margin: 0 auto; - margin-top: 7rem; a { text-decoration: none; } @@ -123,7 +122,7 @@ .nextStepButton { width: 18rem; - margin-left: 1rem; + padding-left: 1rem; ion-button { font-size: 1.6rem;