From 02e3711f44b23d842c030d1114a23cccac65666a Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Fri, 1 Nov 2024 14:03:20 +0800
Subject: [PATCH] update ImageUpload in quick-dapp

---
 .../src/components/ImageUpload/index.tsx      | 76 +++++++++----------
 .../src/app/tabs/locales/en/quickDapp.json    |  1 -
 2 files changed, 36 insertions(+), 41 deletions(-)

diff --git a/apps/quick-dapp/src/components/ImageUpload/index.tsx b/apps/quick-dapp/src/components/ImageUpload/index.tsx
index f4a2a20f29..09fbd9baf5 100644
--- a/apps/quick-dapp/src/components/ImageUpload/index.tsx
+++ b/apps/quick-dapp/src/components/ImageUpload/index.tsx
@@ -29,51 +29,47 @@ const ImageUpload = () => {
   }
 
   return (
-    <div className="col-3 pr-0">
+    <div className="col-3 pr-0 my-2 d-flex justify-content-center align-items-center">
       <input data-id="uploadLogo" className="d-none" type="file" accept="image/*" onChange={handleImageChange} id="upload-button" />
-      <label htmlFor="upload-button" className="cursor_pointer d-flex justify-content-center align-items-center position-relative" style={{ height: 170 }}>
-        {logo ? (
-          <>
-            <CustomTooltip
-              placement="right"
-              tooltipText={intl.formatMessage({ id: 'quickDapp.updateLogoTooltip' })}
-            >
-              <img src={preview} alt="preview" style={{ width: 120, height: 120 }} />
-            </CustomTooltip>
-            <CustomTooltip
-              placement="right"
-              tooltipText={intl.formatMessage({ id: 'quickDapp.deleteLogoTooltip' })}
-            >
-              <button
-                className="d-flex justify-content-center align-items-center position-absolute border-0 rounded-circle"
-                style={{
-                  top: 5,
-                  right: 5,
-                  width: 20,
-                  height: 20,
-                  backgroundColor: 'var(--gray-dark)'
-                }}
-                onClick={(event) => {
-                  event.preventDefault()
-                  dispatch({ type: 'SET_INSTANCE', payload: { logo: '' } })
-                }}
-              >
-                <i className="fas fa-times" style={{
-                  color: 'var(--text-bg-mark)',
-                  fontSize: 'large'
-                }}></i>
-              </button>
-            </CustomTooltip>
-          </>
-        ) : (
+      {logo ? (
+        <div className='position-absolute'>
+          <img src={preview} alt="preview" style={{ width: 95, height: 95 }} />
           <CustomTooltip
             placement="right"
-            tooltipText={intl.formatMessage({ id: 'quickDapp.addLogoTooltip' })}
+            tooltipText={intl.formatMessage({ id: 'quickDapp.deleteLogoTooltip' })}
           >
-            <i className="fas fa-upload" style={{ fontSize: 120 }}></i>
+            <span
+              className="btn position-absolute"
+              style={{
+                top: -30,
+                right: -30,
+              }}
+              onClick={(event) => {
+                event.preventDefault()
+                // @ts-expect-error
+                document.getElementById('upload-button').value = ''
+                dispatch({ type: 'SET_INSTANCE', payload: { logo: '' } })
+              }}
+            >
+              <i className="fas fa-times text-dark"></i>
+            </span>
           </CustomTooltip>
-        )}
-      </label>
+        </div>
+      ) : (
+        <div className="bg-light" style={{ height: 158.5, width: 158.5 }}>
+          <div style={{ padding: 15 }}>
+            <div className='mt-2' style={{ fontSize: 15, lineHeight: '18px' }}>A logo is optional and should be<br/> 95px ✖️ 95px.</div>
+            <label htmlFor="upload-button" className='text-center d-block'>
+              <CustomTooltip
+                placement="right"
+                tooltipText={intl.formatMessage({ id: 'quickDapp.addLogoTooltip' })}
+              >
+                <div className='mt-4 btn btn-primary btn-sm' style={{ height: 32, width: 100, lineHeight: '22px' }}>Select Logo</div>
+              </CustomTooltip>
+            </label>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
diff --git a/apps/remix-ide/src/app/tabs/locales/en/quickDapp.json b/apps/remix-ide/src/app/tabs/locales/en/quickDapp.json
index 78e32b6b34..a25ad3bd73 100644
--- a/apps/remix-ide/src/app/tabs/locales/en/quickDapp.json
+++ b/apps/remix-ide/src/app/tabs/locales/en/quickDapp.json
@@ -33,7 +33,6 @@
   "quickDapp.text5": "Click the link below to view your dapp",
   "quickDapp.text6": "Teardown successfully!",
   "quickDapp.addLogoTooltip": "Click here to add a logo",
-  "quickDapp.updateLogoTooltip": "Click here to update the logo",
   "quickDapp.deleteLogoTooltip": "Click here to delete the logo",
   "quickDapp.dappTitle": "Dapp Title",
   "quickDapp.dappInstructions": "Dapp Instructions",