switch modal component to the one from site

package-lock.json

@@ -8134,6 +8134,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-modal": {
+      "version": "3.10.6",
+      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.10.6.tgz",
+      "integrity": "sha512-XpshhwVYir1TRZ2HS5EfmNotJjB8UEC2IkT3omNtiQzROOXSzVLz5xsjwEpACP8U+PctkpfZepX+WT5oDf0a9g==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-paginate": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/@types/react-paginate/-/react-paginate-6.2.1.tgz",
@@ -16480,6 +16489,11 @@
         }
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
     "exif-parser": {
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/exif-parser/-/exif-parser-0.1.12.tgz",
@@ -27781,11 +27795,6 @@
         "tslib": "^1.10.0"
       }
     },
-    "no-scroll": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/no-scroll/-/no-scroll-2.1.1.tgz",
-      "integrity": "sha512-YTzGAJOo/B6hkodeT5SKKHpOhAzjMfkUCCXjLJwjWk2F4/InIg+HbdH9kmT7bKpleDuqLZDTRy2OdNtAj0IVyQ=="
-    },
     "node-abi": {
       "version": "2.19.1",
       "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.19.1.tgz",
@@ -30997,6 +31006,17 @@
         }
       }
     },
+    "react-modal": {
+      "version": "3.11.2",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.11.2.tgz",
+      "integrity": "sha512-o8gvvCOFaG1T7W6JUvsYjRjMVToLZgLIsi5kdhFIQCtHxDkA47LznX62j+l6YQkpXDbvQegsDyxe/+JJsFQN7w==",
+      "requires": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.5.10",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-onclickoutside": {
       "version": "6.9.0",
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz",
@@ -31071,15 +31091,6 @@
         "tslib": "^1.0.0"
       }
     },
-    "react-responsive-modal": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/react-responsive-modal/-/react-responsive-modal-5.1.1.tgz",
-      "integrity": "sha512-DjNBoVWfiP+5KCvpqFKhjKPVpPUYjpieCU/F3nlBU4OPImiZyGdM7l8iDjTIEti0lAt02vbuwmAaVLf3z1Mrqw==",
-      "requires": {
-        "classnames": "^2.2.6",
-        "no-scroll": "^2.1.1"
-      }
-    },
     "react-side-effect": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.0.tgz",

package.json

@@ -66,8 +66,8 @@
     "react-dropzone": "^11.2.0",
     "react-helmet": "^6.1.0",
     "react-markdown": "^5.0.1",
+    "react-modal": "^3.11.2",
     "react-paginate": "^6.5.0",
-    "react-responsive-modal": "^5.1.1",
     "react-spring": "^8.0.27",
     "react-tabs": "^3.1.1",
     "react-toastify": "^6.0.9",
@@ -94,6 +94,7 @@
     "@types/react": "^16.9.53",
     "@types/react-datepicker": "^3.1.1",
     "@types/react-helmet": "^6.1.0",
+    "@types/react-modal": "^3.10.6",
     "@types/react-paginate": "^6.2.1",
     "@types/react-tabs": "^2.3.2",
     "@types/remove-markdown": "^0.1.1",

src/components/atoms/BaseDialog.module.css

@@ -1,10 +0,0 @@
-.customOverlay {
-}
-.customModal {
-  border-radius: 15px;
-  margin: auto;
-}
-
-.dialogTitle {
-  margin-top: 30px !important;
-}

src/components/atoms/BaseDialog.tsx

@@ -1,35 +0,0 @@
-import React, { ReactNode, ReactElement } from 'react'
-import styles from './BaseDialog.module.css'
-import { Modal } from 'react-responsive-modal'
-import 'react-responsive-modal/styles.css'
-export default function BaseDialog({
-  open,
-  title,
-  onClose,
-  children,
-  disableClose,
-  actions,
-  ...other
-}: {
-  open: boolean
-  title: string
-  onClose: () => void
-  children: ReactNode
-  disableClose?: boolean
-  actions?: any
-}): ReactElement {
-  return (
-    <Modal
-      open={open}
-      onClose={onClose}
-      classNames={{
-        overlay: styles.customOverlay,
-        modal: styles.customModal
-      }}
-      {...other}
-    >
-      <h2 className={styles.dialogTitle}>{title}</h2>
-      <div>{children}</div>
-    </Modal>
-  )
-}

src/components/atoms/Modal.module.css

