add liquidity screen styling

src/components/organisms/AssetActions/Pool/Add.module.css

@@ -2,8 +2,26 @@
 }
 
 .addInput {
-  max-width: 12rem;
-  margin: 0 auto var(--spacer) auto;
+  margin: 0 auto calc(var(--spacer) / 1.5) auto;
+  background: var(--brand-grey-dimmed);
+  padding: var(--spacer) calc(var(--spacer) * 3) calc(var(--spacer) * 1.2)
+    calc(var(--spacer) * 3);
+  border-bottom: 1px solid var(--brand-grey-lighter);
+  margin-top: -2rem;
+  margin-left: -2rem;
+  margin-right: -2rem;
+  position: relative;
+}
+
+.addInput input {
+  text-align: center;
+}
+
+.buttonMax {
+  position: absolute;
+  font-size: var(--font-size-mini);
+  bottom: calc(var(--spacer) / 2);
+  right: calc(var(--spacer) * 3);
 }
 
 .userBalance {
@@ -16,7 +34,7 @@
 }
 
 .userBalance span + div {
-  transform: scale(0.7);
+  transform: scale(0.8);
   transform-origin: right center;
 }
 
@@ -28,5 +46,13 @@
 
 .output p {
   font-weight: var(--font-weight-bold);
-  margin-bottom: calc(var(--spacer) / 4);
+  margin-bottom: calc(var(--spacer) / 8);
+}
+
+.output [class*='token'] {
+  white-space: normal;
+}
+
+.output [class*='token'] > figure {
+  display: none;
 }

src/components/organisms/AssetActions/Pool/Add.tsx

@@ -4,14 +4,13 @@ import { useOcean } from '@oceanprotocol/react'
 import Header from './Header'
 import { toast } from 'react-toastify'
 import InputElement from '../../../atoms/Input/InputElement'
+import Button from '../../../atoms/Button'
 import Token from './Token'
 import { Balance } from './'
 import PriceUnit from '../../../atoms/Price/PriceUnit'
 import Actions from './Actions'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
 
-// TODO: handle and display all fees somehow
-
 export default function Add({
   setShowAdd,
   poolAddress,
@@ -61,13 +60,17 @@ export default function Add({
     setAmount(e.target.value)
   }
 
+  function handleMax() {
+    setAmount(balance.ocean)
+  }
+
   return (
     <div className={styles.add}>
       <Header title="Add Liquidity" backAction={() => setShowAdd(false)} />
 
       <div className={styles.addInput}>
         <div className={styles.userBalance}>
-          <span>Available:</span>
+          <span>Available: </span>
           <PriceUnit price={balance.ocean} symbol="OCEAN" small />
         </div>
 
@@ -79,6 +82,17 @@ export default function Add({
           placeholder="0"
           onChange={handleAmountChange}
         />
+
+        {balance.ocean > amount && (
+          <Button
+            className={styles.buttonMax}
+            style="text"
+            size="small"
+            onClick={handleMax}
+          >
+            Use Max
+          </Button>
+        )}
       </div>
 
       <div className={styles.output}>
@@ -89,8 +103,10 @@ export default function Add({
         </div>
         <div>
           <p>You will earn</p>
-          <Token symbol="%" balance={liquidityProviderFee} />
-          of each pool transaction
+          <Token
+            symbol="% of each pool transaction"
+            balance={liquidityProviderFee}
+          />
         </div>
       </div>