Fix modal design

Author: DaneEveritt

resources/assets/scripts/components/core/Modal.vue

@@ -1,11 +1,11 @@
 <template>
     <transition name="modal">
         <div class="modal-mask" v-show="isVisible" v-on:click="closeOnBackground && close()">
-            <div class="modal-container p-8" :class="{ 'full-screen': isFullScreen }" @click.stop>
+            <div class="modal-container top" :class="{ 'full-screen': isFullScreen }" @click.stop>
                 <div class="modal-close-icon" v-on:click="close" v-if="dismissable && showCloseIcon">
                     <Icon name="x" aria-label="Close modal" role="button"/>
                 </div>
-                <div class="modal-content">
+                <div class="modal-content p-8">
                     <slot/>
                 </div>
             </div>

resources/assets/styles/components/modal.css

@@ -6,6 +6,10 @@
   & > .modal-container {
     @apply .relative .w-full .max-w-md .m-auto .flex-col .flex;
 
+    &.top {
+      margin-top: 15%;
+    }
+
     & > .modal-close-icon {
       @apply .absolute .pin-r .p-2 .text-white .cursor-pointer .opacity-50;
       transition: opacity 150ms linear, transform 150ms ease-in;
@@ -20,16 +24,17 @@
     & > .modal-content {
       @apply .bg-white .rounded .shadow-md;
       transition: all 250ms ease;
-      margin-top: 15%;
     }
 
     /**
      * On tiny phone screens make sure there is a margin on the sides and also
      * center the modal rather than putting it towards the top of the screen.
      */
     @screen smx {
-      margin-top: auto;
       width: 90%;
+      .top {
+        margin-top: auto;
+      }
     }
   }