From d9f86edbd52f56ddf2ed688ec8fdf4fcfc18dc0d Mon Sep 17 00:00:00 2001
From: KY Lau <kian_yee.lau@daimler.com>
Date: Fri, 11 Jun 2021 14:35:51 +0800
Subject: [PATCH] Enhance Credentials Component UI

---
 .../Credential/Credential.module.css          | 24 +------------------
 .../molecules/FormFields/Credential/index.tsx | 12 ++++++----
 2 files changed, 8 insertions(+), 28 deletions(-)

diff --git a/src/components/molecules/FormFields/Credential/Credential.module.css b/src/components/molecules/FormFields/Credential/Credential.module.css
index 1b14d5d98..1a76ef143 100644
--- a/src/components/molecules/FormFields/Credential/Credential.module.css
+++ b/src/components/molecules/FormFields/Credential/Credential.module.css
@@ -1,26 +1,7 @@
 .chip {
   border: 1px solid var(--border-color);
   display: flex;
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-
-.input {
-  font-size: var(--font-size-base);
-  font-family: var(--font-family-base);
-  color: var(--font-color-heading);
-  border: 1px solid var(--border-color);
-  box-shadow: none;
-  width: 100%;
-  background: var(--background-body);
-  padding: calc(var(--spacer) / 3);
-  margin: 0;
-  border-radius: var(--border-radius);
-  transition: 0.2s ease-out;
-  height: 43px;
-  min-width: 0;
-  appearance: none;
-  display: block;
+  padding-left: 10px;
 }
 
 .buttonWrapper {
@@ -37,13 +18,11 @@
   width: var(--font-size-large);
   height: var(--font-size-large);
   fill: var(--brand-pink);
-  transform: rotate(90deg);
   vertical-align: middle;
 }
 
 .scroll {
   border-top: 1px solid var(--border-color);
-  margin-top: calc(var(--spacer) / 4);
   min-height: fit-content;
   max-height: 200px;
   position: relative;
@@ -56,7 +35,6 @@
   border: 1px solid var(--border-color);
   background-color: var(--background-highlight);
   border-radius: var(--border-radius);
-  margin-bottom: calc(var(--spacer) / 2);
   font-size: var(--font-size-small);
   min-height: 200px;
 }
diff --git a/src/components/molecules/FormFields/Credential/index.tsx b/src/components/molecules/FormFields/Credential/index.tsx
index 2afc39420..3aa21085d 100644
--- a/src/components/molecules/FormFields/Credential/index.tsx
+++ b/src/components/molecules/FormFields/Credential/index.tsx
@@ -7,6 +7,7 @@ import styles from './Credential.module.css'
 import { isAddress } from 'web3-utils'
 import { toast } from 'react-toastify'
 import { ReactComponent as Cross } from '../../../../images/cross.svg'
+import InputElement from '../../../atoms/Input/InputElement'
 
 export default function Credentials(props: InputProps) {
   const [field, meta, helpers] = useField(props.name)
@@ -40,14 +41,15 @@ export default function Credentials(props: InputProps) {
   return (
     <div className={styles.credential}>
       <InputGroup>
-        <input
-          className={styles.input}
+        <InputElement
+          type="text"
+          name="address"
+          size="default"
           placeholder={props.placeholder}
-          name="search"
+          value={value}
           onChange={(e: ChangeEvent<HTMLInputElement>) =>
             setValue(e.target.value)
           }
-          value={value}
         />
         <Button
           onClick={(e: FormEvent<HTMLButtonElement>) => handleAddValue(e)}
@@ -60,7 +62,7 @@ export default function Credentials(props: InputProps) {
           arrayInput.map((value) => {
             return (
               <div className={styles.chip} key={value}>
-                {value}
+                <code>{value}</code>
                 <span className={styles.buttonWrapper}>
                   <Button
                     className={styles.crossButton}