delete account ui functionality

src/components/TopBar/Settings/AccountSettings.vue

@@ -23,6 +23,11 @@ const exportNotes = async () => {
   FileSaver.saveAs(blob, `contexted-${user.value?.email}-${currentDate}.zip`)
 }
 
+const showDeleteAccountDialog = ref(false)
+const deleteAccount = () => {
+  console.log('delete account')
+}
+
 const showEncryptionDialog = ref(false)
 watch(showEncryptionDialog, () => {
   passphrase.value = ''
@@ -104,16 +109,37 @@ const toggleEncryption = async () => {
                 Export notes
               </UIButton>
             </div>
-            <div class="items-top w-full flex-row sm:flex">
-              <div class="font-bold sm:w-4/12">Delete account</div>
-              <UIButton size="sm" color="error">
-                <i class="fa-fw fa-solid fa-trash mr-2"></i>
-                Delete account
-              </UIButton>
+            <div class="items-top w-full flex-row sm:flex sm:flex-grow">
+              <div class="flex-shrink-0 font-bold sm:w-4/12">Delete account</div>
+              <div>
+                <UIButton size="sm" color="error" @click="showDeleteAccountDialog = true">
+                  <i class="fa-fw fa-solid fa-trash mr-2"></i>
+                  Delete account
+                </UIButton>
+                <UIAlert
+                  color="warning"
+                  density="compact"
+                  class="mt-1 space-y-2"
+                  v-if="showDeleteAccountDialog"
+                >
+                  <div>
+                    Are you sure you want to delete your Contexted account? This action cannot be
+                    undone!
+                  </div>
+                  <div class="space-x-2">
+                    <UIButton size="sm" variant="outline" color="primary" @click="deleteAccount">
+                      Delete account
+                    </UIButton>
+                    <UIButton size="sm" variant="outline" @click="showDeleteAccountDialog = false">
+                      Close
+                    </UIButton>
+                  </div>
+                </UIAlert>
+              </div>
             </div>
             <div class="items-top w-full flex-row sm:flex">
-              <div class="font-bold sm:w-4/12">End-to-end encryption</div>
-              <div>
+              <div class="flex-shrink-0 font-bold sm:w-4/12">End-to-end encryption</div>
+              <div class="w-full">
                 <template v-if="!encryptionEnabled">
                   <UIButton
                     size="sm"
@@ -135,7 +161,7 @@ const toggleEncryption = async () => {
                   </UIButton>
                 </template>
                 <UIAlert color="info" density="compact" v-if="showEncryptionDialog">
-                  <div class="space-y-2">
+                  <div class="w-full space-y-2">
                     <div>
                       Enter your passphrase to
                       {{ encryptionEnabled ? 'disable' : 'enable' }}
@@ -146,22 +172,25 @@ const toggleEncryption = async () => {
                       type="password"
                       :color="toggleEncryptionError ? 'error' : 'regular'"
                       v-model="passphrase"
-                      class="w-full"
+                      class="w-full !max-w-full"
                     />
                     <UIAlert density="compact" color="error" v-if="toggleEncryptionError">
                       <i class="fa-solid fa-triangle-exclamation"></i>
                       {{ toggleEncryptionError }}
                     </UIAlert>
-                    <div class="flex justify-end space-x-2">
-                      <UIButton size="sm" @click="showEncryptionDialog = false">Close</UIButton>
+                    <div class="space-x-2">
                       <UIButton
                         :disabled="passphrase.length === 0"
                         size="sm"
+                        variant="outline"
                         color="primary"
                         @click="toggleEncryption"
                       >
                         {{ encryptionEnabled ? 'Disable' : 'Enable' }} encryption
                       </UIButton>
+                      <UIButton size="sm" variant="outline" @click="showEncryptionDialog = false">
+                        Close
+                      </UIButton>
                     </div>
                   </div>
                 </UIAlert>

src/components/ui/UIAlert.vue

@@ -10,14 +10,14 @@ const props = withDefaults(defineProps<Props>(), {
 
 const styleClass = computed(() => {
   const colorVariants = {
-    'info': 'dui-alert-info',
-    'success': 'dui-alert-success',
-    'warning': 'dui-alert-warning',
-    'error': 'dui-alert-error'
+    info: 'bg-info',
+    success: 'bg-success',
+    warning: 'bg-warning',
+    error: 'bg-error'
   }
   const densityVariants = {
-    'regular': 'py-4 px-4',
-    'compact': 'py-2 px-4'
+    regular: 'py-4 px-4',
+    compact: 'py-2 px-4'
   }
   const colorClass = colorVariants[props.color]
   const densityClass = densityVariants[props.density]
@@ -25,7 +25,7 @@ const styleClass = computed(() => {
 })
 </script>
 <template>
-  <div class="dui-alert shadow-lg items-start" :class="styleClass">
-    <div class="flex items-center w-full"><slot></slot></div>
+  <div class="rounded-xl shadow-lg" :class="styleClass">
+    <slot></slot>
   </div>
 </template>

src/components/ui/UIModal.vue

@@ -67,13 +67,13 @@ defineExpose({ open, close })
     <Transition @enter="onEnter" @leave="onLeave" appear>
       <div class="dui-modal bg-neutral-800 bg-opacity-60" v-if="show" ref="modal">
         <div class="dui-modal-box" :class="styleClass" ref="modalBox">
-          <h3 class="flex items-center text-xl font-bold" v-if="$slots.title">
+          <h3 class="flex items-center text-xl font-bold mb-4" v-if="$slots.title">
             <slot name="title" />
           </h3>
-          <p class="py-4">
+          <div>
             <slot v-bind="slotProps" />
-          </p>
-          <div class="dui-modal-action">
+          </div>
+          <div class="dui-modal-action mt-4">
             <slot name="actions" v-bind="slotProps">
               <UIButton size="sm" @click="close">Close</UIButton>
             </slot>