feat(ui): enable color props on Popover and Modal

front/src/components/ui/Modal.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
+import { type ColorProps, type DefaultProps, propsToColor } from '~/composables/colors';
+
 import Button from '~/components/ui/Button.vue'
 import Spacer from '~/components/ui/layout/Spacer.vue'
 
-const { title, overPopover = false } = defineProps<{ title:string, overPopover?:true }>()
+const { title, overPopover = false, ...colorProps } = defineProps<{
+  title:string,
+  overPopover?:true
+} & (ColorProps | DefaultProps) >()
 const isOpen = defineModel<boolean>({ default:false })
 
 // TODO:
@@ -14,8 +19,15 @@ const isOpen = defineModel<boolean>({ default:false })
 <template>
   <Teleport to="body">
     <Transition mode="out-in">
-      <div v-if="isOpen" @click.exact.stop="isOpen = false" class="funkwhale overlay">
+      <div v-if="isOpen"
-        <div @click.stop class="funkwhale modal" :class="[$slots.alert && 'has-alert', overPopover && 'over-popover']" >
+        @click.exact.stop="isOpen = false"
+        class="funkwhale overlay"
+      >
+        <div @click.stop
+          class="funkwhale modal raised"
+          :class="[$slots.alert && 'has-alert', overPopover && 'over-popover']"
+          v-bind="propsToColor(colorProps)"
+        >
           <h2>
             {{ title }}
             <Button icon="bi-x-lg" ghost @click="isOpen = false" />

front/src/components/ui/Popover.vue

@@ -7,9 +7,10 @@ import { POPOVER_INJECTION_KEY, POPOVER_CONTEXT_INJECTION_KEY } from '~/injectio
 import { type ColorProps, type DefaultProps, propsToColor } from '~/composables/colors';
 
 const open = defineModel('open', { default: false })
+
 const { positioning = 'vertical', ...colorProps }  = defineProps<{
   positioning?:'horizontal' | 'vertical'
-} & ColorProps & DefaultProps>()
+} & (ColorProps | DefaultProps)>()
 
 // Template refs
 const popover = ref()
@@ -116,7 +117,6 @@ watch(open, (isOpen) => {
   <div
     ref="slot"
     class="funkwhale popover-container"
-    v-bind="propsToColor({ solid:true, ...colorProps })"
   >
     <slot
       :isOpen="open"
@@ -136,7 +136,8 @@ watch(open, (isOpen) => {
         ref="popover"
         :style="position"
         :class="{ 'is-mobile': isMobile }"
-        class="funkwhale popover"
+        class="funkwhale popover secondary"
+         v-bind="propsToColor(colorProps)"
       >
         <slot name="items" />
       </div>

front/src/components/ui/popover.scss

@@ -1,5 +1,5 @@
 .funkwhale.popover-container {
-  display: contents;
+  width: max-content;
 }
 
 .funkwhale.popover-outer {
@@ -18,7 +18,7 @@
 .funkwhale {
   &.popover {
     border: 1px solid var(--fw-border-color);
-    background: var(--background-color);
+    background-color: var(--background-color);
 
     hr {
       border-bottom: 1px solid var(--fw-border-color);
@@ -72,7 +72,6 @@
       border-radius: var(--fw-border-radius);
       white-space: nowrap;
 
-
       > .bi:first-child {
         margin-right: 16px;
       }