@@ -0,0 +1,96 @@
+/* prevent background scrolling */
+:global(.ReactModal__Body--open) {
+  overflow: hidden;
+}
+
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(3px);
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  animation: fadeIn 0.2s ease-out backwards;
+  z-index: 5;
+}
+
+.modal {
+  composes: box from './Box.module.css';
+  padding: var(--spacer);
+  margin: var(--spacer) auto;
+  max-width: var(--break-point--small);
+  position: relative;
+  animation: moveUp 0.2s ease-out backwards;
+}
+
+.modal:focus {
+  outline: 0;
+}
+
+@media (min-width: 40rem) {
+  .modal {
+    padding: calc(var(--spacer) * 2);
+  }
+}
+
+.header {
+  padding-bottom: var(--spacer);
+}
+
+.title {
+  font-size: var(--font-size-h3);
+  margin: 0;
+}
+
+@media (min-width: 40rem) {
+  .title {
+    font-size: var(--font-size-h2);
+  }
+}
+
+.description {
+  margin: 0;
+  margin-top: var(--spacer);
+}
+
+.close {
+  position: absolute;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  box-shadow: none;
+  outline: 0;
+  top: calc(var(--spacer) / 4);
+  right: calc(var(--spacer) / 2);
+  font-size: var(--font-size-h2);
+  color: var(--brand-grey);
+}
+
+.close:hover,
+.close:focus {
+  opacity: 0.7;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes moveUp {
+  from {
+    transform: translate3d(0, 1rem, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}

src/components/atoms/Modal.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Modal from './Modal'
+import ReactModal from 'react-modal'
+
+describe('Modal', () => {
+  it('renders without crashing', () => {
+    ReactModal.setAppElement(document.createElement('div'))
+
+    render(
+      <Modal title="Hello" isOpen onToggleModal={() => null}>
+        Hello
+      </Modal>
+    )
+    expect(document.querySelector('.ReactModalPortal')).toBeInTheDocument()
+  })
+})

src/components/atoms/Modal.tsx

@@ -0,0 +1,41 @@
+import React, { ReactElement, ReactNode } from 'react'
+import ReactModal from 'react-modal'
+import styles from './Modal.module.css'
+
+if (process.env.NODE_ENV !== 'test') ReactModal.setAppElement('#___gatsby')
+
+export interface ModalProps extends ReactModal.Props {
+  title: string
+  onToggleModal: () => void
+  children: ReactNode
+}
+
+export default function Modal({
+  title,
+  onToggleModal,
+  children,
+  ...props
+}: ModalProps): ReactElement {
+  return (
+    <ReactModal
+      contentLabel={title}
+      className={styles.modal}
+      overlayClassName={styles.modalOverlay}
+      {...props}
+    >
+      <button
+        className={styles.close}
+        onClick={onToggleModal}
+        data-testid="closeModal"
+      >
+        &times;
+      </button>
+
+      <header className={styles.header}>
+        <h2 className={styles.title}>{title}</h2>
+      </header>
+
+      {children}
+    </ReactModal>
+  )
+}

src/components/pages/History/ComputeDetailsModal.tsx

@@ -2,24 +2,26 @@ import { Logger } from '@oceanprotocol/lib'
 import { useOcean } from '@oceanprotocol/react'
 import React, { ReactElement, useEffect, useState } from 'react'
 import Loader from '../../atoms/Loader'
+import Modal from '../../atoms/Modal'
 import AssetList from '../../organisms/AssetList'
-import BaseDialog from '../../atoms/BaseDialog'
 import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/ComputeJob'
 
 export default function ComputeDetailsModal({
   computeJob,
-  open,
+  isOpen,
-  onClose
+  onToggleModal
 }: {
   computeJob: ComputeJob
-  open: boolean
+  isOpen: boolean
-  onClose: () => void
+  onToggleModal: () => void
 }): ReactElement {
   const { ocean, status, accountId } = useOcean()
   const [isLoading, setIsLoading] = useState(false)
+
   useEffect(() => {
     async function getDetails() {
       if (!accountId || !ocean || !computeJob) return
+
       try {
         setIsLoading(true)
       } catch (error) {
@@ -29,11 +31,15 @@ export default function ComputeDetailsModal({
       }
     }
     getDetails()
-  }, [ocean, status, accountId])
+  }, [ocean, status, accountId, computeJob])
 
   return (
-    <BaseDialog open={open} onClose={onClose} title="Compute job details">
+    <Modal
-      {isLoading ? <Loader /> : <>Details</>}
+      title="Compute job details"
-    </BaseDialog>
+      isOpen={isOpen}
+      onToggleModal={onToggleModal}
+    >
+      {isLoading ? <Loader /> : 'Details'}
+    </Modal>
   )
 }

src/components/pages/History/ComputeJobs.tsx

@@ -37,8 +37,8 @@ function DetailsButton({ row }: { row: ComputeJob }): ReactElement {
       </Button>
       <ComputeDetailsModal
         computeJob={row}
-        open={isDialogOpen}
+        isOpen={isDialogOpen}
-        onClose={() => setIsDialogOpen(false)}
+        onToggleModal={() => setIsDialogOpen(false)}
       />
     </>
   )
@@ -64,7 +64,7 @@ const columns = [
   {
     name: 'Name',
     selector: function getAssetRow() {
-      //const did = row.dtAddress.replace('0x', 'did:op:')
+      // const did = row.dtAddress.replace('0x', 'did:op:')
       // return <AssetTitle did={did} />
       return <></>
     }
@@ -85,7 +85,7 @@ const columns = [
 
 export default function ComputeJobs(): ReactElement {
   const { ocean, account } = useOcean()
-  const [jobs,setJobs] = useState<ComputeJob[]>()
+  const [jobs, setJobs] = useState<ComputeJob[]>()
   const [isLoading, setIsLoading] = useState(false)
   const [userAgreed, setUserAgreed] = useState(false)
 
@@ -99,13 +99,15 @@ export default function ComputeJobs(): ReactElement {
         100
       )
       console.log('orders', orderHistory)
-       const userJobs = await ocean.compute.status(account)
+      const userJobs = await ocean.compute.status(account)
 
-      setJobs(userJobs.sort((a, b) => {
+      setJobs(
+        userJobs.sort((a, b) => {
           if (a.dateCreated > b.dateCreated) return -1
           if (a.dateCreated < b.dateCreated) return 1
           return 0
-      }))
+        })
+      )
       setUserAgreed(true)
     } catch (e) {
       console.log(e)