Fix no collections message, ui updates

advplyr · Jan 30, 2025 · 2e13c5b · 2e13c5b
1 parent 5c0cd98
commit 2e13c5b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git 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
@@ -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" />