Dashboard Changes --Partial Commit

src/app/common/styles/colors.scss

@@ -0,0 +1,3 @@
+$grey-shades: #f7f7f7, #939393, #151515;
+$teal: #33ce93;
+$greenishyellow: #6bd534;

src/app/common/styles/theme.scss

@@ -0,0 +1,77 @@
+@import "./colors.scss";
+
+%Commonheader {
+    background-color: nth($grey-shades, 3);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 9rem;
+    padding: 0 2.5rem 0 3.5rem;
+
+    h5 {
+        color: lighten($color: nth($grey-shades, 3), $amount: 70%);
+        font-weight: 300;
+        left: 0;
+        font-size: 2.4rem;
+        letter-spacing: 0.03rem;
+    }
+    .step {
+        color: white;
+        letter-spacing: 0.03rem;
+        font-size: 1.25rem;
+        font-weight: 500;
+    }
+
+    .cross-icon {
+        button {
+            border: none;
+            background-color: transparent;
+            width: 3rem;
+            height: 3rem;
+            cursor: pointer;
+            margin-top: 0.7rem;
+        }
+        img {
+            width: 3rem;
+        }
+    }
+}
+
+%CommonUpfold {
+    padding: 2rem;
+
+    img {
+        display: block;
+        width: 7em;
+        margin: 0 auto;
+        padding: 1.3rem 0;
+    }
+    h3 {
+        color: lighten($color: nth($grey-shades, 3), $amount: 25%);
+        text-align: center;
+        font-weight: 300;
+        padding: 3rem 0;
+        font-size: 2.4rem;
+        letter-spacing: 0.05rem;
+    }
+    p {
+        color: lighten($color: nth($grey-shades, 3), $amount: 50%);
+        text-align: center;
+        font-size: 1.4rem;
+        line-height: 2.8rem;
+        font-weight: 400;
+    }
+}
+
+%CommonButton {
+    margin: 0 auto;
+    padding: 2rem;
+
+    button {
+        width: 100%;
+        height: 5rem;
+        background-color: $teal;
+        border: none;
+        border-radius: 3rem;
+    }
+}

src/app/pages/dashboard/_commonheader.scss

@@ -5,38 +5,38 @@ header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: 90px;
+    height: 9rem;
     top: 0;
     left: 0;
