Merge pull request #571 from topcoder-platform/issues/timor/200

fixes issue#200

Author: callmekatootie

client/src/components/AddToGroupModal/index.jsx

@@ -131,7 +131,11 @@ export default function AddToGroupModal({ onCancel, updateUser, user }) {
   };
 
   return (
-    <Modal onCancel={onCancel}>
+    <Modal
+      onCancel={onCancel}
+      className={style.container}
+      overlayClassName={style.overlay}
+    >
       <h1 className={style.title}>Add to Group</h1>
       <div className={style.searchRow}>
         <ZoomIcon className={style.zoomIcon} />

client/src/components/AddToGroupModal/style.module.scss

@@ -1,5 +1,13 @@
 @import "../../styles/mixins";
 
+.container {
+  z-index: 1100;
+}
+
+.overlay {
+  z-index: 1010;
+}
+
 .buttons {
   display: flex;
   justify-content: flex-end;

client/src/components/Modal/index.jsx

@@ -4,7 +4,7 @@ import PT from "prop-types";
 
 import style from "./style.module.scss";
 
-export default function Modal({ children, className }) {
+export default function Modal({ children, className, overlayClassName = "" }) {
   const [portal, setPortal] = React.useState();
 
   React.useEffect(() => {
@@ -21,6 +21,9 @@ export default function Modal({ children, className }) {
   let containerStyle = style.container;
   if (className) containerStyle += ` ${className}`;
 
+  let overlayStyle = style.overlay;
+  if (overlayClassName) overlayStyle += ` ${overlayClassName}`;
+
   return portal
     ? ReactDom.createPortal(
         <>
@@ -32,7 +35,7 @@ export default function Modal({ children, className }) {
           </div>
           <button
             aria-label="Cancel"
-            className={style.overlay}
+            className={overlayStyle}
             ref={(node) => {
               if (node) {
                 node.focus();