delete account

src/components/TopBar.vue

@@ -41,17 +41,17 @@ const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
           <UIButton
             size="sm"
             variant="outline"
-            class="search-active-hide py-1 text-white topbar-button"
+            class="search-active-hide topbar-button text-white"
             @click="addNote('Untitled new note', '', true)"
           >
-            <i class="fas fa-plus-circle text-[1.1rem]" />
+            <i class="fa-fw fa-solid fa-plus-circle scale-[115%]" />
           </UIButton>
           <UIModal v-if="initialized && !user" :open="authModalInitialStateOpen">
             <template #activator="{ open }">
               <UIButton
                 size="sm"
                 variant="outline"
-                class="search-active-hide py-1 text-white topbar-button"
+                class="search-active-hide topbar-button py-1 text-white"
                 @click="open"
               >
                 Sign in

src/components/TopBar/Settings.vue

@@ -9,7 +9,7 @@ import { OnClickOutside } from '@vueuse/components'
           :dropdown="true"
           size="sm"
           variant="outline"
-          class="topbar-button py-1 text-white"
+          class="topbar-button text-white"
         >
           <i class="fa-fw fa-solid fa-user-gear" />
         </UIButton>

src/components/TopBar/Settings/AccountSettings.vue

@@ -24,8 +24,8 @@ const exportNotes = async () => {
 }
 
 const showDeleteAccountDialog = ref(false)
-const deleteAccount = () => {
-  console.log('delete account')
+const deleteAccount = async () => {
+  await user.value?.delete()
 }
 
 const showEncryptionDialog = ref(false)
@@ -71,7 +71,7 @@ const toggleEncryption = async () => {
               <div>{{ user?.email }}</div>
             </div>
             <div class="w-full flex-row sm:flex">
-              <div class="font-bold sm:w-4/12">Verified</div>
+              <div class="font-bold sm:w-4/12">Account status</div>
               <div class="col-auto">
                 <UIBadge :color="user?.emailVerified ? 'success' : 'warning'">
                   {{ user?.emailVerified ? 'Verified' : 'Not yet verified' }}

src/components/ui/UIButton.vue

@@ -40,8 +40,15 @@ const styleClass = computed(() => {
 })
 </script>
 <template>
-  <label class="dui-btn duration-0" :class="styleClass" v-if="props.dropdown" tabindex="0">
+  <label
+    class="dui-btn h-auto px-3 py-2 duration-0"
+    :class="styleClass"
+    v-if="props.dropdown"
+    tabindex="0"
+  >
     <slot></slot>
   </label>
-  <button class="dui-btn duration-0" :class="styleClass" v-else><slot></slot></button>
+  <button class="dui-btn h-auto px-3 py-2 duration-0" :class="styleClass" v-else>
+    <slot></slot>
+  </button>
 </template>