Skip to content

Commit

Permalink
add delete logo button in quick-dapp
Browse files Browse the repository at this point in the history
  • Loading branch information
drafish committed Oct 22, 2024
1 parent 4c5b86f commit 51814ce
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 13 deletions.
53 changes: 42 additions & 11 deletions apps/quick-dapp/src/components/ImageUpload/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}
Expand Down
2 changes: 1 addition & 1 deletion apps/remix-dapp/src/components/DappTop/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>}
Expand Down
4 changes: 3 additions & 1 deletion apps/remix-ide/src/app/tabs/locales/en/quickDapp.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit 51814ce

Please sign in to comment.