Skill Information UI Changes

src/app/pages/dashboard/_commonheader.scss

@@ -27,7 +27,7 @@ header {
             color: $white;
             font-family: "Poppins", sans-serif;
             font-size: 12px;
-            font-weight:500;
+            font-weight: 500;
         }
     }
 
@@ -42,7 +42,19 @@ header {
         }
         img {
             width: 30px;
-            // padding-left: 10px;
         }
     }
 }
+
+.footer-btn {
+    border-radius: 25px;
+    height: 45px;
+    font-size: 14px;
+    font-family: "Poppins", sans-serif;
+    border: none;
+    margin: 5px 0;
+    font-weight: 600;
+    width: 100%;
+    background-color: $green;
+    color: $white;
+}

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

@@ -1,17 +1,81 @@
 <header>
-    <div class="logo">
+    <li class="logo">
         <span>Step 1</span>
         <h5>Skill Information</h5>
-    </div>
-    <div class="cross-icon">
-        <button [routerLink] ="['/dashboard']">
+    </li>
+    <li class="cross-icon">
+        <button [routerLink]="['/dashboard']">
             <img src="../../../../assets/close_white_18dp.svg" alt="">
         </button>
-    </div>
+    </li>
 </header>
 
-<section>
+<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>
+        HTML/CSS/JS, Git.</p>
+</section>
+
+<section class='front-End'>
+    <h3>Front-end:</h3>
+    <ul>
+        <li>
+            <img src="../../../../assets/Angular8.png">
+            <span>Angular8+</span>
+        </li>
+        <li>
+            <img src="../../../../assets/ReactJS ReactTS.png">
+            <span>ReactJS/ ReactTS+</span>
+        </li>
+        <li>
+            <img src="../../../../assets/Ionic  Framework.png">
+            <span>Ionic Frameword</span>
+        </li>
+        <li>
+            <img src="../../../../assets/React Native.png">
+            <span>React Native</span>
+        </li>
+        <li>
+            <img src="../../../../assets/VueJS.png">
+            <span>VueJS+</span>
+        </li>
+    </ul>
+
+</section>
+
+<section class='backend-End'>
+    <h3>Back-End:</h3>
+    <ul>
+        <li>
+            <img src="../../../../assets/NodeJS.png">
+            <span>NodeJS</span>
+        </li>
+        <li>
+            <img src="../../../../assets/ReactJS ReactTS.png">
+            <span>ExpressJS</span>
+        </li>
+        <li>
+            <img src="../../../../assets/Ionic  Framework.png">
+            <span>Django Framework</span>
+        </li>
+    </ul>
+
+</section>
+
+<section class='beneficial'>
+    <h3>Beneficial:</h3>
+    <ul>
+        <li>
+            <img src="../../../../assets/Firebase.png">
+            <span>Firebase</span>
+        </li>
+        <li>
+            <img src="../../../../assets/DevOps.png">
+            <span>DevOps<br>(Docker/ <br> Kubernetes)</span>
+        </li>
+    </ul>
+</section>
+
+<section>
+    <button class='footer-btn'>Done!</button>
 </section>

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

@@ -1,2 +1,58 @@
-@import '../commonheader';
-@import '../../../../theme';
+@import "../commonheader";
+@import "../../../../theme";
+
+.upfold {
+    padding: 30px 25px 0px;
+    h3 {
+        font-size: 21px;
+        color: lighten($color: $heading-color, $amount: 20%);
+        text-align: center;
+        font-weight: 300;
+        padding-top: 10px;
+    }
+    p {
+        color: $content-color;
+        text-align: center;
+        font-size: 12.5px;
+        line-height: 25px;
+        font-weight: 500;
+        padding: 15px 0;
+        font-weight: 300;
+    }
+}
+
+section {
+    padding: 0 20px;
+
+    h3 {
+        text-align: center;
+        color: lighten($color: $heading-color, $amount: 0%);
+        padding-bottom: 10px;
+        font-size: 16px;
+        font-weight: 300;
+        padding: 10px 0;
+    }
+
+    ul {
+        display: grid;
+        grid-template-columns: repeat(2, 2fr);
+        padding: 15px 0;
+        li {
+            margin: 5px;
+            display: flex;
+            align-items: center;
+            list-style: none;
+            box-shadow: 0px 0px 3px 0px $button-color;
+            border-radius: 10px;
+
+            span {
+                color: $content-color;
+                font-size: 11.5px;
+            }
+            img {
+                padding: 12px;
+                width: 60px;
+            }
+        }
+    }
+}

src/app/pages/onboarding/_commonheader.scss

@@ -53,7 +53,6 @@ header {
     h3 {
         text-align: center;
         color: $white;
-        font-family: "Oswald", sans-serif;
         font-weight: 200;
         font-size: 27px;
         letter-spacing: 1px;
@@ -64,7 +63,6 @@ header {
         text-align: center;
         color: $text-color;
         font-size: 13px;
-        font-family: "Poppins", sans-serif;
         opacity: 70%;
         padding: 0 10px;
         line-height: 30px;
@@ -95,7 +93,6 @@ button {
 
     ::-webkit-input-placeholder {
         padding-left: 10px;
-        font-family: "Poppins", sans-serif;
         color: $text-color;
         font-size: 12px;
         background-repeat: no-repeat;
@@ -104,7 +101,6 @@ button {
     }
 
     label {
-        font-family: "Poppins", sans-serif;
         color: $label-color;
         font-size: 10px;
         font-weight: 600;

src/styles.scss

@@ -2,12 +2,27 @@
 @import "./theme";
 @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;400&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@100;200;300;400&display=swap");
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
 
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     // background-color: $background-color;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: "Oswald", sans-serif;
+}
 
+span,
+p,
+button,
+label {
+    font-family: "Poppins", sans-serif;
 }