From 5e611236693fbea22f2998b6a8e750d9be7e88fd Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 26 Aug 2020 09:01:43 +0200
Subject: [PATCH] add/remove inputs

---
 .../AssetActions/Pool/Add.module.css          |  5 +++++
 .../organisms/AssetActions/Pool/Add.tsx       | 19 +++++++++++--------
 .../AssetActions/Pool/Remove.module.css       |  4 ++++
 .../organisms/AssetActions/Pool/Remove.tsx    | 19 ++++++++++++-------
 4 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/components/organisms/AssetActions/Pool/Add.module.css b/src/components/organisms/AssetActions/Pool/Add.module.css
index 5534ff930..7015fd9c6 100644
--- a/src/components/organisms/AssetActions/Pool/Add.module.css
+++ b/src/components/organisms/AssetActions/Pool/Add.module.css
@@ -1,2 +1,7 @@
 .add {
 }
+
+.addInput {
+  max-width: 12rem;
+  margin: 0 auto var(--spacer) auto;
+}
diff --git a/src/components/organisms/AssetActions/Pool/Add.tsx b/src/components/organisms/AssetActions/Pool/Add.tsx
index 10119b02d..65c18b9ab 100644
--- a/src/components/organisms/AssetActions/Pool/Add.tsx
+++ b/src/components/organisms/AssetActions/Pool/Add.tsx
@@ -7,6 +7,7 @@ import { useOcean } from '@oceanprotocol/react'
 import Header from './Header'
 import Loader from '../../../atoms/Loader'
 import { toast } from 'react-toastify'
+import InputElement from '../../../atoms/Input/InputElement'
 
 export default function Add({
   setShowAdd,
@@ -47,14 +48,16 @@ export default function Add({
     <div className={styles.add}>
       <Header title="Add Liquidity" backAction={() => setShowAdd(false)} />
 
-      <Input
-        name="ocean"
-        label="OCEAN"
-        type="number"
-        placeholder="0"
-        onChange={handleAmountChange}
-      />
-      {/* <Input name="dt" label={dtSymbol} type="number" placeholder="0" /> */}
+      <div className={styles.addInput}>
+        <InputElement
+          value={amount}
+          name="ocean"
+          type="number"
+          prefix="OCEAN"
+          placeholder="0"
+          onChange={handleAmountChange}
+        />
+      </div>
 
       <p>You will receive:</p>
 
diff --git a/src/components/organisms/AssetActions/Pool/Remove.module.css b/src/components/organisms/AssetActions/Pool/Remove.module.css
index e69de29bb..0dc15650e 100644
--- a/src/components/organisms/AssetActions/Pool/Remove.module.css
+++ b/src/components/organisms/AssetActions/Pool/Remove.module.css
@@ -0,0 +1,4 @@
+.removeInput {
+  max-width: 12rem;
+  margin: 0 auto var(--spacer) auto;
+}
diff --git a/src/components/organisms/AssetActions/Pool/Remove.tsx b/src/components/organisms/AssetActions/Pool/Remove.tsx
index 44eea2424..8d57c9b24 100644
--- a/src/components/organisms/AssetActions/Pool/Remove.tsx
+++ b/src/components/organisms/AssetActions/Pool/Remove.tsx
@@ -7,6 +7,7 @@ import { useOcean } from '@oceanprotocol/react'
 import Header from './Header'
 import { toast } from 'react-toastify'
 import Loader from '../../../atoms/Loader'
+import InputElement from '../../../atoms/Input/InputElement'
 
 export default function Remove({
   setShowRemove,
@@ -51,13 +52,17 @@ export default function Remove({
         backAction={() => setShowRemove(false)}
       />
 
-      <Input
-        name="ocean"
-        label="OCEAN"
-        type="number"
-        placeholder="0"
-        onChange={handleAmountChange}
-      />
+      <div className={styles.removeInput}>
+        <InputElement
+          value={amount}
+          name="ocean"
+          type="number"
+          prefix="OCEAN"
+          placeholder="0"
+          onChange={handleAmountChange}
+        />
+      </div>
+
       {/* <Input name="dt" label={dtSymbol} type="number" placeholder="0" /> */}
 
       <p>You will receive:</p>