From a2464263e075170aae9ab669c9a45d8fce7e072a Mon Sep 17 00:00:00 2001
From: angeli-mercedes <101687552+angeli-mercedes@users.noreply.github.com>
Date: Mon, 4 Sep 2023 23:04:45 +0800
Subject: [PATCH 1/2] Remove image button

---
 components/fields/FileField.js               | 16 +++++++++----
 components/renderers/admin/UploadRenderer.js |  1 +
 styles/klaudsolcms.scss                      | 25 ++++++++++++++++++--
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/components/fields/FileField.js b/components/fields/FileField.js
index 13e66a6b..ebf17e90 100644
--- a/components/fields/FileField.js
+++ b/components/fields/FileField.js
@@ -46,6 +46,11 @@ const FileField = (props) => {
     document.body.onfocus = checkIfUnfocused;
   };
 
+  const onRemoveImage = () => {
+    setFieldValue(field.name, null);
+    setStaticLink(null);
+  }
+
   return (
     <div>
       <div className="field_base">
@@ -69,25 +74,26 @@ const FileField = (props) => {
         )}
         {!props.hideUpload && <AppButtonLg
           title={props.buttonPlaceholder ?? "Browse..."}
-          className="btn_general_lg--invert_colors field_btn"
+          className="btn_general_lg--invert_colors field_btn btn-upload"
           onClick={openUploadMenu}
           isDisabled={isFetching || props.disableAllButtons}
         />}
-        {props.showDeleteButton && (
+        {props.showDeleteButton && (staticLink || value) && (
           <button
             className={`new_entry_block_button_delete logo ${isFetching && `delete`}`}
-            onClick={()=>{props.onDelete(setStaticLink)}}
+            onClick={() => onRemoveImage()}
             type="button"
             disabled={isFetching || props.disableAllButtons}
           >
-            <div>
+            <div className="btn-upload-text-container">
               {props.isDeleting ? (
                 <AppButtonSpinner height={10} />
               ) : (
                 <FaTrash className="icon_block_button" />
               )}
+              <p className="btn-upload-text">Remove</p>
             </div>
-            <p>Remove</p>
+     
           </button>
         )}
       </div>
diff --git a/components/renderers/admin/UploadRenderer.js b/components/renderers/admin/UploadRenderer.js
index e1d0de6a..952e18d5 100644
--- a/components/renderers/admin/UploadRenderer.js
+++ b/components/renderers/admin/UploadRenderer.js
@@ -27,6 +27,7 @@ const UploadRenderer = ({
       }
       {...params}
       hideUpload={disabled}
+      showDeleteButton
     />
     {!isErrorDisabled && (
       <ErrorRenderer name={name} errors={errors} touched={touched} />
diff --git a/styles/klaudsolcms.scss b/styles/klaudsolcms.scss
index cd635cc4..26e10b9b 100644
--- a/styles/klaudsolcms.scss
+++ b/styles/klaudsolcms.scss
@@ -1133,11 +1133,15 @@ $onFocus: #323C4E;
 .new_entry_block_button_delete, .button_delete {
     background-color: maroon;
     color: white;
-
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px !important;
+    
     &.logo {
         width: 93px;
         border-radius: 3px;
-        height: 38.5px;
+        height: 42px;
         margin-left: 10px;
         display: flex;
 
@@ -1148,6 +1152,23 @@ $onFocus: #323C4E;
     }
 }
 
+.btn-upload {
+    border: none;
+    margin-left: 10px;
+
+    &-text {
+        margin: 0;
+        padding: 0;
+        &-container {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        flex-direction: row;
+        margin-left: -5px;
+        }
+    }
+}
+
 .block_bar {
     width: 100%;
     border-bottom: 1px solid lightgray;

From e20a34e989b3c43cb26b80c5785240ee1992c16f Mon Sep 17 00:00:00 2001
From: angeli-mercedes <101687552+angeli-mercedes@users.noreply.github.com>
Date: Mon, 4 Sep 2023 23:16:23 +0800
Subject: [PATCH 2/2] Additional update

---
 components/fields/FileField.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/fields/FileField.js b/components/fields/FileField.js
index ebf17e90..cbc03244 100644
--- a/components/fields/FileField.js
+++ b/components/fields/FileField.js
@@ -47,8 +47,8 @@ const FileField = (props) => {
   };
 
   const onRemoveImage = () => {
-    setFieldValue(field.name, null);
-    setStaticLink(null);
+    setFieldValue(field.name, "");
+    setStaticLink("");
   }
 
   return (