fix: apply @mjourdan's suggestions

Part-of: <!93>

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,15 +6,9 @@
   min-width: 32rem;
   max-width: 90vw;
 
-  > hr {
-    padding: 0;
-    margin: 0;
-  }
-
   > .alert-container {
     display: grid;
     grid-template-rows: 1fr;
-    margin-bottom: -1px;
 
     &.v-enter-active,
     &.v-leave-active {
@@ -33,9 +27,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(-49%);
+    }
   }
 
   .modal-content {
@@ -44,6 +47,17 @@
 
   .modal-actions {
     padding: 0.75rem 2rem 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    > :first-child {
+      margin-left: 0px !important;
+    }
+
+    > :last-child {
+      margin-right: 0px !important;
+    }
   }
 }