add delete logo button in quick-dapp

apps/quick-dapp/src/components/ImageUpload/index.tsx

@@ -31,18 +31,49 @@ const ImageUpload = () => {
   return (
     <div className="col-3 pr-0">
       <input data-id="uploadLogo" className="d-none" type="file" accept="image/*" onChange={handleImageChange} id="upload-button" />
-      <CustomTooltip
-        placement="right"
-        tooltipText={intl.formatMessage({ id: 'quickDapp.uploadLogoTooltip' })}
-      >
-        <label htmlFor="upload-button" className="cursor_pointer d-flex justify-content-center align-items-center position-relative" style={{ height: 170 }}>
-          {logo ? (
-            <img src={preview} alt="preview" style={{ width: 120, height: 120 }} />
-          ) : (
+      <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>
+          </>
+        ) : (
+          <CustomTooltip
+            placement="right"
+            tooltipText={intl.formatMessage({ id: 'quickDapp.addLogoTooltip' })}
+          >
             <i className="fas fa-upload" style={{ fontSize: 120 }}></i>
-          )}
-        </label>
-      </CustomTooltip>
+          </CustomTooltip>
+        )}
+      </label>
     </div>
   )
 }

apps/remix-dapp/src/components/DappTop/index.tsx

@@ -30,7 +30,7 @@ const DappTop: React.FC = () => {
   const shareTitle = encodeURIComponent('Hello everyone, this is my dapp!');
 
   return (
-    <div className={`${instance.logo ? 'col-10' : 'col-12'} p-3 bg-light w-auto d-flex justify-content-between`}>
+    <div className={`${instance.showLogo ? 'col-10' : 'col-12'} p-3 bg-light w-auto d-flex justify-content-between`}>
       <div>
         {title && <h1 data-id="dappTitle">{title}</h1>}
         {details && <span data-id="dappInstructions">{details}</span>}

apps/remix-ide/src/app/tabs/locales/en/quickDapp.json

@@ -32,7 +32,9 @@
   "quickDapp.text4": "Deployed successfully!",
   "quickDapp.text5": "Click the link below to view your dapp",
   "quickDapp.text6": "Teardown successfully!",
-  "quickDapp.uploadLogoTooltip": "Click here to change logo",
+  "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",
   "quickDapp.functionTitle": "Title of function",