feat: add donate footer to updater dialog

Author: giacomocusinato

arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx

@@ -165,6 +165,37 @@ export class IDEUpdaterDialog extends ReactDialog<UpdateInfo | undefined> {
     goToDownloadPageButton.focus();
   }
 
+  private appendDonateFooter() {
+    const footer = document.createElement('div');
+    footer.classList.add('ide-updater-dialog--footer');
+
+    footer.innerText = nls.localize(
+      'arduino/ide-updater/donateText',
+      'Open source is love, '
+    );
+
+    const footerLink = document.createElement('a');
+    footerLink.innerText = nls.localize(
+      'arduino/ide-updater/donateLinkText',
+      'donate to support us'
+    );
+    footerLink.classList.add('ide-updater-dialog--footer-link');
+    footerLink.onclick = () =>
+      this.openExternal('https://www.arduino.cc/en/donate');
+
+    const footerLinkIcon = document.createElement('div');
+    footerLinkIcon.title = nls.localize(
+      'arduino/ide-updater/donateLinkIconTitle',
+      'donate to support us'
+    );
+    footerLinkIcon.classList.add('ide-updater-dialog--footer-link-icon');
+
+    footer.appendChild(footerLink);
+    footerLink.appendChild(footerLinkIcon);
+
+    this.controlPanel.insertAdjacentElement('afterend', footer);
+  }
+
   private openDownloadPage(): void {
     this.openExternal('https://www.arduino.cc/en/software');
     this.close();
@@ -187,6 +218,7 @@ export class IDEUpdaterDialog extends ReactDialog<UpdateInfo | undefined> {
       downloadStarted: true,
     });
     this.clearButtons();
+    this.appendDonateFooter();
     this.updater.downloadUpdate();
   }
 

arduino-ide-extension/src/browser/icons/link-open-icon.svg

@@ -34,6 +34,34 @@
     min-width: 0;
 }
 
+.ide-updater-dialog--footer {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+    margin-top: -16px;
+    padding: 12px 0 24px 0;
+    border-top: 1px solid var(--theia-editorWidget-border);
+}
+
+.ide-updater-dialog--footer-link {
+    display: flex;
+    align-items: center;
+    color: var(--theia-textLink-foreground);
+    font-weight: 500;
+    line-height: 13px;
+}
+.ide-updater-dialog--footer-link:hover {
+    color: var(--theia-textLink-foreground);
+    cursor: pointer;
+}
+.ide-updater-dialog--footer-link-icon {
+    -webkit-mask: url(../icons/link-open-icon.svg) center no-repeat;
+    background-color: var(--theia-textLink-foreground);
+    height: 24px;
+    width: 24px;
+    cursor: pointer;
+}
+
 .ide-updater-dialog .changelog {
     color: var(--theia-editor-foreground);
     background-color: var(--theia-editor-background);

arduino-ide-extension/src/browser/style/ide-updater-dialog.css

@@ -275,6 +275,9 @@
       "checkForUpdates": "Check for Arduino IDE Updates",
       "closeAndInstallButton": "Close and Install",
       "closeToInstallNotice": "Close the software and install the update on your machine.",
+      "donateLinkIconTitle": "donate to support us",
+      "donateLinkText": "donate to support us",
+      "donateText": "Open source is love, ",
       "downloadButton": "Download",
       "downloadingNotice": "Downloading the latest version of the Arduino IDE.",
       "errorCheckingForUpdates": "Error while checking for Arduino IDE updates.\n{0}",