pool badge for pool prices

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

@@ -12,8 +12,11 @@
   font-size: var(--font-size-base);
 }
 
-.small {
+.price.small {
-  /* lazy making-conversion-smaller-with-same-markup */
+  display: inline-block;
-  transform: scale(0.8);
+  font-size: var(--font-size-base);
-  transform-origin: left 80%;
+}
+
+.price.small span:first-child {
+  font-size: var(--font-size-small);
 }

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

@@ -2,3 +2,8 @@
   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,6 +5,7 @@ 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,
@@ -23,12 +24,17 @@ export default function Price({
   return !ocean ? (
     <div className={styles.empty}>Connect your wallet to view price</div>
   ) : price?.value ? (
-    <PriceUnit
+    <>
-      price={price.value}
+      <PriceUnit
-      className={className}
+        price={price.value}
-      small={small}
+        className={className}
-      conversion={conversion}
+        small={small}
-    />
+        conversion={conversion}
+      />
+      {price?.type === 'pool' && (
+        <Badge label="pool" className={styles.badge} />
+      )}
+    </>
   ) : price?.value === '' ? (
     <div className={styles.empty}>
       No price found{' '}

src/components/organisms/AssetActions/Consume.module.css

@@ -12,18 +12,8 @@
   flex-shrink: 0;
 }
 
-.pricewrapper {
-  display: flex;
-  flex-wrap: wrap;
-}
-
 .pricewrapper button {
-  margin-top: calc(var(--spacer) / 2);
+  margin-top: var(--spacer);
-  align-self: flex-end;
-}
-
-.pricewrapper > div {
-  min-height: 30px;
 }
 
 .feedback {