From b85945ab1ddd23a55e031dc1d3c1572d2d419bba Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Thu, 15 Dec 2022 15:11:07 -0600
Subject: [PATCH] installPybricksDialog: fix heart icon

Use actual icon instead of unicode character. This way it renders the
same on all OSes.
---
 .../InstallPybricksDialog.tsx                 | 19 ++++++++++++++++---
 .../translations/en.json                      |  5 ++++-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/firmware/installPybricksDialog/InstallPybricksDialog.tsx b/src/firmware/installPybricksDialog/InstallPybricksDialog.tsx
index 590c2690..085aed4d 100644
--- a/src/firmware/installPybricksDialog/InstallPybricksDialog.tsx
+++ b/src/firmware/installPybricksDialog/InstallPybricksDialog.tsx
@@ -23,6 +23,7 @@ import { FirmwareMetadata, HubType } from '@pybricks/firmware';
 import { fileOpen } from 'browser-fs-access';
 import classNames from 'classnames';
 import React, { useCallback, useState } from 'react';
+import { VisuallyHidden } from 'react-aria';
 import { useDropzone } from 'react-dropzone';
 import { useDispatch } from 'react-redux';
 import { useLocalStorage } from 'usehooks-ts';
@@ -108,9 +109,21 @@ const UnsupportedHubs: React.VoidFunctionComponent = () => {
                 )}
             </p>
             <p>
-                {i18n.translate('selectHubPanel.notOnListButton.info.mindstorms.help', {
-                    icon: '♥',
-                })}
+                {i18n.translate(
+                    'selectHubPanel.notOnListButton.info.mindstorms.help.message',
+                    {
+                        sponsor: (
+                            <>
+                                <VisuallyHidden elementType="span">
+                                    {i18n.translate(
+                                        'selectHubPanel.notOnListButton.info.mindstorms.help.sponsor',
+                                    )}
+                                </VisuallyHidden>
+                                <Icon icon="heart" />
+                            </>
+                        ),
+                    },
+                )}
             </p>
             <ul>
                 <li>
diff --git a/src/firmware/installPybricksDialog/translations/en.json b/src/firmware/installPybricksDialog/translations/en.json
index f6800ecd..588ea2b5 100644
--- a/src/firmware/installPybricksDialog/translations/en.json
+++ b/src/firmware/installPybricksDialog/translations/en.json
@@ -9,7 +9,10 @@
                 "mindstorms": {
                     "title": "{legoMindstormsRegisteredTrademark} bricks",
                     "intro": "{appName} does not currently support previous generations of {legoMindstormsRegisteredTrademark}.",
-                    "help": "But with your help, it can! Click the {icon} icon in the top right to see how you can support us.",
+                    "help": {
+                        "message": "But with your help, it can! Click the {sponsor} button in the top right to see how you can support us.",
+                        "sponsor": "sponsor"
+                    },
                     "rcx": "RCX: Might work in streaming mode.",
                     "nxt": "NXT: We have tested this. It could work!",
                     "ev3": "EV3: Supported using Visual Studio Code."