From 6051a814fa89111042febdfef822d623976b6704 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 23 Jun 2023 19:14:16 -0700
Subject: [PATCH] Fix overlay styles

---
 components/common/Overlay/index.module.scss | 6 +++---
 components/common/Overlay/index.tsx         | 8 +++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/components/common/Overlay/index.module.scss b/components/common/Overlay/index.module.scss
index 850f5d8f..9824efce 100644
--- a/components/common/Overlay/index.module.scss
+++ b/components/common/Overlay/index.module.scss
@@ -1,4 +1,4 @@
-.Overlay {
+.overlay {
   isolation: isolate;
   position: fixed;
   z-index: 9;
@@ -7,12 +7,12 @@
   bottom: 0;
   left: 0;
 
-  &.Job {
+  &.job {
     animation: none;
     backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1);
   }
 
-  &.Visible {
+  &.visible {
     animation: 0.24s ease-in fadeInFilter;
     animation-fill-mode: forwards;
     backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0);
diff --git a/components/common/Overlay/index.tsx b/components/common/Overlay/index.tsx
index 1a49d2eb..e4d6efce 100644
--- a/components/common/Overlay/index.tsx
+++ b/components/common/Overlay/index.tsx
@@ -24,8 +24,8 @@ const Overlay = React.forwardRef<HTMLDivElement, Props>(function Overlay(
   const [visible, setVisible] = useState(open)
 
   const classes = classNames({
-    Overlay: true,
-    Visible: displayed,
+    [styles.overlay]: true,
+    [styles.visible]: displayed,
   })
 
   useEffect(() => {
@@ -45,7 +45,9 @@ const Overlay = React.forwardRef<HTMLDivElement, Props>(function Overlay(
     event.stopPropagation()
   }
 
-  return visible ? <div className={classes} onClick={handleClick} /> : null
+  return visible ? (
+    <div className={classes} onClick={handleClick} ref={forwardedRef} />
+  ) : null
 })
 
 Overlay.defaultProps = defaultProps