chore: modals update

src/components/Global/AnimatedModal.vue

@@ -1,8 +1,8 @@
 <template>
-  <transition name="modal-anim" tag="div" class="modal">
-    <div class="body" v-if="isOpen">
-      <div class="background" @click="toggleModal(false)"></div>
-      <div class="wrapper" ref="wrapper" tabindex="0">
+  <transition name="modal-anim" tag="div">
+    <div class="modal" v-if="isOpen">
+      <div class="modal-background" @click="toggleModal(false)"></div>
+      <div class="modal-wrapper" ref="wrapper" tabindex="0">
         <slot></slot>
       </div>
       <div class="tab-exit" ref="exit" tabindex="0" @focus="toggleModal(false)"></div>
@@ -30,8 +30,7 @@ export default defineComponent({
   watch: {
     isOpen(v) {
       this.$nextTick(() => {
-        if (v) (this.$refs['wrapper'] as HTMLElement).focus();
-        else (this.store.modalLastClickedTarget as HTMLElement)?.focus();
+        if (v == false) (this.store.modalLastClickedTarget as HTMLElement)?.focus();
       });
     }
   },
@@ -47,17 +46,21 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 
-.body {
+.modal {
   position: fixed;
   top: 0;
   left: 0;
+
+  width: 100%;
+  height: 100vh;
   z-index: 200;
 
-  width: 100vw;
-  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.background {
+.modal-background {
   position: absolute;
   top: 0;
   left: 0;
@@ -69,28 +72,24 @@ export default defineComponent({
   background-color: rgba(0, 0, 0, 0.55);
 }
 
-.wrapper {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+.modal-wrapper {
+  position: relative;
+  z-index: 210;
 
-  background-color: #1a1a1a;
-  box-shadow: 0 0 15px 10px #333333;
-
-  width: 95%;
-  max-width: 800px;
-  max-height: 95vh;
+  margin-top: 1em;
 
   & > :slotted(div) {
+    background-color: #1a1a1a;
+    box-shadow: 0 0 15px 10px #0e0e0e;
+
+    width: 95vw;
+    max-width: 850px;
     max-height: 95vh;
   }
 }
 
 @include smallScreen {
-  .wrapper {
-    top: 0;
-    transform: translate(-50%, 1em);
+  .modal-wrapper {
     max-height: 90vh;
 
     & > :slotted(div) {

src/components/Global/DonationModal.vue

@@ -66,6 +66,7 @@
           class="modal-action a-button btn--image coffee"
           href="https://buycoffee.to/spythere"
           target="_blank"
+          ref="action"
         >
           <img src="/images/icon-coffee.png" width="20" alt="buycoffee.to donation" />
           {{ $t('donations.action-buycoffee') }}
@@ -103,9 +104,13 @@ export default defineComponent({
   emits: ['toggleModal'],
 
   watch: {
-    isModalOpen(b: boolean) {
-      this.running = b;
+    isModalOpen(val: boolean) {
+      this.running = val;
       this.lastUpdate = Date.now();
+
+      this.$nextTick(() => {
+        if (val) (this.$refs['action'] as HTMLElement).focus();
+      });
     }
   },