Design Updates

app/javascript/dashboard/components/Modal.vue

@@ -75,9 +75,9 @@ onMounted(() => {
       @mousedown="handleMouseDown"
     >
       <div
-        class="relative max-h-full overflow-auto bg-white shadow-md modal-container rtl:text-right dark:bg-slate-800 skip-context-menu"
+        class="relative max-h-full overflow-auto shadow-xl modal-container rtl:text-right bg-n-alpha-3 backdrop-blur-[100px] skip-context-menu"
         :class="{
-          'rounded-xl w-[37.5rem]': !fullWidth,
+          'rounded-xl w-[36rem]': !fullWidth,
           'items-center rounded-none flex h-full justify-center w-full':
             fullWidth,
           [size]: true,
@@ -102,38 +102,44 @@ onMounted(() => {
 <style lang="scss">
 .modal-mask {
   @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark z-[9990] h-full left-0 fixed top-0 w-full;
+
   .modal-container {
     &.medium {
       @apply max-w-[80%] w-[56.25rem];
     }
-    // .content-box {
-    //   @apply h-auto p-0;
-    // }
+
     .content {
-      @apply p-8;
+      @apply p-6;
     }
+
     form,
     .modal-content {
       @apply pt-4 pb-8 px-8 self-center;
+
       a {
         @apply p-4;
       }
     }
   }
 }
+
 .modal-big {
   @apply w-full;
 }
+
 .modal-mask.right-aligned {
   @apply justify-end;
+
   .modal-container {
     @apply rounded-none h-full w-[30rem];
   }
 }
+
 .modal-enter,
 .modal-leave {
   @apply opacity-0;
 }
+
 .modal-enter .modal-container,
 .modal-leave .modal-container {
   transform: scale(1.1);