made UI adjustments

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;  
     }
 
 }

src/components/formInput/Input.tsx

@@ -11,7 +11,8 @@ interface Props {
 const Input: React.FC<Props> = (props) => {
     return (
         <div className={styles.inputContainer}>
-            <div className={styles.inputHolder}>
+            <div className={styles.inputHolderContainer}>
+
                 <IonItem lines='none' className={styles.inputHolder}>
                     {props.icon &&
                         <IonIcon src={props.icon}></IonIcon>
@@ -22,6 +23,7 @@ const Input: React.FC<Props> = (props) => {
                     <IonInput type={props.type ? props.type : "text"}
                         placeholder={props.placeholder ? props.placeholder : ""}></IonInput>
                 </IonItem>
+
             </div>
 
         </div>

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;
            

src/components/timeSlot/TimeSlot.tsx

@@ -70,16 +70,18 @@ const TimeSlot: React.FC<OwnProps> = (props) => {
             </header>
 
             <IonContent className={styles.timeSlotContent}>
-                <div className={styles.month}>
-                    {props.month}
-                </div>
-
-                <div className={styles.dateSlotHolder}>
-                    {dates}
-                </div>
-
-                <div className={styles.timeSlotHolder}>
-                    {timeSlots}
+                <div className={styles.dateHolder}>
+                    <div className={styles.month}>
+                        {props.month}
+                    </div>
+
+                    <div className={styles.dateSlotHolder}>
+                        {dates}
+                    </div>
+
+                    <div className={styles.timeSlotHolder}>
+                        {timeSlots}
+                    </div>
                 </div>
 
                 <div onClick={(highlightedDate && highlightedTime !== "") ? () => props.getDate("test") : undefined}

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;
         }

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;

src/pages/Quiz/Question.tsx

@@ -59,9 +59,10 @@ const Question: React.FC<OwnProp> = (props) => {
                         duration={COUNTDOWN_AMOUNT_TOTAL}
                         colors={'#6BD534'}
                         size={60}
-                        strokeWidth={5}
-                    >
+                        strokeWidth={5} >
+
                         {renderTime}
+
                     </CountdownCircleTimer>
                 </div>
             </div>

src/pages/assignment/SubmitAssignment.module.scss

@@ -33,7 +33,7 @@
     }
     .inputHolder {
         // margin-top: 5rem;
-        width: 85%;
+        width: 95%;
         margin: 0 auto;
     }
     .submitAssigment {

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.
                     </p>
                 </div>
-                <Link to="/" className={styles.workexButton}>
+                <Link to="/interviewRounds" className={styles.workexButton}>
                     <IonButton shape="round" expand="block">Join workex</IonButton>
                 </Link>
 

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;