enable/disable e2e encryption

src/components/ui/UIAlert.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 interface Props {
   color?: 'info' | 'success' | 'warning' | 'error'
+  density?: 'regular' | 'compact'
 }
 const props = withDefaults(defineProps<Props>(), {
-  color: 'info'
+  color: 'info',
+  density: 'regular'
 })
 
 const styleClass = computed(() => {
@@ -13,12 +15,17 @@ const styleClass = computed(() => {
     'warning': 'dui-alert-warning',
     'error': 'dui-alert-error'
   }
+  const densityVariants = {
+    'regular': 'py-4 px-4',
+    'compact': 'py-2 px-4'
+  }
   const colorClass = colorVariants[props.color]
-  return [colorClass]
+  const densityClass = densityVariants[props.density]
+  return [colorClass, densityClass]
 })
 </script>
 <template>
   <div class="dui-alert shadow-lg items-start" :class="styleClass">
-    <div class="flex items-center"><slot></slot></div>
+    <div class="flex items-center w-full"><slot></slot></div>
   </div>
 </template>