From 9f44ee9833eb9588fe6543c6883d425f52e3be2b Mon Sep 17 00:00:00 2001
From: KY Lau <kian_yee.lau@daimler.com>
Date: Wed, 9 Jun 2021 08:27:00 +0800
Subject: [PATCH] #638 Improved UI

---
 src/components/molecules/FormFields/Credential/index.tsx    | 3 ++-
 .../AssetActions/Edit/DebugEditAdvanceSettings.tsx          | 2 +-
 .../organisms/AssetActions/Edit/EditAdvanceSettings.tsx     | 2 +-
 src/images/cross.svg                                        | 3 +++
 src/models/FormEditCredential.ts                            | 6 +++---
 5 files changed, 10 insertions(+), 6 deletions(-)
 create mode 100644 src/images/cross.svg

diff --git a/src/components/molecules/FormFields/Credential/index.tsx b/src/components/molecules/FormFields/Credential/index.tsx
index 498a6a229..c0d4818cd 100644
--- a/src/components/molecules/FormFields/Credential/index.tsx
+++ b/src/components/molecules/FormFields/Credential/index.tsx
@@ -6,6 +6,7 @@ import Button from '../../../atoms/Button'
 import styles from './Credential.module.css'
 import { isAddress } from 'web3-utils'
 import { toast } from 'react-toastify'
+import { ReactComponent as Cross } from '../../../../images/cross.svg'
 
 export default function Credential(props: InputProps) {
   const [field, meta, helpers] = useField(props.name)
@@ -66,7 +67,7 @@ export default function Credential(props: InputProps) {
                 style="text"
                 onClick={(even) => handleDeleteChip(value)}
               >
-                X
+                <Cross />
               </Button>
             </div>
           )
diff --git a/src/components/organisms/AssetActions/Edit/DebugEditAdvanceSettings.tsx b/src/components/organisms/AssetActions/Edit/DebugEditAdvanceSettings.tsx
index cd0060926..86953909e 100644
--- a/src/components/organisms/AssetActions/Edit/DebugEditAdvanceSettings.tsx
+++ b/src/components/organisms/AssetActions/Edit/DebugEditAdvanceSettings.tsx
@@ -23,7 +23,7 @@ export default function DebugEditCredential({
       const newDdo = await ocean.assets.updateCredentials(
         ddo,
         credentialType,
-        values.allowCredentail,
+        values.allow,
         [] // TODO: denyCredential
       )
       setCredential(newDdo.credentials)
diff --git a/src/components/organisms/AssetActions/Edit/EditAdvanceSettings.tsx b/src/components/organisms/AssetActions/Edit/EditAdvanceSettings.tsx
index bb443940f..7a2898859 100644
--- a/src/components/organisms/AssetActions/Edit/EditAdvanceSettings.tsx
+++ b/src/components/organisms/AssetActions/Edit/EditAdvanceSettings.tsx
@@ -83,7 +83,7 @@ export default function EditAdvanceSettings({
       const ddoEditedCredential = await ocean.assets.updateCredentials(
         ddo,
         credentialType,
-        values.allowCredentail,
+        values.allow,
         [] // TODO: denyCredential
       )
 
diff --git a/src/images/cross.svg b/src/images/cross.svg
new file mode 100644
index 000000000..448fdee46
--- /dev/null
+++ b/src/images/cross.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
+  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+</svg>
\ No newline at end of file
diff --git a/src/models/FormEditCredential.ts b/src/models/FormEditCredential.ts
index d81003a4b..8faaf89ee 100644
--- a/src/models/FormEditCredential.ts
+++ b/src/models/FormEditCredential.ts
@@ -7,12 +7,12 @@ import {
 import * as Yup from 'yup'
 
 export interface AdvanceSettingsForm {
-  allowCredentail: string[]
+  allow: string[]
 }
 
 export const validationSchema: Yup.SchemaOf<AdvanceSettingsForm> = Yup.object().shape(
   {
-    allowCredentail: Yup.array().nullable()
+    allow: Yup.array().nullable()
   }
 )
 
@@ -49,5 +49,5 @@ export function getInitialValues(
     credentailType,
     'allow'
   )
-  return { allowCredentail: allowCrendtail }
+  return { allow: allowCrendtail }
 }