feat(ui): round card-image for artist cards

front/src/components/artist/Card.vue

@@ -7,6 +7,7 @@ import { useI18n } from 'vue-i18n'
 import PlayButton from '~/components/audio/PlayButton.vue'
 import TagsList from '~/components/tags/List.vue'
 import Card from '~/components/ui/Card.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 import type { Artist } from '~/types'
 
@@ -46,6 +47,7 @@ const imageUrl = computed(() => cover.value?.urls.original
   <Card
     :title="artist.name"
     :image="imageUrl"
+    class="card artist-card"
     :tags="artist.tags"
     :to="{name: 'library.artists.detail', params: {id: artist.id}}"
   >
@@ -79,33 +81,20 @@ const imageUrl = computed(() => cover.value?.urls.original
   </Card>
 </template>
 
-<style scoped>
+<style lang="scss">
+
 .funkwhale {
-  &.card.artist-card {
+  .card.artist-card {
-    --fw-border-radius: 12px;
-    --fw-card-width: 208px;
-    --fw-card-image-width: calc(var(--fw-card-width) - 16px);
-    --fw-card-padding: 16px;
 
     > .card-image {
-      border-radius: 50% !important;
+      border-radius: 50%;
-      width: var(--fw-card-image-width);
+      width: 248px;
-      margin: calc(-1 * var(--fw-card-padding) + 8px) calc(-1 * var(--fw-card-padding) + 8px) 0;
+      margin: 16px;
     }
 
     .play-button {
       top: calc(var(--fw-card-width) - 44px - 8px) !important;
     }
-
-    > .card-title {
-      font-size: 1rem;
-      text-align: left !important;
-    }
-
-    > .card-content {
-      padding-top: 6px !important;
-      text-align: left !important;
-    }
   }
 }
 </style>

front/src/components/ui/Card.vue

@@ -49,11 +49,11 @@ const attributes = computed(() =>
 
     <!-- Image -->
 
-    <div v-if="$slots.image" :class="$style.image">
+    <div v-if="$slots.image" :class="[$style.image, 'card-image']">
       <slot name="image" :src="image" />
     </div>
     <img v-else-if="image" :src="image?.src"
-      :class="{ [$style.image]: true, [$style['with-padding']]: image?.style === 'withPadding' }" />
+      :class="[{ [$style.image]: true, [$style['with-padding']]: image?.style === 'withPadding' }, 'card-image']" />
     <Spacer v-else :size="'small' in props ? 20 : 28" />
 
     <!-- Icon -->