From 5afa521482c5a256eafd11cf651add0f29b6d4d3 Mon Sep 17 00:00:00 2001
From: kj1352 <nikhilkj24@gmail.com>
Date: Sat, 27 Jun 2020 16:40:22 +0530
Subject: [PATCH] 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  |  6 +--
 src/app/attendance/attendance.component.scss  | 48 -----------------
 src/app/calendar/calendar.component.html      |  6 +--
 src/app/calendar/calendar.component.scss      | 50 +++--------------
 src/app/chat-page/chat-page.component.html    |  6 +--
 src/app/chat-page/chat-page.component.scss    | 47 +---------------
 src/app/forum-page/forum-page.component.html  |  4 +-
 src/app/forum-page/forum-page.component.scss  | 46 ----------------
 .../post-details/post-details.component.html  |  4 +-
 .../post-details/post-details.component.scss  | 50 -----------------
 src/app/settings/settings.component.html      |  4 +-
 src/app/settings/settings.component.scss      | 48 -----------------
 .../chapter-notes.component.html              |  4 +-
 .../chapter-notes.component.scss              | 47 ----------------
 src/app/tabs/courses/quiz/quiz.component.html |  4 +-
 src/app/tabs/courses/quiz/quiz.component.scss | 53 +++----------------
 .../video-chapter.component.html              |  4 +-
 .../video-chapter.component.scss              | 47 ----------------
 .../video-notes/video-notes.component.scss    | 40 --------------
 src/app/tabs/home/home.component.scss         |  4 +-
 src/app/tabs/more/more.component.html         |  2 +-
 src/app/tabs/more/more.component.scss         |  4 +-
 src/styles.scss                               | 45 +++++++++++++++-
 23 files changed, 84 insertions(+), 489 deletions(-)

diff --git a/src/app/attendance/attendance.component.html b/src/app/attendance/attendance.component.html
index c7df51f..20a087c 100644
--- a/src/app/attendance/attendance.component.html
+++ b/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>
diff --git a/src/app/attendance/attendance.component.scss b/src/app/attendance/attendance.component.scss
index af1ca8e..916adcd 100644
--- a/src/app/attendance/attendance.component.scss
+++ b/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;
diff --git a/src/app/calendar/calendar.component.html b/src/app/calendar/calendar.component.html
index 764870f..b685d76 100644
--- a/src/app/calendar/calendar.component.html
+++ b/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>
diff --git a/src/app/calendar/calendar.component.scss b/src/app/calendar/calendar.component.scss
index 980d653..3f39935 100644
--- a/src/app/calendar/calendar.component.scss
+++ b/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;
     }
 }
 
diff --git a/src/app/chat-page/chat-page.component.html b/src/app/chat-page/chat-page.component.html
index 469d300..a577035 100644
--- a/src/app/chat-page/chat-page.component.html
+++ b/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>
diff --git a/src/app/chat-page/chat-page.component.scss b/src/app/chat-page/chat-page.component.scss
index f301246..8de921d 100644
--- a/src/app/chat-page/chat-page.component.scss
+++ b/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 {
diff --git a/src/app/forum-page/forum-page.component.html b/src/app/forum-page/forum-page.component.html
index 6997324..09c1202 100644
--- a/src/app/forum-page/forum-page.component.html
+++ b/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>
diff --git a/src/app/forum-page/forum-page.component.scss b/src/app/forum-page/forum-page.component.scss
index dfab091..e69de29 100644
--- a/src/app/forum-page/forum-page.component.scss
+++ b/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;
-        }
-    }
-}
diff --git a/src/app/reusable-components/forum/post-details/post-details.component.html b/src/app/reusable-components/forum/post-details/post-details.component.html
index f15b7ba..a736151 100644
--- a/src/app/reusable-components/forum/post-details/post-details.component.html
+++ b/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>
diff --git a/src/app/reusable-components/forum/post-details/post-details.component.scss b/src/app/reusable-components/forum/post-details/post-details.component.scss
index e5e867c..7b46e59 100644
--- a/src/app/reusable-components/forum/post-details/post-details.component.scss
+++ b/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;
-        }
-    }
-}
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
index 659eb37..2d44707 100644
--- a/src/app/settings/settings.component.html
+++ b/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>
diff --git a/src/app/settings/settings.component.scss b/src/app/settings/settings.component.scss
index 4cea47b..aa0d890 100644
--- a/src/app/settings/settings.component.scss
+++ b/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;
 }
diff --git a/src/app/tabs/courses/chapter-notes/chapter-notes.component.html b/src/app/tabs/courses/chapter-notes/chapter-notes.component.html
index 3362f09..bef6dac 100644
--- a/src/app/tabs/courses/chapter-notes/chapter-notes.component.html
+++ b/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>
diff --git a/src/app/tabs/courses/chapter-notes/chapter-notes.component.scss b/src/app/tabs/courses/chapter-notes/chapter-notes.component.scss
index 9e18c3e..7756b47 100644
--- a/src/app/tabs/courses/chapter-notes/chapter-notes.component.scss
+++ b/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;
diff --git a/src/app/tabs/courses/quiz/quiz.component.html b/src/app/tabs/courses/quiz/quiz.component.html
index 2eeccbd..ee96724 100644
--- a/src/app/tabs/courses/quiz/quiz.component.html
+++ b/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>
diff --git a/src/app/tabs/courses/quiz/quiz.component.scss b/src/app/tabs/courses/quiz/quiz.component.scss
index 4ec6c65..7cf671f 100644
--- a/src/app/tabs/courses/quiz/quiz.component.scss
+++ b/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;
         }
     }
 }
diff --git a/src/app/tabs/courses/video-chapter/video-chapter.component.html b/src/app/tabs/courses/video-chapter/video-chapter.component.html
index cbbb973..59457fe 100644
--- a/src/app/tabs/courses/video-chapter/video-chapter.component.html
+++ b/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>
diff --git a/src/app/tabs/courses/video-chapter/video-chapter.component.scss b/src/app/tabs/courses/video-chapter/video-chapter.component.scss
index c4ac0d0..eece424 100644
--- a/src/app/tabs/courses/video-chapter/video-chapter.component.scss
+++ b/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;
diff --git a/src/app/tabs/courses/video-chapter/video-notes/video-notes.component.scss b/src/app/tabs/courses/video-chapter/video-notes/video-notes.component.scss
index e96bebf..e1f6b7f 100644
--- a/src/app/tabs/courses/video-chapter/video-notes/video-notes.component.scss
+++ b/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;
diff --git a/src/app/tabs/home/home.component.scss b/src/app/tabs/home/home.component.scss
index e34a50b..2154c51 100644
--- a/src/app/tabs/home/home.component.scss
+++ b/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) {
diff --git a/src/app/tabs/more/more.component.html b/src/app/tabs/more/more.component.html
index 3e40283..5ab883a 100644
--- a/src/app/tabs/more/more.component.html
+++ b/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>
diff --git a/src/app/tabs/more/more.component.scss b/src/app/tabs/more/more.component.scss
index d6f6426..c3370d7 100644
--- a/src/app/tabs/more/more.component.scss
+++ b/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;
diff --git a/src/styles.scss b/src/styles.scss
index 054123d..7b0ec0f 100644
--- a/src/styles.scss
+++ b/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;
+        }
+    }
+}