From 80901b5bb47383e4be10b63bf2fcfe5129b905b9 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 12 Oct 2020 12:09:32 +0200
Subject: [PATCH] new pool layout

---
 .../Pool/PoolStatistics.module.css            |  7 +++-
 .../AssetActions/Pool/PoolStatistics.tsx      | 26 ++++++++----
 .../AssetActions/Pool/Token.module.css        |  4 +-
 .../AssetActions/Pool/index.module.css        | 25 +++++++----
 .../organisms/AssetActions/Pool/index.tsx     | 42 +++++++++++--------
 5 files changed, 66 insertions(+), 38 deletions(-)

diff --git a/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css b/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css
index e7935648e..2b8495629 100644
--- a/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css
+++ b/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css
@@ -1,4 +1,9 @@
-.statistics {
+.tokeninfo {
+  margin-top: calc(var(--spacer) / 1.5);
+}
+
+.tokens {
+  composes: tokens from './index.module.css';
 }
 
 .title {
diff --git a/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx b/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
index f1d91656e..1e6e6bdf1 100644
--- a/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
+++ b/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
@@ -21,16 +21,24 @@ export default function PoolStatistics({
     totalBalance.ocean + totalBalance.datatoken * Number(price)
 
   return (
-    <div className={styles.statistics}>
+    <div className={styles.tokeninfo}>
       <h3 className={styles.title}>Pool Statistics</h3>
-      <Token symbol="OCEAN" balance={`${totalBalance.ocean}`} />
-      <Token symbol={dtSymbol} balance={`${totalBalance.datatoken}`} />
-      <Token symbol="pool shares" balance={totalPoolTokens} noIcon />
-      <Token symbol="% swap fee" balance={swapFee} noIcon />
-      <Conversion
-        price={`${totalLiquidityInOcean}`}
-        className={styles.totalLiquidity}
-      />
+
+      <div className={styles.tokens}>
+        <div>
+          <Token symbol="OCEAN" balance={`${totalBalance.ocean}`} />
+          <Token symbol={dtSymbol} balance={`${totalBalance.datatoken}`} />
+        </div>
+        <div>
+          <Token symbol="pool shares" balance={totalPoolTokens} noIcon />
+          <Token symbol="% swap fee" balance={swapFee} noIcon />
+        </div>
+
+        <Conversion
+          price={`${totalLiquidityInOcean}`}
+          className={styles.totalLiquidity}
+        />
+      </div>
     </div>
   )
 }
diff --git a/src/components/organisms/AssetActions/Pool/Token.module.css b/src/components/organisms/AssetActions/Pool/Token.module.css
index f0cd685e8..5ed46e562 100644
--- a/src/components/organisms/AssetActions/Pool/Token.module.css
+++ b/src/components/organisms/AssetActions/Pool/Token.module.css
@@ -1,6 +1,6 @@
 .token {
   font-weight: var(--font-weight-bold);
-  margin-bottom: calc(var(--spacer) / 3);
+  margin-bottom: calc(var(--spacer) / 4);
   white-space: nowrap;
 }
 
@@ -17,7 +17,7 @@
   padding: 0.3rem;
   vertical-align: middle;
   margin-right: calc(var(--spacer) / 8);
-  margin-top: -0.3rem;
+  margin-top: -0.2rem;
 }
 
 .icon svg {
diff --git a/src/components/organisms/AssetActions/Pool/index.module.css b/src/components/organisms/AssetActions/Pool/index.module.css
index 7f55c3554..7dcd11a99 100644
--- a/src/components/organisms/AssetActions/Pool/index.module.css
+++ b/src/components/organisms/AssetActions/Pool/index.module.css
@@ -1,12 +1,11 @@
 .dataToken {
-  margin-bottom: var(--spacer);
   padding-bottom: calc(var(--spacer) / 1.5);
   font-size: var(--font-size-large);
   border-bottom: 1px solid var(--brand-grey-lighter);
   margin-left: -2rem;
   margin-right: -2rem;
-  padding-left: var(--spacer);
-  padding-right: var(--spacer);
+  padding-left: calc(var(--spacer) / 1.5);
+  padding-right: calc(var(--spacer) / 1.5);
   text-align: center;
 }
 
@@ -22,25 +21,33 @@
   margin-right: calc(var(--spacer) / 3);
 }
 
-.poolTokens {
+.tokeninfo {
+  background: var(--brand-grey-dimmed);
+  padding: calc(var(--spacer) / 1.5) var(--spacer) calc(var(--spacer) / 2)
+    var(--spacer);
+  border-bottom: 1px solid var(--brand-grey-lighter);
+  margin-left: -2rem;
+  margin-right: -2rem;
+}
+
+.tokens {
   display: grid;
-  gap: var(--spacer);
   grid-template-columns: 1fr 1fr;
+  grid-auto-flow: row;
 }
 
 .title {
   font-size: var(--font-size-base);
-  margin-bottom: calc(var(--spacer) / 1.5);
+  margin-bottom: calc(var(--spacer) / 3);
 }
 
 .totalLiquidity {
   composes: token from './Token.module.css';
+  margin-bottom: 0;
   font-weight: var(--font-weight-base) !important;
   font-size: var(--font-size-small);
   padding-left: var(--font-size-base);
-  padding-top: calc(var(--spacer) / 3);
-  width: 100%;
-  border-top: 1px solid var(--brand-grey-lighter);
+  min-height: 24px;
 }
 
 .totalLiquidity strong {
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx
index 73902ca06..6f06cf854 100644
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/src/components/organisms/AssetActions/Pool/index.tsx
@@ -145,31 +145,39 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
             </div>
           </div>
 
-          <div className={styles.poolTokens}>
+          <div className={styles.tokeninfo}>
+            <h3 className={styles.title}>
+              Your Liquidity
+              <Tooltip content="Explain what this represents, advantage of providing liquidity..." />
+            </h3>
+
             <div className={styles.tokens}>
-              <h3 className={styles.title}>
-                Your Liquidity
-                <Tooltip content="Explain what this represents, advantage of providing liquidity..." />
-              </h3>
-              <Token symbol="OCEAN" balance={`${userLiquidity.ocean}`} />
-              <Token symbol={dtSymbol} balance={`${userLiquidity.datatoken}`} />
-              <Token symbol="pool shares" balance={poolTokens} noIcon />
-              <Token symbol="% of pool" balance={poolShare} noIcon />
+              <div>
+                <Token symbol="OCEAN" balance={`${userLiquidity.ocean}`} />
+                <Token
+                  symbol={dtSymbol}
+                  balance={`${userLiquidity.datatoken}`}
+                />
+              </div>
+              <div>
+                <Token symbol="pool shares" balance={poolTokens} noIcon />
+                <Token symbol="% of pool" balance={poolShare} noIcon />
+              </div>
               <Conversion
                 price={`${totalUserLiquidityInOcean}`}
                 className={styles.totalLiquidity}
               />
             </div>
-
-            <PoolStatistics
-              price={`${price.value}`}
-              totalPoolTokens={totalPoolTokens}
-              totalBalance={{ ocean: price.ocean, datatoken: price.datatoken }}
-              swapFee={swapFee}
-              dtSymbol={dtSymbol}
-            />
           </div>
 
+          <PoolStatistics
+            price={`${price.value}`}
+            totalPoolTokens={totalPoolTokens}
+            totalBalance={{ ocean: price.ocean, datatoken: price.datatoken }}
+            swapFee={swapFee}
+            dtSymbol={dtSymbol}
+          />
+
           <div className={stylesActions.actions}>
             <Button
               style="primary"