added overlay

src/components/CreateWorkPopup/CreateWorkPopup.jsx

@@ -19,22 +19,29 @@ export const CreateWorkPopup = ({ popupRef, close }) => {
   };
 
   return (
-    <div ref={popupRef} className={style.CreateWorkPopup}>
-      <header className={style.header}>
-        <span>Create Work</span>
-        <button onClick={close}>✕</button>
-      </header>
-      <form onSubmit={handleCreateWork} className={style.container}>
-        <Input title={'Title'} value={title.value} onChange={title.onChange} />
-        <Input
-          value={description.value}
-          onChange={description.onChange}
-          title={'Description'}
-        />
-        <button type={'submit'} className={style.save}>
-          Create
-        </button>
-      </form>
-    </div>
+    <>
+      <div className={style.overlay}></div>
+      <div ref={popupRef} className={style.CreateWorkPopup}>
+        <header className={style.header}>
+          <span>Create Work</span>
+          <button onClick={close}>✕</button>
+        </header>
+        <form onSubmit={handleCreateWork} className={style.container}>
+          <Input
+            title={'Title'}
+            value={title.value}
+            onChange={title.onChange}
+          />
+          <Input
+            value={description.value}
+            onChange={description.onChange}
+            title={'Description'}
+          />
+          <button type={'submit'} className={style.save}>
+            Create
+          </button>
+        </form>
+      </div>
+    </>
   );
 };

src/components/CreateWorkPopup/CreateWorkPopup.module.scss

@@ -1,5 +1,15 @@
 @import "../../scss/index.scss";
 
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 1;
+}
+
 .CreateWorkPopup {
   width: 760px;
   height: 500px;