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,15 +275,18 @@
       "checkForUpdates": "Check for Arduino IDE Updates",
       "closeAndInstallButton": "Close and Install",
       "closeToInstallNotice": "Close the software and install the update on your machine.",
+      "donateLink": "donate to support us",
+      "donateLinkIconTitle": "open download page",
+      "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}",
       "goToDownloadButton": "Go To Download",
       "goToDownloadPage": "An update for the Arduino IDE is available, but we're not able to download and install it automatically. Please go to the download page and download the latest version from there.",
       "ideUpdaterDialog": "Software Update",
       "newVersionAvailable": "A new version of Arduino IDE ({0}) is available for download.",
-      "noUpdatesAvailable": "There are no recent updates available for the Arduino IDE",
       "notNowButton": "Not now",
+      "noUpdatesAvailable": "There are no recent updates available for the Arduino IDE",
       "skipVersionButton": "Skip Version",
       "updateAvailable": "Update Available",
       "versionDownloaded": "Arduino IDE {0} has been downloaded."