-    padding-left:25px;
+    padding-left: 2.5rem;
 
     .logo {
         display: flex;
         flex-direction: column;
-        padding: 6px 14px;
+        padding: 0.6rem 1.4rem;
 
         h5 {
             color: $text-color;
             font-weight: 300;
             left: 0;
-            font-size: 24px;
-            letter-spacing: 0.3px;
+            font-size: 2.4rem;
+            letter-spacing: 0.03rem;
         }
         span {
             color: $white;
-            letter-spacing: 0.3px;
-            font-size: 13px;
+            letter-spacing: 0.03rem;
+            font-size: 1.3rem;
             font-weight: 500;
         }
     }
 
     .cross-icon {
-        padding-right: 10px;
+        padding-right: 1rem;
         button {
             border: none;
             background-color: transparent;
-            width: 30px;
-            height: 30px;
+            width: 3rem;
+            height: 3rem;
             margin: 14px;
             cursor: pointer;
         }
@@ -47,11 +47,11 @@ header {
 }
 
 .footer-btn {
-    border-radius: 25px;
-    height: 45px;
-    font-size: 14px;
+    border-radius: 2.5rem;
+    height: 4.5rem;
+    font-size: 1.4rem;
     border: none;
-    margin: 5px 0;
+    margin: 0.5rem 0;
     font-weight: 600;
     width: 100%;
     background-color: $green;
@@ -59,33 +59,33 @@ header {
 }
 
 .upfold {
-    padding: 30px 25px 0px;
+    padding: 3rem 2.5rem 0;
     h3 {
-        font-size: 24px;
+        font-size: 2.4rem;
         color: lighten($color: $heading-color, $amount: 20%);
         text-align: center;
         font-weight: 300;
-        padding-top: 13px;
+        padding-top: 1.3rem;
     }
     p {
         color: $content-color;
         text-align: center;
-        font-size: 14px;
-        line-height: 28px;
-        padding: 15px 0;
+        font-size: 1.4rem;
+        line-height: 2.8rem;
+        padding: 1.5rem 0;
         font-weight: 400;
     }
-    h5{
-        font-size: 15px;
+    h5 {
+        font-size: 1.5rem;
         font-weight: 300;
     }
 }
 
 button {
-    border-radius: 30px;
-    height: 50px;
-    font-size: 16px;
+    border-radius: 3rem;
+    height: 5rem;
+    font-size: 1.6rem;
     border: none;
-    margin: 5px;
+    margin: 0.5rem;
     font-weight: 600;
-}
+}

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

@@ -1,37 +1,47 @@
 <header>
-    <li class="logo">
-        <span>Step 2</span>
+    <div class="logo">
+        <span class="step">Step 2</span>
         <h5>Preliminary Round</h5>
-    </li>
-    <li class="cross-icon">
+    </div>
+    <div class="cross-icon">
         <button [routerLink]="['/dashboard']">
-            <img src="../../../../assets/close_white_18dp.svg" alt="">
+            <img src="../../../../assets/close_white_18dp.svg" alt="" />
         </button>
-    </li>
+    </div>
 </header>
 
-<section class='upfold'>
-    <img src='../../../../assets/Step 2.svg'>
-    <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 class="upfold">
+    <img class="upfold-image" src="../../../../assets/Step 2.svg" />
+    <h3 class="upfold-heading">Let us check your knowledge.</h3>
+    <p class="upfold-context">
+        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'>
+<section class="quiz-section-header">
     <div></div>
     <div></div>
 </section>
-<section class='quiz-section'>
+
+<section class="quiz-section">
     <h3>Quiz</h3>
     <ul>
-        <li> <img src="../../../../assets/question-circle-fill.svg"> 20 questions</li>
-        <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>
+        <li>
+            <img src="../../../../assets/question-circle-fill.svg" /> 20
+            questions
+        </li>
+        <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>
 </section>
 
-<section class='btn-section'>
-    <button [routerLink] = "['/dashboard/preliminary/quiz']">Start quiz</button>
+<section class="submit">
+    <button [routerLink]="['/dashboard/preliminary/quiz']">Start quiz</button>
     <span>All the best!</span>
-</section>
+</section>

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

@@ -1,21 +1,21 @@
-@import "../commonheader";
+@import "../../../common/styles/theme.scss";
+@import "../../../common/styles/colors.scss";
+
+header {
+    @extend %Commonheader;
+}
 
 .upfold {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 20px;
+    @extend %CommonUpfold;
 
-    img {
-        padding: 15px;
-        width: 100px;
+    .upfold-heading {
+        padding: 2rem 0;
     }
 }
 
 .quiz-section-header {
     div:nth-child(1) {
-        background-color: $background-color;
+        background-color: nth($grey-shades, 3);
         position: absolute;
         width: 100%;
         height: 25px;
@@ -24,7 +24,7 @@
     div:nth-child(2) {
         width: 50%;
         height: 20px;
-        background-color: $background-color;
+        background-color: nth($grey-shades, 3);
     }
 }
 
@@ -33,7 +33,7 @@
 
     h3 {
         color: nth($grey-shades, 2);
-        background-color: $background-color;
+        background-color: nth($grey-shades, 3);
         font-weight: 300;
         padding-left: 24px;
         padding-bottom: 20px;
@@ -41,13 +41,13 @@
     }
     ul {
         padding-left: 20px;
-        background-color: $background-color;
+        background-color: nth($grey-shades, 3);
         background-image: url("../../../../assets/Sprinklers3.svg");
         padding-top: 2px;
         li {
             display: flex;
             list-style: none;
-            color: $white;
+            color: white;
             font-size: 14px;
             line-height: 35px;
             font-weight: 600;
@@ -63,24 +63,22 @@
     }
 }
 
-.btn-section {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    background-color: nth($grey-shades, 5);
-    height: 18vh;
+.submit {
+    @extend %CommonButton;
+    background-color: nth($grey-shades, 3);
 
     button {
-        background-color: $teal;
-        width: 87vw;
         color: white;
+        font-size: 1.7rem;
+        font-weight: 600;
     }
 
     span {
-        font-size: 18px;
-        color: nth($grey-shades, 2 );
-        padding: 15px;
+        color: white;
+        text-align: center;
+        display: block;
+        font-size: 1.7em;
         font-weight: 300;
+        margin: 1.5rem;
     }
 }

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

@@ -1,13 +1,13 @@
 <header>
-    <li class="logo">
-        <span>Step 2</span>
+    <div class="logo">
+        <span class="step">Step 2</span>
         <h5>Preliminary Round</h5>
-    </li>
-    <li class="cross-icon">
+    </div>
+    <div class="cross-icon">
         <button [routerLink]="['/dashboard']">
             <img src="../../../../assets/close_white_18dp.svg" alt="" />
         </button>
-    </li>
+    </div>
 </header>
 
 <section class="upfold">
@@ -25,7 +25,7 @@
     <div></div>
 </section>
 <section class="quiz-section">
-    <h3>Quiz</h3>
+    <h3>Quiz Results</h3>
     <ul>
         <li>
             <img src="../../../../assets/check-circle-fill.svg" />17 questions
@@ -36,7 +36,7 @@
     </ul>
 </section>
 
-<section class="btn-section">
+<section class="submit">
     <button [routerLink]="['/dashboard']" class="dashboard-btn">
         Goto Dashboard
     </button>
@@ -44,6 +44,7 @@
         [routerLink]="['/dashboard/technincalinterview']"
         class="technical-btn"
     >
-        Goto next Step <span>Technical Interview</span>
+        Goto next Step <br />
+        <span>Technical Interview</span>
     </button>
 </section>

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

@@ -1,30 +1,43 @@
-@import "../../commonheader";
+@import "../../../../common/styles/theme.scss";
+@import "../../../../common/styles/colors.scss";
+
+header {
+    @extend %Commonheader;
+}
 
 .upfold {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 20px;
+    h3 {
+        font-size: 3.8rem;
+        padding: 0;
+        font-weight: 600;
+    }
 
     img {
-        width: 130px;
-        margin: 20px;
+        padding: 0rem 0;
+        width: 13.5em;
+        margin-top: 2rem;
     }
+
+    h5 {
+        font-size: 2.5rem;
+        font-weight: 300;
+        text-align: center;
+    }
+    @extend %CommonUpfold;
 }
 
 .quiz-section-header {
     div:nth-child(1) {
-        background-color: $background-color;
+        background-color: nth($grey-shades, 3);
         position: absolute;
         width: 100%;
-        height: 25px;
+        height: 2.5rem;
         transform: skew(-1deg, 3deg);
     }
     div:nth-child(2) {
         width: 50%;
-        height: 20px;
-        background-color: $background-color;
+        height: 2rem;
+        background-color: nth($grey-shades, 3);
     }
 }
 
@@ -33,59 +46,68 @@
 
     h3 {
         color: nth($grey-shades, 2);
-        background-color: $background-color;
+        background-color: nth($grey-shades, 3);
         font-weight: 300;
-        padding-left: 24px;
-        padding-bottom: 20px;
-        font-size: 24px;
+        padding-left: 2.4rem;
+        padding-bottom: 2rem;
+        font-size: 2.4rem;
     }
     ul {
-        padding-left: 20px;
-        background-color: $background-color;
-        // background-image: url("../../../../assets/Sprinklers3.svg");
-        padding-top: 2px;
+        padding-left: 2rem;
+        background-color: nth($grey-shades, 3);
+        background-image: url("../../../../../assets/Sprinklers3.svg");
+        padding-top: 0.2rem;
         li {
             display: flex;
             list-style: none;
-            color: $white;
-            font-size: 14px;
-            line-height: 35px;
+            color: white;
+            font-size: 1.4rem;
+            line-height: 3.5rem;
             font-weight: 600;
             opacity: 90%;
-            padding-bottom: 10px;
-            padding-left: 9px;
+            padding-bottom: 1rem;
+            padding-left: 0.9rem;
 
             img {
-                width: 38.5px;
-                padding-right: 20px;
+                width: 3.85rem;
+                padding-right: 2rem;
             }
         }
     }
 }
 
-.btn-section {
+.submit {
+    @extend %CommonButton;
+
+    background-color: nth($grey-shades, 3);
     display: flex;
     align-items: center;
     flex-direction: row;
     justify-content: center;
-    background-color: nth($grey-shades, 5);
-    height: 18vh;
+    height: 16vh;
 
     .dashboard-btn {
+        margin: 0 0.5rem;
         width: 42vw;
-        border: 2px solid $teal;
+        border: 0.2rem solid $teal;
         background-color: transparent;
         color: $teal;
+        font-size: 1.5rem;
+        font-weight: 500;
     }
 
     .technical-btn {
+        margin: 0 0.5rem;
         color: white;
         width: 42vw;
         background-color: $teal;
+        font-size: 1.5rem;
+        font-weight: 500;
+
         span {
-            font-size: 13px;
+            font-size: 1.1rem;
             color: white;
-            padding: 15px;
+            padding: 1.5rem;
             font-weight: 300;
         }
     }

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

@@ -1,83 +1,69 @@
-@import "../../../../../_theme.scss";
+@import "../../../../common/styles/theme.scss";
 
 header {
+    @extend %Commonheader;
     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);
+        color: nth($grey-shades, 1);
         font-weight: 300;
-        font-size: 24px;
-        padding: 15px;
-        padding-bottom: 5px;
+        font-size: 2.4rem;
+        padding: 1.5rem;
+        padding-bottom: 0.5rem;
     }
     span {
         color: white;
-        font-size: 12px;
+        font-size: 1.2rem;
         font-weight: 600;
     }
 
     .cross-icon {
-        padding-right: 10px;
+        padding-right: 2rem;
         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-color: nth($grey-shades, 3);
     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;
+        color: nth($grey-shades, 1);
+        font-size: 2.3rem;
         font-weight: 300;
-        padding: 30px 50px;
+        padding: 3rem 5rem;
         text-align: center;
-        line-height: 45px;
+        line-height: 4.5rem;
+        opacity: 80%;
     }
     div {
         display: flex;
+        position: absolute;
         justify-content: center;
         align-items: center;
-        align-self: center;
-        width: 60px;
-        height: 60px;
-        border: 3.5px solid $greenishyellow;
-        border-radius: 50px;
+        width: 6rem;
+        height: 6rem;
+        border: 0.35rem solid $greenishyellow;
+        border-radius: 5rem;
         color: white;
+        left: 0;
+        right: 0;
+        margin-left: auto;
+        margin-right: auto;
 
         span {
-            font-size: 13px;
+            font-size: 1.3rem;
         }
     }
+
 }
 
 .upfold-img {
     background-color: white;
-
     img {
         width: 100%;
     }
@@ -94,36 +80,35 @@ header {
             align-items: center;
             justify-content: start;
             list-style: none;
-            border: 2px solid nth($grey-shades, 1);
-            margin: 10px 17px;
-            height: 50px;
-            border-radius: 30px;
+            border: 0.2rem solid nth($grey-shades, 1);
+            margin: 1rem 1.7rem;
+            height: 5rem;
+            border-radius: 3rem;
 
             input {
-                margin: 0 20px;
+                margin: 0 2rem;
             }
 
             label {
-                font-size: 14px;
+                font-size: 1.4rem;
             }
         }
     }
 }
 
-
-.next-page{
+.next-page {
     display: flex;
     justify-content: center;
     align-items: center;
     bottom: 0;
-    
+
     button {
-        border-radius: 30px;
-        height: 50px;
+        border-radius: 3rem;
+        height: 5rem;
         width: 92vw;
-        font-size: 16px;
+        font-size: 1.6rem;
         border: none;
-        margin: 5px;
+        margin: 0.5rem;
         font-weight: 600;
     }
-}
+}

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

@@ -1,81 +1,84 @@
 <header>
     <div class="logo">
-        <span>Step 1</span>
+        <span class="step">Step 1</span>
         <h5>Skill Information</h5>
     </div>
-    <li class="cross-icon">
+    <div class="cross-icon">
         <button [routerLink]="['/dashboard']">
-            <img src="../../../../assets/close_white_18dp.svg" alt="">
+            <img src="../../../../assets/close_white_18dp.svg" alt="" />
         </button>
-    </li>
+    </div>
 </header>
 
 <section class="upfold">
-    <h3>What are we good at?</h3>
-    <p>Please note that you should have knowledge of at least 1 tech stack in each category & must know the basics of
-        HTML/CSS/JS, Git.</p>
+    <h3 >What are you good at?</h3>
+    <p>
+        Please note that you should have knowledge of at least 1 tech stack in
+        each category & must know the basics of HTML/CSS/JS, Git.
+    </p>
 </section>
 
-<section class='front-End'>
+<section class="frontend">
     <h3>Front-end:</h3>
     <ul>
         <li>
-            <img src="../../../../assets/Angular8.png">
+            <img src="../../../../assets/Angular8.png" />
             <span>Angular8+</span>
         </li>
         <li>
-            <img src="../../../../assets/ReactJS ReactTS.png">
+            <img src="../../../../assets/ReactJS ReactTS.png" />
             <span>ReactJS/ ReactTS+</span>
         </li>
         <li>
-            <img src="../../../../assets/Ionic  Framework.png">
+            <img src="../../../../assets/Ionic  Framework.png" />
             <span>Ionic Frameword</span>
         </li>
         <li>
-            <img src="../../../../assets/React Native.png">
+            <img src="../../../../assets/React Native.png" />
             <span>React Native</span>
         </li>
         <li>
-            <img src="../../../../assets/VueJS.png">
+            <img src="../../../../assets/VueJS.png" />
             <span>VueJS+</span>
         </li>
     </ul>
-
 </section>
 
-<section class='backend-End'>
-    <h3>Back-End:</h3>
+<section class="backend">
+    <h3>Backend:</h3>
     <ul>
         <li>
-            <img src="../../../../assets/NodeJS.png">
+            <img src="../../../../assets/NodeJS.png" />
             <span>NodeJS</span>
         </li>
         <li>
-            <img src="../../../../assets/ReactJS ReactTS.png">
+            <img src="../../../../assets/ReactJS ReactTS.png" />
             <span>ExpressJS</span>
         </li>
         <li>
-            <img src="../../../../assets/Ionic  Framework.png">
+            <img src="../../../../assets/Ionic  Framework.png" />
             <span>Django Framework</span>
         </li>
     </ul>
-
 </section>
 
-<section class='beneficial'>
+<section class="beneficial">
     <h3>Beneficial:</h3>
     <ul>
         <li>
-            <img src="../../../../assets/Firebase.png">
+            <img src="../../../../assets/Firebase.png" />
             <span>Firebase</span>
         </li>
         <li>
-            <img src="../../../../assets/DevOps.png">
-            <span>DevOps<br>(Docker/ <br> Kubernetes)</span>
+            <img src="../../../../assets/DevOps.png" />
+            <span
+                >DevOps<br />(Docker/ <br />
+                Kubernetes)</span
+            >
         </li>
     </ul>
 </section>
 
-<section>
-    <button [routerLink]="['/dashboard/preliminary']" class='footer-btn'>Done!</button>
-</section>
+<section class="submit">
+    <button [routerLink]="['/dashboard/preliminary']">Done!</button>
+</section>

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

@@ -1,38 +1,59 @@
-@import "../commonheader";
+// @import "../commonheader";
 @import "../../../../theme";
+@import "../../../common/styles/theme.scss";
 
-section {
-    padding: 0 20px;
+header {
+    @extend %Commonheader;
+}
+
+.upfold {
+    @extend %CommonUpfold;
+}
+
+.backend,
+.frontend,
+.beneficial {
+    padding: 0 2rem;
 
     h3 {
         text-align: center;
-        color: lighten($color: $heading-color, $amount: 0%);
-        padding-bottom: 10px;
-        font-size: 16px;
+        color: lighten($color: nth($grey-shades, 3), $amount:10%);
+        font-size: 1.8rem;
         font-weight: 300;
-        padding: 10px 0;
+        padding: 1.8rem 0;
     }
 
     ul {
         display: grid;
         grid-template-columns: repeat(2, 2fr);
-        padding: 15px 0;
+        padding: 1.5rem 0;
         li {
-            margin: 5px;
+            margin: 0.6rem;
             display: flex;
             align-items: center;
             list-style: none;
-            box-shadow: 0px 0px 3px 0px $button-color;
-            border-radius: 10px;
+            box-shadow: 0 0 0.3rem 0 lighten($color:nth($grey-shades, 2), $amount: 30%);
+            border-radius: 2.5rem;
 
             span {
                 color: $content-color;
-                font-size: 11.5px;
+                font-size: 1.4rem;
+                line-height: 1.8rem;
             }
             img {
-                padding: 12px;
-                width: 60px;
+                padding: 1.7rem;
+                width: 7rem;
             }
         }
     }
 }
+
+.submit{
+    @extend %CommonButton;
+
+    button{
+        color: white;
+        font-size: 1.7rem;
+        font-weight: 600;
+    }
+}

src/styles.scss

@@ -5,15 +5,14 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
 
 
-// :root{ 
-//     font-size: 62.5%;
-// }
+:root{ 
+    font-size: 62.5%;
+}
 
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    // background-color: $background-color;
 }
 
 h1,