Prilimanary Ui changes --Partial commit

src/_theme.scss

@@ -8,4 +8,8 @@ $button-color: #d1d1d1;
 $step-color: #a3a3a3;
 $heading-color: #363636;
 $content-color: #868686;
-$segment-section: #f7f7f7;
+$segment-section: #f7f7f7;
+
+$grey-shades: #d1d1d1, #c8c8c8, #868686, #363636, #151515; // lighter, light, grey, dark-grey, darkest-grey
+$teal: #33ce93;
+$greenishyellow:#6BD534;

src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ import { DashboardComponent } from './pages/dashboard/dashboard.component';
 import { FinalinterviewComponent } from './pages/dashboard/finalinterview/finalinterview.component';
 import { JoiningletterComponent } from './pages/dashboard/joiningletter/joiningletter.component';
 import { PreliminaryComponent } from './pages/dashboard/preliminary/preliminary.component';
+import { QuizComponent } from './pages/dashboard/preliminary/quiz/quiz.component';
 import { SkillinformationComponent } from './pages/dashboard/skillinformation/skillinformation.component';
 import { TechnicalComponent } from './pages/dashboard/technical/technical.component';
 import { LoginComponent } from './pages/onboarding/login/login.component';
@@ -29,6 +30,7 @@ const routes: Routes = [
     { component: TechnicalComponent, path: 'dashboard/technincalinterview' },
     { component: SkillinformationComponent, path: 'dashboard/skillinformation' },
     { component: FinalinterviewComponent, path: 'dashboard/finalinterview' },
+    { component: QuizComponent, path: 'dashboard/preliminary/quiz' },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -16,6 +16,7 @@ import { ClosingdocsComponent } from './pages/dashboard/closingdocs/closingdocs.
 import { JoiningletterComponent } from './pages/dashboard/joiningletter/joiningletter.component';
 import { CelebrationComponent } from './pages/dashboard/celebration/celebration.component';
 import { FinalinterviewComponent } from './pages/dashboard/finalinterview/finalinterview.component';
+import { QuizComponent } from './pages/dashboard/preliminary/quiz/quiz.component';
 
 @NgModule({
   declarations: [
@@ -33,6 +34,7 @@ import { FinalinterviewComponent } from './pages/dashboard/finalinterview/finali
     JoiningletterComponent,
     CelebrationComponent,
     FinalinterviewComponent,
+    QuizComponent,
   ],
   imports: [
     BrowserModule,

src/app/pages/dashboard/_commonheader.scss

@@ -8,29 +8,30 @@ header {
     height: 90px;
     top: 0;
     left: 0;
-    padding: 0 20px;
+    padding-left:25px;
 
     .logo {
         display: flex;
         flex-direction: column;
-        padding: 6px 10px;
+        padding: 6px 14px;
 
         h5 {
-            font-family: "Oswald", sans-serif;
             color: $text-color;
             font-weight: 300;
             left: 0;
-            font-size: 21px;
+            font-size: 24px;
+            letter-spacing: 0.3px;
         }
         span {
             color: $white;
-            font-family: "Poppins", sans-serif;
-            font-size: 10px;
+            letter-spacing: 0.3px;
+            font-size: 13px;
             font-weight: 500;
         }
     }
 
     .cross-icon {
+        padding-right: 10px;
         button {
             border: none;
             background-color: transparent;
@@ -49,7 +50,6 @@ header {
     border-radius: 25px;
     height: 45px;
     font-size: 14px;
-    font-family: "Poppins", sans-serif;
     border: none;
     margin: 5px 0;
     font-weight: 600;
@@ -61,19 +61,27 @@ header {
 .upfold {
     padding: 30px 25px 0px;
     h3 {
-        font-size: 21px;
+        font-size: 24px;
         color: lighten($color: $heading-color, $amount: 20%);
         text-align: center;
         font-weight: 300;
-        padding-top: 10px;
+        padding-top: 13px;
     }
     p {
         color: $content-color;
         text-align: center;
-        font-size: 12.5px;
-        line-height: 25px;
-        font-weight: 500;
+        font-size: 14px;
+        line-height: 28px;
         padding: 15px 0;
-        font-weight: 300;
+        font-weight: 400;
     }
 }
+
+button {
+    border-radius: 30px;
+    height: 50px;
+    font-size: 16px;
+    border: none;
+    margin: 5px;
+    font-weight: 600;
+}

src/app/pages/dashboard/dashboard.component.scss

@@ -5,7 +5,7 @@ header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: 70px;
+    height: 90px;
     top: 0;
     left: 0;
     padding: 0 10px;
@@ -24,7 +24,6 @@ header {
         text-decoration: none;
 
         h5 {
-            font-family: "Oswald", sans-serif;
             color: $text-color;
             font-weight: 100;
             left: 0;
@@ -66,36 +65,32 @@ li {
             text-align: center;
             color: $step-color;
             font-size: 11px;
-            font-family: "Poppins", sans-serif;
             font-weight: 500;
         }
         h3 {
             text-align: center;
             color: lighten($color: $heading-color, $amount: 20%);
-            font-size: 21.5px;
-            font-family: "Oswald", sans-serif;
+            font-size: 24px;
             font-weight: 300;
         }
     }
 
     img {
-        padding: 22px 107px;
+        padding: 22px 120px;
         display: none;
     }
     p {
         color: $content-color;
         text-align: center;
-        font-family: "Poppins", sans-serif;
-        font-size: 12px;
+        font-size: 14px;
         line-height: 25px;
         display: none;
         padding: 5px 30px;
     }
     button {
-        border-radius: 25px;
-        height: 45px;
-        font-size: 14px;
-        font-family: "Poppins", sans-serif;
+        border-radius: 30px;
+        height: 50px;
+        font-size: 15px;
         border: none;
         margin: 25px 20px;
         font-weight: 600;
@@ -124,7 +119,7 @@ li {
         }
     }
     div {
-        padding-top: 32px;
+        padding-top: 40px;
         background-color: $white;
         animation: slideup 0.3s;    
     }

src/app/pages/dashboard/preliminary/preliminary.component.html

@@ -12,12 +12,16 @@
 
 <section class='upfold'>
     <img src='../../../../assets/Step 2.svg'>
-    <h3>Lets us check your knowledge.</h3>
+    <h3>Let us check your knowledge.</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
         magna
         aliqua.</p>
 </section>
 
+<section class='quiz-section-header'>
+    <div></div>
+    <div></div>
+</section>
 <section class='quiz-section'>
     <h3>Quiz</h3>
     <ul>
@@ -25,10 +29,9 @@
         <li> <img src="../../../../assets/time.svg"> 20 mins + 10 mins grace</li>
         <li> <img src="../../../../assets/check-circle-fill.svg"> Note: 85% of result minimum</li>
     </ul>
-
-    <button>Start quiz</button>
 </section>
 
-<footer>
+<section class='btn-section'>
+    <button [routerLink] = "['/dashboard/preliminary/quiz']">Start quiz</button>
     <span>All the best!</span>
-</footer>
+</section>

src/app/pages/dashboard/preliminary/preliminary.component.scss

@@ -1,38 +1,86 @@
 @import "../commonheader";
 
 .upfold {
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 20px;
 
     img {
-        padding: 20px;
+        padding: 15px;
         width: 100px;
     }
 }
 
+.quiz-section-header {
+    div:nth-child(1) {
+        background-color: $background-color;
+        position: absolute;
+        width: 100%;
+        height: 25px;
+        transform: skew(-1deg, 3deg);
+    }
+    div:nth-child(2) {
+        width: 50%;
+        height: 20px;
+        background-color: $background-color;
+    }
+}
+
 .quiz-section {
-    background-color: $background-color;
-    background-image: url("../../../../assets/Sprinklers.svg");
-    padding: 25px;
+    overflow: hidden;
 
     h3 {
-        color: $white;
+        color: nth($grey-shades, 2);
+        background-color: $background-color;
         font-weight: 300;
+        padding-left: 24px;
+        padding-bottom: 20px;
+        font-size: 24px;
     }
-    li {
-        display: flex;
-        list-style: none;
-        color: $white;
-        font-size: 12px;
-        line-height: 35px;
-        font-weight: 600;
-        opacity: 90%;
-
-        img {
-            width: 35px;
-            padding-right: 20px;
+    ul {
+        padding-left: 20px;
+        background-color: $background-color;
+        background-image: url("../../../../assets/Sprinklers3.svg");
+        padding-top: 2px;
+        li {
+            display: flex;
+            list-style: none;
+            color: $white;
+            font-size: 14px;
+            line-height: 35px;
+            font-weight: 600;
+            opacity: 90%;
+            padding-bottom: 10px;
+            padding-left: 9px;
+
+            img {
+                width: 38.5px;
+                padding-right: 20px;
+            }
         }
     }
 }
+
+.btn-section {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    background-color: nth($grey-shades, 5);
+    height: 18vh;
+
+    button {
+        background-color: $teal;
+        width: 87vw;
+        color: white;
+    }
+
+    span {
+        font-size: 18px;
+        color: nth($grey-shades, 2 );
+        padding: 15px;
+        font-weight: 300;
+    }
+}

src/app/pages/dashboard/preliminary/quiz/quiz.component.html

@@ -0,0 +1,45 @@
+<header>
+    <div>
+        <h3>Quiz</h3>
+        <span>Question 01</span>
+    </div>
+    <div class="cross-icon">
+        <button [routerLink]="['/dashboard']">
+            <img src="../../../../assets/close_white_18dp.svg" alt="" />
+        </button>
+    </div>
+</header>
+
+<section class="upfold">
+    <h5>How would you correctly display, “Hello, how are you?”?</h5>
+    <div><span>01:00</span></div>
+</section>
+
+<section class="upfold-img">
+    <img src="../../../../../assets/Footer-bottom.svg" />
+</section>
+
+<section class="quiz-options">
+    <ul>
+        <li>
+            <input type="radio" id="html" name="fav_language" value="HTML" />
+            <label for="html">System.out.println(“Hello, how are you?”);</label>
+        </li>
+        <li>
+            <input type="radio" id="html" name="fav_language" value="HTML" />
+            <label for="html">println(‘Hello, how are you?’);</label>  
+        </li>
+        <li>
+            <input type="radio" id="html" name="fav_language" value="HTML" />
+            <label for="html">out.print(Hello, how are you?);</label>  
+        </li>
+        <li>
+            <input type="radio" id="html" name="fav_language" value="HTML" />
+            <label for="html">System.out.println(Hello, how are you?);</label>  
+        </li>
+    </ul>
+</section>
+
+<section class='next-page'>
+    <button>Next</button>
+</section>

src/app/pages/dashboard/preliminary/quiz/quiz.component.scss

@@ -0,0 +1,129 @@
+@import "../../../../../_theme.scss";
+
+header {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+    background-color: $background-color;
+    height: 90px;
+    top: 0;
+    left: 0;
+
+    h3 {
+        color: nth($grey-shades, 2);
+        font-weight: 300;
+        font-size: 24px;
+        padding: 15px;
+        padding-bottom: 5px;
+    }
+    span {
+        color: white;
+        font-size: 12px;
+        font-weight: 600;
+    }
+
+    .cross-icon {
+        padding-right: 10px;
+        position: absolute;
+        right: 0;
+
+        button {
+            border: none;
+            background-color: transparent;
+            width: 30px;
+            height: 30px;
+            margin: 14px;
+            cursor: pointer;
+        }
+        img {
+            width: 30px;
+        }
+    }
+}
+.upfold {
+    background-color: $background-color;
+    background-image: url("../../../../../assets/Sprinklers3.svg");
+    height: 30vh;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+
+    h5 {
+        color: nth($grey-shades, 2);
+        font-size: 23px;
+        font-weight: 300;
+        padding: 30px 50px;
+        text-align: center;
+        line-height: 45px;
+    }
+    div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        align-self: center;
+        width: 60px;
+        height: 60px;
+        border: 3.5px solid $greenishyellow;
+        border-radius: 50px;
+        color: white;
+
+        span {
+            font-size: 13px;
+        }
+    }
+}
+
+.upfold-img {
+    background-color: white;
+
+    img {
+        width: 100%;
+    }
+}
+.quiz-options {
+    ul {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        li {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: start;
+            list-style: none;
+            border: 2px solid nth($grey-shades, 1);
+            margin: 10px 17px;
+            height: 50px;
+            border-radius: 30px;
+
+            input {
+                margin: 0 20px;
+            }
+
+            label {
+                font-size: 14px;
+            }
+        }
+    }
+}
+
+
+.next-page{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    bottom: 0;
+    
+    button {
+        border-radius: 30px;
+        height: 50px;
+        width: 92vw;
+        font-size: 16px;
+        border: none;
+        margin: 5px;
+        font-weight: 600;
+    }
+}

src/app/pages/dashboard/preliminary/quiz/quiz.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuizComponent } from './quiz.component';
+
+describe('QuizComponent', () => {
+  let component: QuizComponent;
+  let fixture: ComponentFixture<QuizComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ QuizComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QuizComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/dashboard/preliminary/quiz/quiz.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-quiz',
+  templateUrl: './quiz.component.html',
+  styleUrls: ['./quiz.component.scss']
+})
+export class QuizComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/dashboard/skillinformation/skillinformation.component.html

@@ -1,8 +1,8 @@
 <header>
-    <li class="logo">
+    <div class="logo">
         <span>Step 1</span>
         <h5>Skill Information</h5>
-    </li>
+    </div>
     <li class="cross-icon">
         <button [routerLink]="['/dashboard']">
             <img src="../../../../assets/close_white_18dp.svg" alt="">