price display tweaks

src/components/atoms/Price/PriceUnit.module.css

@@ -3,7 +3,11 @@
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-large);
   color: var(--brand-grey-dark);
-  line-height: 1;
+  line-height: 1.2;
+}
+
+.price > div:firt-child {
+  white-space: nowrap;
 }
 
 .price span:first-child {
@@ -20,3 +24,8 @@
 .price.small span:first-child {
   font-size: var(--font-size-small);
 }
+
+.badge {
+  vertical-align: middle;
+  margin-left: calc(var(--spacer) / 6);
+}

src/components/atoms/Price/PriceUnit.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames/bind'
 import Conversion from './Conversion'
 import styles from './PriceUnit.module.css'
 import { useUserPreferences } from '../../../providers/UserPreferences'
+import Badge from '../Badge'
 
 const cx = classNames.bind(styles)
 
@@ -12,9 +13,11 @@ export default function PriceUnit({
   className,
   small,
   conversion,
-  symbol
+  symbol,
+  type
 }: {
   price: string
+  type?: string
   className?: string
   small?: boolean
   conversion?: boolean
@@ -30,15 +33,21 @@ export default function PriceUnit({
 
   return (
     <div className={styleClasses}>
-      {Number.isNaN(Number(price))
+      <div>
-        ? '-'
+        {Number.isNaN(Number(price))
-        : formatCurrency(Number(price), '', locale, false, {
+          ? '-'
-            // Not exactly clear what `significant figures` are for this library,
+          : formatCurrency(Number(price), '', locale, false, {
-            // but setting this seems to give us the formatting we want.
+              // Not exactly clear what `significant figures` are for this library,
-            // See https://github.com/oceanprotocol/market/issues/70
+              // but setting this seems to give us the formatting we want.
-            significantFigures: 4
+              // See https://github.com/oceanprotocol/market/issues/70
-          })}{' '}
+              significantFigures: 4
-      <span>{symbol || 'OCEAN'}</span>
+            })}{' '}
+        <span>{symbol || 'OCEAN'}</span>
+        {type && type === 'pool' && (
+          <Badge label="pool" className={styles.badge} />
+        )}
+      </div>
+
       {conversion && <Conversion price={price} />}
     </div>
   )

src/components/atoms/Price/index.module.css

@@ -2,8 +2,3 @@
   color: var(--color-secondary);
   font-weight: var(--font-weight-bold);
 }
-
-.badge {
-  vertical-align: middle;
-  margin-left: calc(var(--spacer) / 6);
-}

src/components/atoms/Price/index.tsx

@@ -5,7 +5,6 @@ import { DDO } from '@oceanprotocol/lib'
 import Loader from '../Loader'
 import Tooltip from '../Tooltip'
 import PriceUnit from './PriceUnit'
-import Badge from '../Badge'
 
 export default function Price({
   ddo,
@@ -21,17 +20,13 @@ export default function Price({
   const { price } = useMetadata(ddo)
 
   return price?.value ? (
-    <>
+    <PriceUnit
-      <PriceUnit
+      price={`${price.value}`}
-        price={`${price.value}`}
+      className={className}
-        className={className}
+      small={small}
-        small={small}
+      conversion={conversion}
-        conversion={conversion}
+      type={price.type}
-      />
+    />
-      {price?.type === 'pool' && (
-        <Badge label="pool" className={styles.badge} />
-      )}
-    </>
   ) : !price || price?.value === 0 ? (
     <div className={styles.empty}>
       No price found{' '}