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/installPybricksDialog/InstallPybricksDialog.tsx

@@ -400,15 +400,11 @@ const BootloaderModePanel: React.VoidFunctionComponent<BootloaderModePanelProps>
     const i18n = useI18n();
 
     return (
-        <div className={dialogBody}>
-            <BootloaderInstructions hubType={hubType} />
-            <p>
-                {i18n.translate('bootloaderPanel.instruction2', {
-                    flashFirmware: (
-                        <strong>{i18n.translate('flashFirmwareButton.label')}</strong>
-                    ),
-                })}
-            </p>
+        <div className={classNames(Classes.DIALOG_BODY, Classes.RUNNING_TEXT)}>
+            <BootloaderInstructions
+                hubType={hubType}
+                flashButtonText={i18n.translate('flashFirmwareButton.label')}
+            />
         </div>
     );
 };

src/firmware/installPybricksDialog/translations/en.json

@@ -53,8 +53,7 @@
         }
     },
     "bootloaderPanel": {
-        "title": "Enter update mode",
-        "instruction2": "Then click the {flashFirmware} button below to connect to the hub and flash the firmware."
+        "title": "Install"
     },
     "backButton": {
         "label": "Back"
@@ -63,6 +62,6 @@
         "label": "Next"
     },
     "flashFirmwareButton": {
-        "label": "Connect and flash"
+        "label": "Install"
     }
 }