WIP: converted notification permission dialog into toggle

src/App.vue

@@ -157,7 +157,7 @@
             >
               <div class="w-full px-6 py-6 text-slate-900 text-center">
                 <p class="text-lg mb-4">
-                  Would you like to turn on notifications for this app?
+                  Would you like to <b>turn on</b> notifications for this app?
                 </p>
 
                 <button
@@ -181,6 +181,32 @@
               </div>
             </div>
           </div>
+          <div
+            v-if="notification.type === 'notification-mute'"
+            class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
+          >
+            <div
+              class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
+            >
+              <div class="w-full px-6 py-6 text-slate-900 text-center">
+                <p class="text-lg mb-4">
+                  Would you like to <b>turn off</b> notifications for this app?
+                </p>
+
+                <button
+                  class="block w-full text-center text-md font-bold uppercase bg-rose-600 text-white px-2 py-2 rounded-md mb-2"
+                >
+                  Turn off Notifications
+                </button>
+                <button
+                  @click="close(notification.id)"
+                  class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
+                >
+                  Keep it On
+                </button>
+              </div>
+            </div>
+          </div>
         </div>
       </Notification>
     </div>

src/views/AccountViewView.vue

@@ -123,7 +123,9 @@
     >
       Switch Identity / No Identity
     </router-link>
-    <button
+    <label
+      for="toggleNotifications"
+      class="flex items-center cursor-pointer mt-4 mb-8"
       @click="
         this.$notify(
           {
@@ -133,10 +135,21 @@
           -1,
         )
       "
-      class="block w-full text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-8"
     >
-      Turn on Notifications
-    </button>
+      <!-- toggle -->
+      <div class="relative">
+        <!-- input -->
+        <input type="checkbox" name="toggleNotifications" class="sr-only" />
+        <!-- line -->
+        <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
+        <!-- dot -->
+        <div
+          class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
+        ></div>
+      </div>
+      <!-- label -->
+      <div class="ml-2">App Notifications</div>
+    </label>
 
     <h3 class="text-sm uppercase font-semibold mb-3">Data</h3>