Common styles scss code removed from each scss file and added to common file with shadow attribute for header

src/app/attendance/attendance.component.html

@@ -1,5 +1,5 @@
-<div class="page">
-    <header class="nav-header">
+<section class="page-container full-bg" color="black">
+    <header class="nav-header" shadow="true">
         <button class="close-button" (click)="back()">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
         </button>
@@ -268,4 +268,4 @@
             </ul>
         </li>
     </ul>
-</div>
+</section>

src/app/attendance/attendance.component.scss

@@ -1,51 +1,3 @@
-.page {
-    background-color: var(--black);
-    height: 100vh;
-    overflow: auto;
-    padding-bottom: 60px;
-}
-
-.nav-header {
-    background-color: var(--ash-black);
-    display: flex;
-    align-items: center;
-    padding: 0 5%;
-    height: 60px;
-    position: sticky;
-    position: -webkit-sticky;
-    top: 0;
-    z-index: 1;
-    box-shadow: 0px 0px 5px var(--black);
-
-    .close-button {
-        border: 0px;
-        background-color: transparent;
-        .icon {
-            width: 16px;
-            height: 16px;
-            fill: var(--light-grey);
-        }
-    }
-
-    h5 {
-        font-size: 16px;
-        color: white;
-        font-weight: 400;
-        margin-left: 20px;
-        letter-spacing: 1px;
-
-        .icon {
-            width: 15px;
-            height: 15px;
-            fill: white;
-            margin-right: 3px;
-            vertical-align: middle;
-            position: relative;
-            top: -1px;
-        }
-    }
-}
-
 .statistics-upfold {
     display: flex;
     align-items: center;

src/app/calendar/calendar.component.html

@@ -1,5 +1,5 @@
-<div class="page">
-    <header class="nav-header">
+<section class="page-container full-bg" color="ash-black">
+    <header class="nav-header" shadow="true">
         <button class="close-button" (click)="back()">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
         </button>
@@ -182,4 +182,4 @@
     </section>
 
     <button class="add-button"> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/plus.svg"></svg-icon> </button>
-</div>
+</section>

src/app/calendar/calendar.component.scss

@@ -1,54 +1,16 @@
-.page {
-    height: 100vh;
-    overflow: auto;
-    background-color: var(--ash-black);
+.page-container {
+    padding-bottom: 0;
 }
 
-
 .nav-header {
-    background-color: var(--ash-black);
-    display: flex;
-    align-items: center;
-    padding: 0 5%;
-    height: 60px;
-    position: sticky;
-    position: -webkit-sticky;
-    top: 0;
-    z-index: 1;
-
-    .close-button {
-        border: 0px;
-        background-color: transparent;
-        .icon {
-            width: 16px;
-            height: 16px;
-            fill: var(--light-grey);
-        }
-    }
-
-    .show-all-button {
+    button.show-all-button {
         margin-left: auto;
         background-color: var(--dark-grey);
         color: white;
-        border: 0px;
-        border-radius: 3px;
-        height: 35px;
-        padding: 0 15px;
         font-size: 14px;
-    }
-
-    .profile-button {
-        background-color: transparent;
-        margin-left: auto;
-        border: 0px;
-        margin-top: 5px;
-    }
-
-    img {
-        width: 35px;
-        height: 35px;
-        border-radius: 50%;
-        overflow: hidden;
+        height: 40px;
+        border-radius: 5px;
+        padding: 0 15px;
     }
 }
 

src/app/chat-page/chat-page.component.html

@@ -1,5 +1,5 @@
-<div class="page">
-    <header class="nav-header">
+<section class="page-container full-bg" color="ash-black">
+    <header class="nav-header" shadow="true">
         <button class="close-button" (click)="back()">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
         </button>
@@ -60,4 +60,4 @@
         (hideChat)="getChatEvent($event)"></app-chat-window>
     </section>
 
-</div>
+</section>

src/app/chat-page/chat-page.component.scss

@@ -1,48 +1,5 @@
-.page {
-    background-color: var(--ash-black);
-    height: 100vh;
-    overflow: auto;
-}
-
-.nav-header {
-    background-color: var(--ash-black);
-    display: flex;
-    align-items: center;
-    padding: 0 5%;
-    height: 60px;
-    position: sticky;
-    position: -webkit-sticky;
-    top: 0;
-    z-index: 1;
-    box-shadow: 0px 0px 5px var(--black);
-
-    .close-button {
-        border: 0px;
-        background-color: transparent;
-        .icon {
-            width: 15px;
-            height: 15px;
-            fill: var(--light-grey);
-        }
-    }
-
-    h5 {
-        font-size: 16px;
-        color: white;
-        font-weight: 400;
-        margin-left: 20px;
-        letter-spacing: 1px;
-
-        .icon {
-            width: 15px;
-            height: 15px;
-            fill: white;
-            margin-right: 3px;
-            vertical-align: middle;
-            position: relative;
-            top: -1px;
-        }
-    }
+.page-container {
+    padding-bottom: 0;
 }
 
 .segment-buttons {

src/app/forum-page/forum-page.component.html

@@ -1,4 +1,4 @@
-<div class="page">
+<section class="page-container full-bg" color="black">
     <header class="nav-header">
         <button class="close-button" (click)="back()">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
@@ -10,4 +10,4 @@
     </header>
 
     <app-forum></app-forum>
-</div>
+</section>

src/app/forum-page/forum-page.component.scss

@@ -1,46 +0,0 @@
-.page {
-    background-color: var(--black);
-    height: 100vh;
-    overflow: auto;
-}
-
-.nav-header {
-    background-color: var(--ash-black);
-    display: flex;
-    align-items: center;
-    padding: 0 5%;
-    height: 60px;
-    position: sticky;
-    position: -webkit-sticky;
-    top: 0;
-    z-index: 1;
-    box-shadow: 0px 0px 5px var(--black);
-
-    .close-button {
-        border: 0px;
-        background-color: transparent;
-        .icon {
-            width: 15px;
-            height: 15px;
-            fill: var(--light-grey);
-        }
-    }
-
-    h5 {
-        font-size: 16px;
-        color: white;
-        font-weight: 400;
-        margin-left: 20px;
-        letter-spacing: 1px;
-
-        .icon {
-            width: 15px;
-            height: 15px;
-            fill: white;
-            margin-right: 3px;
-            vertical-align: middle;
-            position: relative;
-            top: -1px;
-        }
-    }
-}

src/app/reusable-components/forum/post-details/post-details.component.html

@@ -1,4 +1,4 @@
-<div class="page" *ngIf="postDetails">
+<section class="page-container full-bg" color="black" *ngIf="postDetails">
     <header class="nav-header">
         <button class="close-button" (click)="back()">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
@@ -146,4 +146,4 @@
         <button class="post-comment-button"> Submit </button>
     </section>
 
-</div>
+</section>

src/app/reusable-components/forum/post-details/post-details.component.scss

@@ -1,51 +1 @@
 @import '../forum.component.scss';
-
-.page {
-    background-color: var(--black);
-    height: 100vh;
-    overflow: auto;
-}
-
-.nav-header {
-    background-color: var(--ash-black);
-    display: flex;
-    align-items: center;
-    padding: 0 5%;
-    height: 60px;
-    position: sticky;
-    position: -webkit-sticky;
-    top: 0;
-    z-index: 1;
-    box-shadow: 0px 0px 5px var(--black);
-
-    .close-button {
-        border: 0px;
-        background-color: transparent;
-        .icon {
-            width: 15px;
-            height: 15px;
-            fill: var(--light-grey);
-        }
-    }
-
-    h5 {
-        font-size: 16px;
-        color: white;
-        font-weight: 400;
-        margin-left: 20px;
-        letter-spacing: 1px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        .icon {
-            width: 15px;
-            height: 15px;
-            fill: white;
-            margin-right: 3px;
-            vertical-align: middle;
-            position: relative;
-            top: -1px;
-        }
-    }
-}

src/app/settings/settings.component.html

@@ -1,4 +1,4 @@
-<div class="page">
+<section class="page-container full-bg" color="black">
     <header class="nav-header">
         <button class="close-button" (click)="back()">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
@@ -43,4 +43,4 @@
             Terms & Policy
         </li>
     </ul>
-</div>
+</section>

src/app/settings/settings.component.scss

@@ -1,51 +1,3 @@
-.page {
-    background-color: var(--black);
-    height: 100vh;
-    overflow: auto;
-}
-
-.nav-header {
-    background-color: var(--ash-black);
-    display: flex;
-    align-items: center;
-    padding: 0 5%;
-    height: 60px;
-    position: sticky;
-    position: -webkit-sticky;
-    top: 0;
-    z-index: 1;
-    box-shadow: 0px 0px 5px var(--black);
-
-    .close-button {
-        border: 0px;
-        background-color: transparent;
-        .icon {
-            width: 15px;
-            height: 15px;
-            fill: var(--light-grey);
-        }
-    }
-
-    h5 {
-        font-size: 16px;
-        color: white;
-        font-weight: 400;
-        margin-left: 20px;
-        letter-spacing: 1px;
-
-        .icon {
-            width: 15px;
-            height: 15px;
-            fill: white;
-            margin-right: 3px;
-            vertical-align: middle;
-            position: relative;
-            top: -1px;
-        }
-    }
-}
-
-
 ul {
     list-style: none;
 }

src/app/tabs/courses/chapter-notes/chapter-notes.component.html

@@ -1,4 +1,4 @@
-<div class="page">
+<section class="page-container full-bg" color="black">
     <header class="nav-header">
         <button class="close-button" (click)="back()">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
@@ -32,4 +32,4 @@
 
     </div>
 
-</div>
+</section>

src/app/tabs/courses/chapter-notes/chapter-notes.component.scss

@@ -1,50 +1,3 @@
-.page {
-    background-color: var(--black);
-    height: 100vh;
-    padding-bottom: 60px;
-    overflow: auto;
-}
-
-.nav-header {
-    background-color: var(--ash-black);
-    display: flex;
-    align-items: center;
-    padding: 0 5%;
-    height: 60px;
-    position: sticky;
-    position: -webkit-sticky;
-    top: 0;
-    z-index: 1;
-
-    .close-button {
-        border: 0px;
-        background-color: transparent;
-        .icon {
-            width: 16px;
-            height: 16px;
-            fill: var(--light-grey);
-        }
-    }
-
-    h5 {
-        font-size: 16px;
-        color: white;
-        font-weight: 400;
-        margin-left: 20px;
-        letter-spacing: 1px;
-
-        .icon {
-            width: 15px;
-            height: 15px;
-            fill: white;
-            margin-right: 3px;
-            vertical-align: middle;
-            position: relative;
-            top: -1px;
-        }
-    }
-}
-
 h2 {
     padding: 0 5%;
     font-size: 22px;

src/app/tabs/courses/quiz/quiz.component.html

@@ -1,5 +1,5 @@
-<section class="page" *ngIf="questionList.length > 0">
-    <header class="nav-header" *ngIf="quizSegment !== 'END_PAGE'">
+<section class="page-container full-bg" color="black" *ngIf="questionList.length > 0">
+    <header class="nav-header" shadow="true" *ngIf="quizSegment !== 'END_PAGE'">
         <button class="close-button" (click)="back()">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
         </button>

src/app/tabs/courses/quiz/quiz.component.scss

@@ -1,56 +1,15 @@
-.page {
-    background-color: var(--black);
-    height: 100vh;
-    overflow: auto;
+.page-container {    
+    padding-bottom: 0;
 }
 
 .nav-header {
-    background-color: var(--ash-black);
-    display: flex;
-    align-items: center;
-    padding: 0 5%;
-    height: 60px;
-    position: sticky;
-    position: -webkit-sticky;
-    top: 0;
-    z-index: 1;
-    box-shadow: 0px 0px 5px var(--black);
-
-    button {
-        border: 0px;
-        background-color: transparent;
-        .icon {
-            width: 16px;
-            height: 16px;
-            fill: var(--light-grey);
-        }
-
-        &.list-button {
-            margin-left: auto;
-
-            .icon {
-                width: 20px;
-                height: 20px;
-                fill: white;
-            }
-        }
-    }
-
-    h5 {
-        font-size: 16px;
-        color: white;
-        font-weight: 400;
-        margin-left: 20px;
-        letter-spacing: 1px;
+    button.list-button {
+        margin-left: auto;
 
         .icon {
-            width: 15px;
-            height: 15px;
+            width: 20px;
+            height: 20px;
             fill: white;
-            margin-right: 3px;
-            vertical-align: middle;
-            position: relative;
-            top: -1px;
         }
     }
 }

src/app/tabs/courses/video-chapter/video-chapter.component.html

@@ -1,4 +1,4 @@
-<div class="page">
+<section class="page-container full-bg" color="black">
     <header class="nav-header">
         <button class="close-button" (click)="back()">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
@@ -127,4 +127,4 @@
         </button>
         <textarea placeholder="Your thoughts"></textarea>
     </section>
-</div>
+</section>

src/app/tabs/courses/video-chapter/video-chapter.component.scss

@@ -1,50 +1,3 @@
-.page {
-    background-color: var(--black);
-    height: 100vh;
-    overflow: auto;
-    padding-bottom: 60px;
-}
-
-.nav-header {
-    background-color: var(--ash-black);
-    display: flex;
-    align-items: center;
-    padding: 0 5%;
-    height: 60px;
-    position: sticky;
-    position: -webkit-sticky;
-    top: 0;
-    z-index: 1;
-
-    .close-button {
-        border: 0px;
-        background-color: transparent;
-        .icon {
-            width: 16px;
-            height: 16px;
-            fill: var(--light-grey);
-        }
-    }
-
-    h5 {
-        font-size: 16px;
-        color: white;
-        font-weight: 400;
-        margin-left: 20px;
-        letter-spacing: 1px;
-
-        .icon {
-            width: 15px;
-            height: 15px;
-            fill: white;
-            margin-right: 3px;
-            vertical-align: middle;
-            position: relative;
-            top: -1px;
-        }
-    }
-}
-
 .video-player {
     background-color: var(--dark-grey);
     color: white;

src/app/tabs/courses/video-chapter/video-notes/video-notes.component.scss

@@ -5,46 +5,6 @@
     overflow: auto;
 }
 
-.nav-header {
-    background-color: var(--ash-black);
-    display: flex;
-    align-items: center;
-    padding: 0 5%;
-    height: 60px;
-    position: sticky;
-    position: -webkit-sticky;
-    top: 0;
-    z-index: 1;
-
-    .close-button {
-        border: 0px;
-        background-color: transparent;
-        .icon {
-            width: 16px;
-            height: 16px;
-            fill: var(--light-grey);
-        }
-    }
-
-    h5 {
-        font-size: 16px;
-        color: white;
-        font-weight: 400;
-        margin-left: 20px;
-        letter-spacing: 1px;
-
-        .icon {
-            width: 15px;
-            height: 15px;
-            fill: white;
-            margin-right: 3px;
-            vertical-align: middle;
-            position: relative;
-            top: -1px;
-        }
-    }
-}
-
 h2 {
     padding: 0 5%;
     font-size: 22px;

src/app/tabs/home/home.component.scss

@@ -62,7 +62,7 @@
     z-index: 1;
     transition: width 0.5s, border-radius 0.5s;
     overflow: hidden;
-    height: 30vh;
+    height: 35vh;
     background-color: var(--dark-grey);
     flex-direction: column;
 
@@ -206,7 +206,7 @@
     transition: width 0.5s, border-radius 0.5s;
     position: sticky;
     position: -webkit-sticky;
-    top: 30vh;
+    top: 35vh;
     z-index: 1;
 
     @media screen and (min-width: 1023px) {

src/app/tabs/more/more.component.html

@@ -1,6 +1,6 @@
 <div class="page-container">
 
-    <header class="nav-header">
+    <header class="header-bar">
         <button class="settings-button" [routerLink]="['/settings']">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/settings.svg"></svg-icon>
         </button>

src/app/tabs/more/more.component.scss

@@ -2,7 +2,7 @@
     position: relative;
 }
 
-.nav-header {
+.header-bar {
     display: flex;
     align-items: center;
     padding: 0 5%;
@@ -42,7 +42,7 @@
 .upfold {
     width: 100%;
     text-align: center;
-    height: 30vh;
+    height: 35vh;
     display: flex;
     align-items: center;
     justify-content: center;

src/styles.scss

@@ -61,7 +61,7 @@
 .page-container {
     height: 100vh;
     overflow: auto;
-    padding-bottom: 100px;
+    padding-bottom: 70px;
 
     &.half-bg {
         &::before {
@@ -100,3 +100,46 @@
         }
     }
 }
+
+.nav-header {
+    background-color: var(--ash-black);
+    display: flex;
+    align-items: center;
+    padding: 0 5%;
+    height: 60px;
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    z-index: 1;
+
+    &[shadow="true"] {
+        box-shadow: 0px 0px 5px var(--black);
+    }
+
+    button {
+        border: 0px;
+        background-color: transparent;
+        .icon {
+            width: 16px;
+            height: 16px;
+            fill: var(--light-grey);
+        }
+    }
+
+    h5 {
+        font-size: 16px;
+        color: white;
+        font-weight: 400;
+        margin-left: 20px;
+        letter-spacing: 1px;
+
+        .icon {
+            width: 15px;
+            height: 15px;
+            fill: white;
+            margin-right: 3px;
+            vertical-align: middle;
+            position: relative;
+        }
+    }
+}