Add backdrop-filter for Overlay and animate

components/Alert/index.scss

@@ -11,6 +11,8 @@
 }
 
 .Alert {
+  animation: $duration-modal-open cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none
+    running openModalDesktop;
   background: var(--dialog-bg);
   border-radius: $unit;
   display: flex;

components/DialogContent/index.scss

@@ -1,6 +1,4 @@
 .Dialog {
-  // animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running
-  //   openModalDesktop;
   position: fixed;
   background: none;
   border: 0;
@@ -16,9 +14,13 @@
   .DialogContent {
     $multiplier: 4;
 
+    animation: $duration-modal-open cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal
+      none running openModalDesktop;
     background: var(--dialog-bg);
     border-radius: $card-corner;
     box-sizing: border-box;
+    border: 0.5px solid rgba(0, 0, 0, 0.18);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
     display: flex;
     flex-direction: column;
     gap: $unit * $multiplier;
@@ -26,6 +28,7 @@
     min-width: $unit * 48;
     // min-height: $unit-12x;
     overflow-y: scroll;
+    height: 80vh;
     max-height: 80vh;
     min-width: 580px;
     max-width: 42vw;

components/JobSection/index.tsx

@@ -136,7 +136,7 @@ const JobSection = (props: Props) => {
         ) : (
           ''
         )}
-        <div className="Overlay" />
+        <div className="Job Overlay" />
       </div>
       <div className="JobDetails">
         {props.editable ? (

components/Overlay/index.scss

@@ -6,6 +6,14 @@
   right: 0;
   bottom: 0;
   left: 0;
+  backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0);
+  animation: 0.24s ease-in fadeInFilter;
+  animation-fill-mode: forwards;
+
+  &.Job {
+    animation: none;
+    backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1);
+  }
 
   &.Visible {
     background: rgba(0, 0, 0, 0.6);

styles/globals.scss

@@ -291,12 +291,12 @@ i.tag {
 @keyframes openModalDesktop {
   0% {
     opacity: 0;
-    transform: translate(-50%, -48%) scale(0.96);
+    transform: scale(0.96);
   }
 
   100% {
     // opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
+    transform: scale(1);
   }
 }
 
@@ -311,3 +311,13 @@ i.tag {
     transform: translate(0, 30%);
   }
 }
+
+@keyframes fadeInFilter {
+  from {
+    backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0);
+  }
+
+  to {
+    backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1);
+  }
+}

styles/variables.scss

@@ -315,5 +315,6 @@ $hover-stroke: 1px solid rgba(0, 0, 0, 0.1);
 $hover-shadow: rgba(0, 0, 0, 0.08) 0px 0px 14px;
 
 // Durations
+$duration-modal-open: 0.48s;
 $duration-color-fade: 0.24s;
 $duration-zoom: 0.18s;