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

@@ -7,7 +7,7 @@
   width: 100vw;
   top: 0;
   left: 0;
-  z-index: 31;
+  z-index: 12;
 }
 
 .overlay {

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}

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);

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({
+  const classes = classNames(
-    [styles.overlay]: true,
+    {
-    [styles.visible]: displayed,
+      [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)
   }