Merge pull request #31 from Blockchain-Country/modaloverlay

blurred modal overlay and fixed bottom padding

package.json

@@ -11,6 +11,7 @@
     "firebase": "^11.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-focus-lock": "^2.13.5",
     "react-icons": "^5.3.0",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.28.0",

src/App.css

@@ -1,11 +1,12 @@
 [data-testid='app_main'] {
   display: flex;
   justify-content: center;
-  margin: auto;
+  height: 100%;
   width: 80%;
-  padding-top: 9rem;
   gap: 2rem;
-  height: 100%;
+  padding-top: 9rem;
+  padding-bottom: 2rem;
+  margin: auto;
   font-size: 1.5rem;
 }
 

src/components/common/modal/Modal.css

@@ -11,6 +11,7 @@ div[data-testid='modal_overlay'] {
   overflow-y: auto;
   z-index: 1000;
   padding-top: 9rem;
+  backdrop-filter: blur(5px);
 }
 
 div[data-testid='modal_component'] {

src/components/common/modal/Modal.jsx

@@ -1,22 +1,25 @@
+import FocusLock from 'react-focus-lock'
 import Button from '../button/Button'
 import './Modal.css'
 
 const Modal = ({ isOpen, onClose, 'data-testid': testId, children }) => {
   if (!isOpen) return null
 
   return (
-    <div data-testid="modal_overlay">
-      <div open={isOpen} data-testid="modal_component">
-        <div data-testid="modal_header">
-          <Button
-            text="Close"
-            data-testid="modal_close_btn"
-            onClick={onClose}
-          ></Button>
+    <FocusLock>
+      <div data-testid="modal_overlay" onClick={onClose}>
+        <div open={isOpen} data-testid="modal_component">
+          <div data-testid="modal_header">
+            <Button
+              text="Close"
+              data-testid="modal_close_btn"
+              onClick={onClose}
+            ></Button>
+          </div>
+          <div data-testid={testId}>{children}</div>
         </div>
-        <div data-testid={testId}>{children}</div>
       </div>
-    </div>
+    </FocusLock>
   )
 }