From 3aa79c90179ac4cd48482941013755789eda4df6 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Thu, 13 Feb 2025 22:22:49 +0100
Subject: [PATCH] style(front): consistent empty state

---
 front/src/components/audio/track/Widget.vue | 10 ++++++----
 front/src/components/playlists/Widget.vue   | 10 ++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/front/src/components/audio/track/Widget.vue b/front/src/components/audio/track/Widget.vue
index 83e0b167a..6c4748c5e 100644
--- a/front/src/components/audio/track/Widget.vue
+++ b/front/src/components/audio/track/Widget.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Track, Listening } from '~/types'
 
-import { ref, reactive, watch, computed } from 'vue'
+import { ref, reactive, watch } from 'vue'
 import { useStore } from '~/store'
 import { clone } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
@@ -121,10 +121,12 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
     <Alert
       v-if="count === 0"
       blue
-      style="text-align: center;"
+      align-items="center"
     >
-      <i class="bi bi-music-note-list" />
-      {{ t('components.audio.track.Widget.empty.noResults') }}
+      <h4>
+        <i class="bi bi-search" />
+        {{ t('components.audio.track.Widget.empty.noResults') }}
+      </h4>
       <Loader v-if="isLoading" />
     </Alert>
     <Section
diff --git a/front/src/components/playlists/Widget.vue b/front/src/components/playlists/Widget.vue
index 4e2920f7b..e982739d7 100644
--- a/front/src/components/playlists/Widget.vue
+++ b/front/src/components/playlists/Widget.vue
@@ -80,16 +80,18 @@ watch(
     <Alert
       v-else
       blue
+      align-items="center"
     >
-      <div>
-        <i class="bi bi-list" />
+      <h4>
+        <i class="bi bi-search" />
         {{ t('components.playlists.Widget.placeholder.noPlaylists') }}
-      </div>
+      </h4>
       <Spacer />
       <Button
         v-if="store.state.auth.authenticated"
-        icon="bi-card-list"
+        icon="bi-music-note-list"
         primary
+        align-self="center"
         @click="store.commit('playlists/chooseTrack', null)"
       >
         {{ t('components.playlists.Widget.button.create') }}