refactor

src/components/organisms/AssetContent/Pricing/Feedback.tsx

@@ -0,0 +1,22 @@
+import Loader from '../../../atoms/Loader'
+import SuccessConfetti from '../../../atoms/SuccessConfetti'
+import React, { ReactElement } from 'react'
+import styles from './Feedback.module.css'
+
+export default function Feedback({
+  success,
+  pricingStepText
+}: {
+  success: string
+  pricingStepText: string
+}): ReactElement {
+  return (
+    <div className={styles.feedback}>
+      {success ? (
+        <SuccessConfetti success={success} />
+      ) : (
+        <Loader message={pricingStepText} />
+      )}
+    </div>
+  )
+}

src/components/organisms/AssetContent/Pricing/FormPricing/Coin.module.css

@@ -8,7 +8,7 @@
 }
 
 .icon {
-  composes: box from '../../../atoms/Box.module.css';
+  composes: box from '../../../../atoms/Box.module.css';
   padding: calc(var(--spacer) / 1.5);
   width: 6rem;
   height: 6rem;

src/components/organisms/AssetContent/Pricing/FormPricing/Coin.tsx

@@ -1,9 +1,9 @@
 import React, { ReactElement } from 'react'
 import stylesIndex from './index.module.css'
 import styles from './Coin.module.css'
-import InputElement from '../../../atoms/Input/InputElement'
-import { ReactComponent as Logo } from '../../../../images/logo.svg'
-import Conversion from '../../../atoms/Price/Conversion'
+import InputElement from '../../../../atoms/Input/InputElement'
+import { ReactComponent as Logo } from '../../../../../images/logo.svg'
+import Conversion from '../../../../atoms/Price/Conversion'
 import { DataTokenOptions } from '@oceanprotocol/react'
 import { useField } from 'formik'
 import Error from './Error'

src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx

@@ -1,18 +1,18 @@
 import { DataTokenOptions, useOcean, usePricing } from '@oceanprotocol/react'
-import PriceUnit from '../../../atoms/Price/PriceUnit'
+import PriceUnit from '../../../../atoms/Price/PriceUnit'
 import React, { ReactElement, useEffect, useState } from 'react'
-import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
-import { isCorrectNetwork } from '../../../../utils/wallet'
-import Alert from '../../../atoms/Alert'
-import FormHelp from '../../../atoms/Input/Help'
-import Tooltip from '../../../atoms/Tooltip'
-import Wallet from '../../../molecules/Wallet'
+import { useSiteMetadata } from '../../../../../hooks/useSiteMetadata'
+import { isCorrectNetwork } from '../../../../../utils/wallet'
+import Alert from '../../../../atoms/Alert'
+import FormHelp from '../../../../atoms/Input/Help'
+import Tooltip from '../../../../atoms/Tooltip'
+import Wallet from '../../../../molecules/Wallet'
 import Coin from './Coin'
 import styles from './Dynamic.module.css'
 import Fees from './Fees'
 import stylesIndex from './index.module.css'
 import { useFormikContext } from 'formik'
-import { PriceOptionsMarket } from '../../../../@types/MetaData'
+import { PriceOptionsMarket } from '../../../../../@types/MetaData'
 import { DDO } from '@oceanprotocol/lib'
 
 export default function Dynamic({

src/components/organisms/AssetContent/Pricing/FormPricing/Error.tsx

@@ -1,6 +1,6 @@
 import { FieldMetaProps } from 'formik'
 import React, { ReactElement } from 'react'
-import stylesInput from '../../../atoms/Input/index.module.css'
+import stylesInput from '../../../../atoms/Input/index.module.css'
 
 export default function Error({
   meta

src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx

@@ -1,8 +1,8 @@
 import React, { ReactElement } from 'react'
-import Tooltip from '../../../atoms/Tooltip'
+import Tooltip from '../../../../atoms/Tooltip'
 import styles from './Fees.module.css'
 import { useField } from 'formik'
-import Input from '../../../atoms/Input'
+import Input from '../../../../atoms/Input'
 import Error from './Error'
 
 export default function Fees({

src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.tsx

@@ -1,10 +1,10 @@
 import React, { ReactElement } from 'react'
 import stylesIndex from './index.module.css'
 import styles from './Fixed.module.css'
-import FormHelp from '../../../atoms/Input/Help'
-import Conversion from '../../../atoms/Price/Conversion'
+import FormHelp from '../../../../atoms/Input/Help'
+import Conversion from '../../../../atoms/Price/Conversion'
 import { useField } from 'formik'
-import Input from '../../../atoms/Input'
+import Input from '../../../../atoms/Input'
 import Error from './Error'
 import { DDO } from '@oceanprotocol/lib'
 import { usePricing } from '@oceanprotocol/react'

src/components/organisms/AssetContent/Pricing/FormPricing/index.module.css

@@ -1,8 +1,6 @@
 .price {
-  margin: -2rem;
+  margin-top: -2rem;
   margin-bottom: 0;
-  border-bottom: 1px solid var(--brand-grey-lighter);
-  padding-bottom: var(--spacer);
 }
 
 .content {

src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx

@@ -1,13 +1,13 @@
 import React, { ReactElement, useEffect } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import styles from './index.module.css'
-import Tabs from '../../../atoms/Tabs'
+import Tabs from '../../../../atoms/Tabs'
 import Fixed from './Fixed'
 import Dynamic from './Dynamic'
 import { useFormikContext } from 'formik'
-import { useUserPreferences } from '../../../../providers/UserPreferences'
-import { PriceOptionsMarket } from '../../../../@types/MetaData'
-import Button from '../../../atoms/Button'
+import { useUserPreferences } from '../../../../../providers/UserPreferences'
+import { PriceOptionsMarket } from '../../../../../@types/MetaData'
+import Button from '../../../../atoms/Button'
 import { DDO } from '@oceanprotocol/lib'
 
 const query = graphql`

src/components/organisms/AssetContent/Pricing/index.module.css

@@ -1,5 +1,12 @@
 .pricing {
   margin-bottom: var(--spacer);
+  padding-bottom: var(--spacer);
+  border-bottom: 1px solid var(--brand-grey-lighter);
+  margin-left: -2rem;
+  margin-right: -2rem;
+}
+
+.feedback {
   width: 100%;
   min-height: 20vh;
   display: flex;

src/components/organisms/AssetContent/Pricing/index.tsx

@@ -1,15 +1,14 @@
 import React, { FormEvent, ReactElement, useState } from 'react'
 import { Formik } from 'formik'
-import { initialValues, validationSchema } from '../../../models/FormPricing'
+import { initialValues, validationSchema } from '../../../../models/FormPricing'
 import { DDO, Logger } from '@oceanprotocol/lib'
 import { usePricing } from '@oceanprotocol/react'
-import { PriceOptionsMarket } from '../../../@types/MetaData'
-import Alert from '../../atoms/Alert'
-import styles from './Pricing.module.css'
+import { PriceOptionsMarket } from '../../../../@types/MetaData'
+import Alert from '../../../atoms/Alert'
+import styles from './index.module.css'
 import FormPricing from './FormPricing'
-import Loader from '../../atoms/Loader'
-import SuccessConfetti from '../../atoms/SuccessConfetti'
 import { toast } from 'react-toastify'
+import Feedback from './Feedback'
 
 export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
   const {
@@ -63,11 +62,7 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
       >
         {() =>
           hasFeedback ? (
-            success ? (
-              <SuccessConfetti success={success} />
-            ) : (
-              <Loader message={pricingStepText} />
-            )
+            <Feedback success={success} pricingStepText={pricingStepText} />
           ) : showPricing ? (
             <FormPricing ddo={ddo} setShowPricing={setShowPricing} />
           ) : (