refactor(ui): alignment props for alerts and buttons

front/src/components/common/EmptyState.vue

@@ -21,7 +21,7 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <Alert blue style="text-align: center;">
+  <Alert blue align-items="center">
     <h4 class="ui header">
       <div class="content">
         <slot name="title">

front/src/components/favorites/List.vue

@@ -190,7 +190,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         :tracks="results"
       />
     </Layout>
-    <Alert blue style="text-align: center;"
+    <Alert blue align-items="center"
       v-else
     >
       <i class="bi bi-heartbreak-fill" style="font-size: 100px;" />
@@ -202,7 +202,6 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         solid
         primary
         icon="bi-headphones"
-        align-self="center"
       >
         {{ t('components.favorites.List.link.library') }}
       </Link>

front/src/components/ui/Alert.vue

@@ -9,9 +9,13 @@ const props = defineProps<Props>()
 
 <template>
   <div
-    class="funkwhale is-colored solid alert"
+    class="funkwhale alert"
     role="alert"
-    v-bind="color(align(props)())"
+    v-bind="{
+      ...$attrs,
+      ...color(props, ['solid'])(
+         align(props)(
+    ))}"
   >
     <slot />
 

front/src/components/ui/Button.vue

@@ -72,7 +72,7 @@ onMounted(() => {
       ...$attrs,
       ...color(props, ['interactive'])(
          width(props, isIconOnly ? ['square'] : ['normalHeight', 'buttonWidth'])(
-         align(props, { alignSelf:'start', alignText:'center' })(
+         align(props, { alignText:'center' })(
     )))}"
     class="funkwhale button split-main"
     :autofocus="autofocus || undefined"

front/src/components/ui/alert.scss

@@ -1,37 +1,4 @@
 .funkwhale.alert {
-  // color: var(--fw-gray-900);
-
-  // @include light-theme {
-  //   background-color: var(--fw-pastel-1, var(--fw-bg-color));
-
-  //   > .actions .funkwhale.button {
-  //     --fw-bg-color: var(--fw-pastel-2);
-
-  //     &:hover, &.is-hovered {
-  //       --fw-bg-color: var(--fw-pastel-3);
-  //     }
-
-  //     &:active, &.is-active {
-  //       --fw-bg-color: var(--fw-pastel-4);
-  //     }
-  //   }
-  // }
-
-  // @include dark-theme {
-  //   background-color: var(--fw-pastel-3, var(--fw-bg-color));
-
-  //   > .actions .funkwhale.button {
-  //     --fw-bg-color: var(--fw-pastel-4);
-
-  //     &:hover, &.is-hovered {
-  //       --fw-bg-color: var(--fw-pastel-2);
-  //     }
-
-  //     &:active, &.is-active {
-  //       --fw-bg-color: var(--fw-pastel-1);
-  //     }
-  //   }
-  // }
 
   padding: 2rem 2rem;
   line-height: 1.2;

front/src/composables/alignment.ts

@@ -3,7 +3,8 @@ import type { HTMLAttributes } from "vue";
 
 export type AlignmentProps = {
   alignText?: 'left' | 'center' | 'right' | 'stretch' | 'space-out',
-  alignSelf?: 'start' | 'center' | 'end' | 'auto' | 'baseline' | 'stretch'
+  alignSelf?: 'start' | 'center' | 'end' | 'auto' | 'baseline' | 'stretch',
+  alignItems?: 'start' | 'center' | 'end' | 'auto' | 'baseline' | 'stretch'
 } & {
   [T in 'center' | 'stretch']?: true
 }
@@ -14,7 +15,7 @@ const styles = {
   stretch: 'place-content: stretch stretch; place-self: stretch stretch;',
   alignText: (a:AlignmentProps['alignText'])=>({
     left: 'justify-content: flex-start;',
-    center: 'justify-content: center;',
+    center: 'place-content: center;',
     baseline: 'align-items: baseline;',
     right: 'justify-content: flex-end;',
     stretch: 'place-content: stretch;',
@@ -27,6 +28,14 @@ const styles = {
     auto: 'align-self: auto;',
     baseline: 'align-self: baseline;',
     stretch: 'align-self: stretch;'
+  }[a!]),
+  alignItems: (a:AlignmentProps['alignSelf'])=> ({
+    start: 'align-items: flex-start;',
+    center: 'align-items: center;',
+    end: 'align-items: flex-end;',
+    auto: 'align-items: auto;',
+    baseline: 'align-items: baseline;',
+    stretch: 'align-items: stretch;'
   }[a!])
 } as const;
 

front/src/views/content/libraries/FilesTable.vue

@@ -229,10 +229,12 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
   <Alert
     v-else-if="!result || result?.results.length === 0 && !needsRefresh"
     blue
-    align-text="center"
+    align-items="center"
   >
     <i class="bi bi-upload" />
+    <span>
       {{ t('views.content.libraries.FilesTable.empty.noTracks') }}
+    </span>
   </Alert>
   <action-table
     v-else

front/src/views/playlists/Detail.vue

@@ -21,6 +21,7 @@ import Spacer from '~/components/ui/Spacer.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Button from '~/components/ui/Button.vue'
 import Modal from '~/components/ui/Modal.vue'
+import Alert from '~/components/ui/Alert.vue'
 
 import PlaylistDropdown from '~/components/playlists/PlaylistDropdown.vue'
 
@@ -237,10 +238,15 @@ const deletePlaylist = async () => {
       </template>
       <Alert blue
         v-else
+        align-items="center"
       >
+      <Layout flex :gap="8">
       <i class="bi bi-music-note-list" />
         {{ t('views.playlists.Detail.empty.noTracks') }}
+      </Layout>
+    <Spacer size-16 />
     <Button
+      primary
       icon="bi-pencil"
       @click="edit = !edit"
     >