fix: apply @mjourdan's suggestions

src/components/alert/style.scss

@@ -18,11 +18,10 @@
   }
 
   @include dark-theme {
-    background-color: var(--fw-pastel-4, var(--fw-bg-color));
+    background-color: var(--fw-pastel-3, var(--fw-bg-color));
 
     > .actions .funkwhale.button {
-      --fw-bg-color: var(--fw-pastel-3);
-      box-shadow: 0 2px 4px 2px rgba(#000, 0.1);
+      --fw-bg-color: var(--fw-pastel-4);
 
       &:hover, &.is-hovered {
         --fw-bg-color: var(--fw-pastel-2);

src/components/modal/Modal.vue

@@ -8,7 +8,10 @@ const open = defineModel<boolean>({ required: true })
     <Transition mode="out-in">
       <div v-if="open" @click.exact.stop="open = false" class="funkwhale overlay">
         <div @click.stop class="funkwhale modal">
-          <h2>{{ title }}</h2>
+          <h2>
+            {{ title }}
+            <FwButton icon="bi-x-lg" color="secondary" variant="ghost" @click="open = false" />
+          </h2>
 
           <Transition>
             <div v-if="$slots.alert" class="alert-container">
@@ -17,12 +20,10 @@ const open = defineModel<boolean>({ required: true })
               </div>
             </div>
           </Transition>
-          <hr />
 
           <div class="modal-content">
             <slot />
           </div>
-          <hr  v-if="$slots.actions" />
           <div v-if="$slots.actions" class="modal-actions">
             <slot name="actions" />
           </div>

src/components/modal/style.scss

@@ -6,11 +6,6 @@
   min-width: 32rem;
   max-width: 90vw;
 
-  > hr {
-    padding: 0;
-    margin: 0;
-  }
-
   > .alert-container {
     display: grid;
     grid-template-rows: 1fr;
@@ -33,9 +28,18 @@
 
   > h2 {
     font-size: 1.25em;
-    padding: 1.625rem 4.5rem 1rem;
+    padding: 1.625rem 4.5rem;
     line-height: 1.2;
     text-align: center;
+    position: relative;
+
+    > .funkwhale.button {
+      font-size: 1rem;
+      position: absolute;
+      right: 1rem;
+      top: 50%;
+      transform: translateY(-50%);
+    }
   }
 
   .modal-content {