From 77d305ae2e2bf706a3a8116df6983e83c188637c Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 26 Aug 2020 10:12:43 +0200
Subject: [PATCH] add/remove header visual tweaks

---
 .../organisms/AssetActions/Pool/Add.module.css     | 14 ++++++++++++++
 src/components/organisms/AssetActions/Pool/Add.tsx |  8 +++++++-
 .../organisms/AssetActions/Pool/Header.module.css  |  8 ++++++++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/organisms/AssetActions/Pool/Add.module.css b/src/components/organisms/AssetActions/Pool/Add.module.css
index 7015fd9c6..50e1b7af4 100644
--- a/src/components/organisms/AssetActions/Pool/Add.module.css
+++ b/src/components/organisms/AssetActions/Pool/Add.module.css
@@ -5,3 +5,17 @@
   max-width: 12rem;
   margin: 0 auto var(--spacer) auto;
 }
+
+.userBalance {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--font-size-mini);
+  margin-bottom: calc(var(--spacer) / 4);
+  color: var(--color-secondary);
+}
+
+.userBalance span + div {
+  transform: scale(0.7);
+  transform-origin: right center;
+}
diff --git a/src/components/organisms/AssetActions/Pool/Add.tsx b/src/components/organisms/AssetActions/Pool/Add.tsx
index 53203239f..efb5b805c 100644
--- a/src/components/organisms/AssetActions/Pool/Add.tsx
+++ b/src/components/organisms/AssetActions/Pool/Add.tsx
@@ -9,6 +9,7 @@ import { toast } from 'react-toastify'
 import InputElement from '../../../atoms/Input/InputElement'
 import Token from './Token'
 import { Balance } from './'
+import PriceUnit from '../../../atoms/Price/PriceUnit'
 
 function calculatePercent(percent: number, num: number) {
   return (percent / 100) * num
@@ -27,7 +28,7 @@ export default function Add({
   totalPoolTokens: string
   totalBalance: Balance
 }): ReactElement {
-  const { ocean, accountId } = useOcean()
+  const { ocean, accountId, balance } = useOcean()
   const [amount, setAmount] = useState<string>()
   const [isLoading, setIsLoading] = useState<boolean>()
   const [newDtAmount, setNewDtAmount] = useState<string>()
@@ -67,6 +68,11 @@ export default function Add({
       <Header title="Add Liquidity" backAction={() => setShowAdd(false)} />
 
       <div className={styles.addInput}>
+        <div className={styles.userBalance}>
+          <span>Available:</span>
+          <PriceUnit price={balance.ocean} symbol="OCEAN" small />
+        </div>
+
         <InputElement
           value={amount}
           name="ocean"
diff --git a/src/components/organisms/AssetActions/Pool/Header.module.css b/src/components/organisms/AssetActions/Pool/Header.module.css
index 27f6af5fc..c45bc9edc 100644
--- a/src/components/organisms/AssetActions/Pool/Header.module.css
+++ b/src/components/organisms/AssetActions/Pool/Header.module.css
@@ -2,12 +2,20 @@
   display: flex;
   justify-content: center;
   margin-bottom: var(--spacer);
+  padding-bottom: calc(var(--spacer) / 2);
+  border-bottom: 1px solid var(--brand-grey-lighter);
+  margin-top: -1rem;
+  margin-left: -2rem;
+  margin-right: -2rem;
+  padding-left: var(--spacer);
+  padding-right: var(--spacer);
 }
 
 .headerTitle {
   font-size: var(--font-size-large);
   margin: 0;
   margin-right: auto;
+  margin-left: -3rem;
 }
 
 .back {