firmware/bootloaderInstructions: Refactor.

- Use steps for the connection procedure
- Use categories (To do: consider making numbering consecutive)
- Show hub bootloader device name explicitly
- List official app to use for recovery (make V2/V3 explicit)
- Copy edit

Also fix the layout (class) of the installation panel to make it consistent with the style of the recovery panel.

src/firmware/restoreOfficialDialog/RestoreOfficialDialog.test.tsx

@@ -52,7 +52,7 @@ describe('flashing', () => {
 
             await user.click(dialog.getByRole('radio', { name: hubName }));
             await user.click(dialog.getByRole('button', { name: 'Next' }));
-            await user.click(dialog.getByRole('button', { name: 'Flash' }));
+            await user.click(dialog.getByRole('button', { name: 'Restore' }));
 
             expect(dispatch).toHaveBeenCalledWith(firmwareRestoreOfficialDfu(hub));
         },

src/firmware/restoreOfficialDialog/RestoreOfficialDialog.tsx

@@ -11,8 +11,12 @@ import {
 import classNames from 'classnames';
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { legoRegisteredTrademark } from '../../app/constants';
-import { hubHasUSB } from '../../components/hubPicker';
+import {
+    legoEducationSpikeRegisteredTrademark,
+    legoMindstormsRegisteredTrademark,
+    legoRegisteredTrademark,
+} from '../../app/constants';
+import { Hub, hubHasUSB } from '../../components/hubPicker';
 import { HubPicker } from '../../components/hubPicker/HubPicker';
 import { useHubPickerSelectedHub } from '../../components/hubPicker/hooks';
 import { useSelector } from '../../reducers';
@@ -47,18 +51,25 @@ const RestoreFirmwarePanel: React.VoidFunctionComponent = () => {
 
     return (
         <div className={classNames(Classes.DIALOG_BODY, Classes.RUNNING_TEXT)}>
-            <BootloaderInstructions hubType={hubType} recovery />
+            <BootloaderInstructions
+                hubType={hubType}
+                recovery
+                flashButtonText={i18n.translate('restoreFirmwarePanel.flashButton')}
+            />
             {hubHasUSB(hubType) ? (
                 <>
                     <p>
-                        {i18n.translate('restoreFirmwarePanel.instruction2.dfu', {
-                            flashFirmware: (
-                                <strong>
-                                    {i18n.translate('restoreFirmwarePanel.flashButton')}
-                                </strong>
-                            ),
-                            lego: legoRegisteredTrademark,
-                        })}
+                        {i18n.translate('restoreFirmwarePanel.instruction2.updateApp', {
+                            app:
+                                hubType === Hub.Inventor
+                                    ? legoMindstormsRegisteredTrademark
+                                    : legoEducationSpikeRegisteredTrademark,
+                        })}{' '}
+                        {hubType !== Hub.Inventor
+                            ? i18n.translate(
+                                  'restoreFirmwarePanel.instruction2.updateAppVersion',
+                              )
+                            : ''}
                     </p>
                     <div className="pb-spacer" />
                     <Button

src/firmware/restoreOfficialDialog/translations/en.json

@@ -14,8 +14,9 @@
             "ble": {
                 "message": "When the progress bar is done, the hub will reboot and the app will connect. The official firmware has been restored."
             },
-            "dfu": "Then click the {flashFirmware} button below to connect to the hub and flash the firmware. After flashing is complete, connect the hub to one of the official {lego} apps and use it to update to the latest official firmware."
+            "updateApp": "Once the recovery is complete, use the {app} app to get the latest official firmware.",
+            "updateAppVersion": "You can use version 2 (legacy) or version 3 to do so."
         },
-        "flashButton": "Flash"
+        "flashButton": "Restore"
     }
 }