fixup! feat: add donate footer to updater dialog

Author: giacomocusinato

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

@@ -168,12 +168,9 @@ export class IDEUpdaterDialog extends ReactDialog<UpdateInfo | undefined> {
   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'
-    );
-    footer.appendChild(document.createTextNode(',\u00A0'));
+    const footerContent = document.createElement('div');
+    footerContent.classList.add('ide-updater-dialog--footer-content');
+    footer.appendChild(footerContent);
 
     const footerLink = document.createElement('a');
     footerLink.innerText = nls.localize(
@@ -184,16 +181,31 @@ export class IDEUpdaterDialog extends ReactDialog<UpdateInfo | undefined> {
     footerLink.onclick = () =>
       this.openExternal('https://www.arduino.cc/en/donate');
 
-    const footerLinkIcon = document.createElement('div');
+    const footerLinkIcon = document.createElement('span');
     footerLinkIcon.title = nls.localize(
       'arduino/ide-updater/donateLinkIconTitle',
-      'donate to support us'
+      'open donation page'
     );
     footerLinkIcon.classList.add('ide-updater-dialog--footer-link-icon');
-
-    footer.appendChild(footerLink);
     footerLink.appendChild(footerLinkIcon);
 
+    const placeholderKey = '%%link%%';
+    const footerText = nls.localize(
+      'arduino/ide-updater/donateText',
+      'Open source is love, {0}',
+      placeholderKey
+    );
+    const placeholder = footerText.indexOf(placeholderKey);
+    if (placeholder !== -1) {
+      const parts = footerText.split(placeholderKey);
+      footerContent.appendChild(document.createTextNode(parts[0]));
+      footerContent.appendChild(footerLink);
+      footerContent.appendChild(document.createTextNode(parts[1]));
+    } else {
+      footerContent.appendChild(document.createTextNode(footerText));
+      footerContent.appendChild(footerLink);
+    }
+
     this.controlPanel.insertAdjacentElement('afterend', footer);
   }
 

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

@@ -35,17 +35,17 @@
 }
 
 .ide-updater-dialog--footer {
-    display: flex;
-    justify-content: right;
-    align-items: center;
+    display: inline-block;
     margin-top: -16px;
     padding: 12px 0 24px 0;
     border-top: 1px solid var(--theia-editorWidget-border);
 }
+.ide-updater-dialog--footer-content {
+    float: right;
+}
 
 .ide-updater-dialog--footer-link {
-    display: flex;
-    align-items: center;
+    display: inline-block;
     color: var(--theia-textLink-foreground);
     font-weight: 500;
     line-height: 13px;
@@ -55,11 +55,14 @@
     cursor: pointer;
 }
 .ide-updater-dialog--footer-link-icon {
+    display: inline-block;
     -webkit-mask: url(../icons/link-open-icon.svg) center no-repeat;
     background-color: var(--theia-textLink-foreground);
-    height: 24px;
-    width: 24px;
+    height: 12px;
+    width: 12px;
     cursor: pointer;
+    transform: translateY(2px);
+    margin-left: 4px;
 }
 
 .ide-updater-dialog .changelog {

i18n/en.json

@@ -275,9 +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",
+      "donateLinkIconTitle": "open donation page",
       "donateLinkText": "donate to support us",
-      "donateText": "Open source is love",
+      "donateText": "Open source is love, {0}",
       "downloadButton": "Download",
       "downloadingNotice": "Downloading the latest version of the Arduino IDE.",
       "errorCheckingForUpdates": "Error while checking for Arduino IDE updates.\n{0}",