style(front): consistent empty state

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" />
+      <h4>
+        <i class="bi bi-search" />
         {{ t('components.audio.track.Widget.empty.noResults') }}
+      </h4>
       <Loader v-if="isLoading" />
     </Alert>
     <Section

front/src/components/playlists/Widget.vue

@@ -80,16 +80,18 @@ watch(
     <Alert
       v-else
       blue
+      align-items="center"
     >
-      <div>
+      <h4>
-        <i class="bi bi-list" />
+        <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') }}