Notification permission ask added

public/sass_styles/_header.scss

@@ -7,7 +7,7 @@
     // align-items: center;
     justify-content: center;
 
-    height: 17vh;
+    height: 14vh;
     padding: 0vh 1vw;
 
     box-sizing: border-box;
@@ -15,11 +15,18 @@
     a {
         text-decoration: none;
     }
+    
+    .title-link {
+        width: fit-content;
+    }
 
     h1 {
         color: #ffffff;
 
         font-size: 3vw;
+
+        display: inline;
+
         @include titleFont();
         @include normalizeTitle();
     }
@@ -30,28 +37,98 @@
         color: $lightest-color-dark;
     }
 }
+.notification-select {
 
+    background-color: $second-color;
+    height: 3vh;
 
+    display: flex;
+    align-items: flex-end;
 
-
- @media (max-width: 991.98px) {
-    .header-main-page {
-    height: auto;
-    padding: 3vw 0px;
-
-    align-items: center;
+    padding-left: 1vw;
     
-    h1 {
-        font-size: 26pt;
+    box-sizing: border-box;
+
+    color: #fff;
+
+    @include bodyFont();
+
+    p { 
+        display: inline-block;
+
+        align-self: center;
+
+        padding: 0;
+
+        margin: 0;
+        margin-right: 1vw;
     }
 
-    h3 {
-        font-size: 13pt;
-    }
-    }
- }
+    button {
+        height: 80%;
+        width: 5%;
 
- .header-main-page.dark-mode-component {
-     background-color: $main-color-dark;
-     border-bottom: 1px solid #ffffff72;
- }
+        margin-right: 0.5vw;
+        
+        border: none;
+        border-radius: 2px;
+
+        align-self: center;
+
+        color: #fff;
+        font-weight: bold;
+
+        cursor: pointer;
+    }
+
+    button.yes {
+        background-color: rgb(76, 175, 80);
+    }
+
+    button.no {
+        background-color: rgb(211, 47, 47);
+    }
+}
+
+@media (max-width: 991.98px) {
+    .header-main-page {
+        height: auto;
+        padding: 3vw 0px;
+
+        align-items: center;
+        
+        h1 {
+            font-size: 26pt;
+        }
+
+        h3 {
+            font-size: 13pt;
+        }
+    }
+
+    .notification-select {
+        height: auto;
+        flex-wrap: wrap;
+
+        p {
+            width: 100%;
+            margin-top: 1vh;
+            margin-bottom: 1vh;
+        }
+
+        button {
+            height: 30px;
+            width: 20%;
+            margin-bottom: 1vh;
+        }
+    }
+}
+
+.header-main-page.dark-mode-component {
+    background-color: $main-color-dark;
+    border-bottom: 1px solid #ffffff72;
+}
+
+.notification-select.dark-mode-component {
+    background-color: $second-color-dark;
+}