Fix alert styles and overlays

* Update alert styles
* Fix Overlay component to take onClick event handler as a prop

components/common/Alert/index.module.scss

@@ -1,4 +1,4 @@
-.AlertWrapper {
+.wrapper {
   align-items: center;
   display: flex;
   justify-content: center;
@@ -10,7 +10,17 @@
   z-index: 31;
 }
 
-.Alert {
+.overlay {
+  isolation: isolate;
+  position: fixed;
+  z-index: 9;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.alert {
   animation: $duration-modal-open cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none
     running openModalDesktop;
   background: var(--dialog-bg);
@@ -52,9 +62,21 @@
       align-self: center;
       width: 100%;
 
-      .Button {
+      & > * {
         width: 100%;
       }
     }
   }
+
+  @keyframes openModalDesktop {
+    0% {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+
+    100% {
+      // opacity: 1;
+      transform: scale(1);
+    }
+  }
 }

components/common/Alert/index.tsx

@@ -21,44 +21,43 @@ const Alert = (props: Props) => {
   return (
     <AlertDialog.Root open={props.open}>
       <AlertDialog.Portal>
-        <AlertDialog.Overlay className="Overlay" onClick={props.cancelAction} />
+        <Overlay
-        <div className="AlertWrapper">
+          open={props.open}
+          visible={true}
+          onClick={props.cancelAction}
+        />
+        <div className={styles.wrapper}>
           <AlertDialog.Content
-            className="Alert"
+            className={styles.alert}
             onEscapeKeyDown={props.cancelAction}
           >
-            {props.title ? (
+            {props.title && (
               <AlertDialog.Title>{props.title}</AlertDialog.Title>
-            ) : (
-              ''
             )}
-            <AlertDialog.Description className="description">
+            <AlertDialog.Description className={styles.description}>
               {props.message}
             </AlertDialog.Description>
-            <div className="buttons">
+            <div className={styles.buttons}>
               <AlertDialog.Cancel asChild>
                 <Button
-                  contained={true}
+                  bound={true}
                   onClick={props.cancelAction}
                   text={props.cancelActionText}
                 />
               </AlertDialog.Cancel>
-              {props.primaryAction ? (
+              {props.primaryAction && (
                 <AlertDialog.Action asChild>
                   <Button
                     className={props.primaryActionClassName}
-                    contained={true}
+                    bound={true}
                     onClick={props.primaryAction}
                     text={props.primaryActionText}
                   />
                 </AlertDialog.Action>
-              ) : (
-                ''
               )}
             </div>
           </AlertDialog.Content>
         </div>
-        <Overlay open={props.open} visible={true} />
       </AlertDialog.Portal>
     </AlertDialog.Root>
   )

components/common/Overlay/index.module.scss

@@ -1,4 +1,5 @@
 .overlay {
+  pointer-events: auto;
   isolation: isolate;
   position: fixed;
   z-index: 9;

components/common/Overlay/index.tsx

@@ -5,6 +5,7 @@ import styles from './index.module.scss'
 interface Props {
   visible: boolean
   open: boolean
+  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
 }
 
 const defaultProps = {
@@ -12,13 +13,7 @@ const defaultProps = {
 }
 
 const Overlay = React.forwardRef<HTMLDivElement, Props>(function Overlay(
-  {
+  { visible: displayed, open, onClick }: Props,
-    visible: displayed,
-    open,
-  }: {
-    visible: boolean
-    open: boolean
-  },
   forwardedRef
 ) {
   const [visible, setVisible] = useState(open)
@@ -42,7 +37,9 @@ const Overlay = React.forwardRef<HTMLDivElement, Props>(function Overlay(
   }, [open])
 
   function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
-    event.stopPropagation()
+    // event.stopPropagation()
+    console.log('Hey!')
+    if (onClick) onClick(event)
   }
 
   return visible ? (