From 2c830c61ea6d1f8f648152cfc1f35d10ebb0072f Mon Sep 17 00:00:00 2001
From: Marco Crapts <mcrapts@gmail.com>
Date: Tue, 6 Jun 2023 22:27:00 +0200
Subject: [PATCH] small ui fixes

---
 src/components/TopBar/Settings/AccountSettings.vue | 6 +++---
 src/components/ui/UIButton.vue                     | 7 ++++++-
 src/components/ui/UIInputCheckbox.vue              | 2 +-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/TopBar/Settings/AccountSettings.vue b/src/components/TopBar/Settings/AccountSettings.vue
index f93e265..fee83fb 100644
--- a/src/components/TopBar/Settings/AccountSettings.vue
+++ b/src/components/TopBar/Settings/AccountSettings.vue
@@ -108,7 +108,7 @@ const toggleEncryption = async () => {
             <div class="items-top w-full flex-row sm:flex">
               <div class="font-bold sm:w-4/12">Export notes</div>
               <UIButton size="sm" @click="exportNotes">
-                <i class="fa-fw fa-solid fa-file-export"></i>
+                <i class="fa-fw fa-solid fa-file-export mr-2"></i>
                 Export notes
               </UIButton>
             </div>
@@ -116,7 +116,7 @@ const toggleEncryption = async () => {
               <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"></i>
+                  <i class="fa-fw fa-solid fa-trash mr-2"></i>
                   Delete account
                 </UIButton>
                 <UIAlert
@@ -159,7 +159,7 @@ const toggleEncryption = async () => {
                     @click="showEncryptionDialog = true"
                     v-if="showEncryptionDialog === false"
                   >
-                    <i class="fa-fw fa-solid fa-key"></i>
+                    <i class="fa-fw fa-solid fa-key mr-2"></i>
                     Disable end-to-end encryption
                   </UIButton>
                 </template>
diff --git a/src/components/ui/UIButton.vue b/src/components/ui/UIButton.vue
index cbfcfb7..3c9eafe 100644
--- a/src/components/ui/UIButton.vue
+++ b/src/components/ui/UIButton.vue
@@ -51,7 +51,12 @@ const styleClass = computed(() => {
   >
     <slot></slot>
   </label>
-  <button type="button" class="dui-btn h-auto px-3 py-2 duration-0" :class="styleClass" v-else>
+  <button
+    type="button"
+    class="dui-btn inline-block h-auto max-w-full truncate px-3 py-2 duration-0"
+    :class="styleClass"
+    v-else
+  >
     <slot></slot>
   </button>
 </template>
diff --git a/src/components/ui/UIInputCheckbox.vue b/src/components/ui/UIInputCheckbox.vue
index 3f5893f..bf6fcdb 100644
--- a/src/components/ui/UIInputCheckbox.vue
+++ b/src/components/ui/UIInputCheckbox.vue
@@ -28,7 +28,7 @@ const styleClass = computed(() => {
     type="checkbox"
     class="dui-checkbox dui-checkbox-sm border-secondary"
     :class="styleClass"
-    :checked="props.modelValue"
+    :checked="props.modelValue || props.checked"
     @change="emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
     :disabled="props.disabled"
   />