From 2e13c5bd5021adf37ba63e3c16e2e5647996240d Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Thu, 30 Jan 2025 17:47:41 -0600
Subject: [PATCH] Fix no collections message, ui updates

---
 .../components/modals/collections/AddCreateModal.vue | 12 ++++++------
 .../components/modals/playlists/AddCreateModal.vue   | 10 +++++-----
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/client/components/modals/collections/AddCreateModal.vue b/client/components/modals/collections/AddCreateModal.vue
index ee4651874b..c4878adc86 100644
--- a/client/components/modals/collections/AddCreateModal.vue
+++ b/client/components/modals/collections/AddCreateModal.vue
@@ -19,20 +19,20 @@
             </template>
           </transition-group>
         </div>
-        <div v-if="!collections.length" class="flex h-32 items-center justify-center text-center">
+        <div v-if="!collections.length" class="flex h-32 items-center justify-center text-center px-2">
           <div>
-            <p class="text-xl">{{ $strings.MessageNoUserPlaylists }}</p>
-            <p class="text-sm flex items-center justify-center">
-              {{ $strings.MessageBookshelfNoCollectionsHelp }}
+            <p class="text-xl mb-2">{{ $strings.MessageNoCollections }}</p>
+            <div class="text-sm flex items-center justify-center text-gray-200">
+              <p>{{ $strings.MessageBookshelfNoCollectionsHelp }}</p>
               <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
                 <a href="https://www.audiobookshelf.org/guides/collections" target="_blank" class="inline-flex">
                   <span class="material-symbols text-xl w-5 text-gray-200">help_outline</span>
                 </a>
               </ui-tooltip>
-            </p>
+            </div>
           </div>
         </div>
-        </div>
+
         <div class="w-full h-px bg-white bg-opacity-10" />
         <form @submit.prevent="submitCreateCollection">
           <div class="flex px-4 py-2 items-center text-center border-b border-white border-opacity-10 text-white text-opacity-80">
diff --git a/client/components/modals/playlists/AddCreateModal.vue b/client/components/modals/playlists/AddCreateModal.vue
index 51f7e475cb..4a7daad94d 100644
--- a/client/components/modals/playlists/AddCreateModal.vue
+++ b/client/components/modals/playlists/AddCreateModal.vue
@@ -19,17 +19,17 @@
             </template>
           </transition-group>
         </div>
-        <div v-if="!playlists.length" class="flex h-32 items-center justify-center text-center">
+        <div v-if="!playlists.length" class="flex h-32 items-center justify-center text-center px-2">
           <div>
-            <p class="text-xl">{{ $strings.MessageNoUserPlaylists }}</p>
-            <p class="text-sm flex items-center justify-center">
-              {{ $strings.MessageNoUserPlaylistsHelp }}
+            <p class="text-xl mb-2">{{ $strings.MessageNoUserPlaylists }}</p>
+            <div class="text-sm flex items-center justify-center text-gray-200">
+              <p>{{ $strings.MessageNoUserPlaylistsHelp }}</p>
               <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
                 <a href="https://www.audiobookshelf.org/guides/collections" target="_blank" class="inline-flex">
                   <span class="material-symbols text-xl w-5 text-gray-200">help_outline</span>
                 </a>
               </ui-tooltip>
-            </p>
+            </div>
           </div>
         </div>
         <div class="w-full h-px bg-white bg-opacity-10" />