From 89908777a24da20c24443dd842584a375d3bfcde Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 21 Jan 2023 09:42:50 -0800
Subject: [PATCH] Add backdrop-filter for Overlay and animate

---
 components/Alert/index.scss         |  2 ++
 components/DialogContent/index.scss |  7 +++++--
 components/JobSection/index.tsx     |  2 +-
 components/Overlay/index.scss       |  8 ++++++++
 styles/globals.scss                 | 14 ++++++++++++--
 styles/variables.scss               |  1 +
 6 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/components/Alert/index.scss b/components/Alert/index.scss
index dbcff33a..6a01e10e 100644
--- a/components/Alert/index.scss
+++ b/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;
diff --git a/components/DialogContent/index.scss b/components/DialogContent/index.scss
index 78d89ee6..f3d65773 100644
--- a/components/DialogContent/index.scss
+++ b/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;
diff --git a/components/JobSection/index.tsx b/components/JobSection/index.tsx
index e7ec6893..5ff48ed5 100644
--- a/components/JobSection/index.tsx
+++ b/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 ? (
diff --git a/components/Overlay/index.scss b/components/Overlay/index.scss
index 6059c821..b94ff228 100644
--- a/components/Overlay/index.scss
+++ b/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);
diff --git a/styles/globals.scss b/styles/globals.scss
index 562d7797..b0fb3efa 100644
--- a/styles/globals.scss
+++ b/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);
+  }
+}
diff --git a/styles/variables.scss b/styles/variables.scss
index 8b05efa9..d7a2f265 100644
--- a/styles/variables.scss
+++ b/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;