From c763a81e212cfaf9ee991a4d4628ba803a25cae0 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 2 Jul 2023 16:18:13 -0700
Subject: [PATCH] Alert overlays should display over modals

We were using the same Overlay with no changes, so alerts would display over modals without an overlay behind them
---
 components/common/Alert/index.module.scss   |  2 +-
 components/common/Alert/index.tsx           |  1 +
 components/common/Overlay/index.module.scss |  4 ++++
 components/common/Overlay/index.tsx         | 15 +++++++++------
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/components/common/Alert/index.module.scss b/components/common/Alert/index.module.scss
index db0c2848..7a4b55a9 100644
--- a/components/common/Alert/index.module.scss
+++ b/components/common/Alert/index.module.scss
@@ -7,7 +7,7 @@
   width: 100vw;
   top: 0;
   left: 0;
-  z-index: 31;
+  z-index: 12;
 }
 
 .overlay {
diff --git a/components/common/Alert/index.tsx b/components/common/Alert/index.tsx
index c71d42bf..3a0019cd 100644
--- a/components/common/Alert/index.tsx
+++ b/components/common/Alert/index.tsx
@@ -22,6 +22,7 @@ const Alert = (props: Props) => {
     <AlertDialog.Root open={props.open}>
       <AlertDialog.Portal>
         <Overlay
+          className="alert"
           open={props.open}
           visible={true}
           onClick={props.cancelAction}
diff --git a/components/common/Overlay/index.module.scss b/components/common/Overlay/index.module.scss
index 15fbbb25..05308439 100644
--- a/components/common/Overlay/index.module.scss
+++ b/components/common/Overlay/index.module.scss
@@ -8,6 +8,10 @@
   bottom: 0;
   left: 0;
 
+  &.alert {
+    z-index: 11;
+  }
+
   &.job {
     animation: none;
     backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1);
diff --git a/components/common/Overlay/index.tsx b/components/common/Overlay/index.tsx
index 5cc81768..430aa428 100644
--- a/components/common/Overlay/index.tsx
+++ b/components/common/Overlay/index.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import styles from './index.module.scss'
 
 interface Props {
+  className?: string
   visible: boolean
   open: boolean
   onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
@@ -13,15 +14,18 @@ const defaultProps = {
 }
 
 const Overlay = React.forwardRef<HTMLDivElement, Props>(function Overlay(
-  { visible: displayed, open, onClick }: Props,
+  { className, visible: displayed, open, onClick }: Props,
   forwardedRef
 ) {
   const [visible, setVisible] = useState(open)
 
-  const classes = classNames({
-    [styles.overlay]: true,
-    [styles.visible]: displayed,
-  })
+  const classes = classNames(
+    {
+      [styles.overlay]: true,
+      [styles.visible]: displayed,
+    },
+    className?.split(' ').map((c) => styles[c])
+  )
 
   useEffect(() => {
     if (!open) {
@@ -38,7 +42,6 @@ const Overlay = React.forwardRef<HTMLDivElement, Props>(function Overlay(
 
   function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
     // event.stopPropagation()
-    console.log('Hey!')
     if (onClick) onClick(event)
   }