small fixes

src/components/NotificationSettings.vue

@@ -99,12 +99,16 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>
-    <div class="text-uppercase">Notifications</div>
+  <v-sheet border class="pa-4 d-flex flex-column ga-2">
+    <div class="text-uppercase text-title-large">Notifications</div>
 
     <v-skeleton-loader v-if="loading && !preferences.length" type="list-item, list-item" />
     <div v-else class="d-flex flex-column">
       <v-switch
+        inset="material"
+        size="x-small"
+        true-icon="mdi-check"
+        false-icon="mdi-close"
         v-for="preference in preferences"
         :key="preference.channel"
         :model-value="preference.enabled"
@@ -118,36 +122,43 @@ onMounted(async () => {
       />
     </div>
 
-    <div class="text-uppercase mt-4">Push in this browser</div>
-    <div v-if="permission === 'unsupported'" class="text-medium-emphasis">
-      This browser does not support push notifications
+    <div>
+      <div class="text-uppercase">Push in this browser</div>
+      <div v-if="permission === 'unsupported'" class="text-medium-emphasis">
+        This browser does not support push notifications
+      </div>
+      <div v-else-if="permission === 'denied'" class="text-medium-emphasis">
+        Notifications are blocked — allow them in the browser site settings
+      </div>
+      <v-switch
+        v-else
+        inset="material"
+        size="x-small"
+        true-icon="mdi-check"
+        false-icon="mdi-close"
+        :model-value="deviceEnabled"
+        :label="deviceEnabled ? 'Enabled' : 'Disabled'"
+        :loading="deviceSaving"
+        :disabled="deviceSaving"
+        color="primary"
+        density="compact"
+        hide-details
+        @update:model-value="toggleDevice"
+      />
     </div>
-    <div v-else-if="permission === 'denied'" class="text-medium-emphasis">
-      Notifications are blocked — allow them in the browser site settings
-    </div>
-    <v-switch
-      v-else
-      :model-value="deviceEnabled"
-      :label="deviceEnabled ? 'Enabled' : 'Disabled'"
-      :loading="deviceSaving"
-      :disabled="deviceSaving"
-      color="primary"
-      density="compact"
-      hide-details
-      @update:model-value="toggleDevice"
-    />
 
-    <v-btn
-      class="mt-2"
-      variant="tonal"
-      size="small"
-      prepend-icon="mdi-bell-ring-outline"
-      :loading="testSending"
-      @click="sendTestPush"
-    >
-      Send test push
-    </v-btn>
-  </div>
+    <div>
+      <v-btn
+        class="mt-2"
+        variant="tonal"
+        prepend-icon="mdi-bell-ring-outline"
+        :loading="testSending"
+        @click="sendTestPush"
+      >
+        Send test push
+      </v-btn>
+    </div>
+  </v-sheet>
 </template>
 
 <style scoped lang="scss"></style>