add/remove header visual tweaks

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;
+}

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"

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 {