diff --git a/src/firmware/bootloaderInstructions/BootloaderInstructions.tsx b/src/firmware/bootloaderInstructions/BootloaderInstructions.tsx index 866b2051..157f173b 100644 --- a/src/firmware/bootloaderInstructions/BootloaderInstructions.tsx +++ b/src/firmware/bootloaderInstructions/BootloaderInstructions.tsx @@ -94,6 +94,13 @@ const recoveryMetadataFileMap: ReadonlyMap = new Map([ [Hub.Prime, primeHubVtt], [Hub.Technic, technicHubRecoveryVtt], ]); + +function countValidChildren(children: React.ReactNode) { + return React.Children.toArray(children).filter((child) => + React.isValidElement(child), + ).length; +} + /** * Provides customized instructions on how to enter bootloader mode based * on the hub type. @@ -150,40 +157,9 @@ const BootloaderInstructions: React.VoidFunctionComponent< }; }, [setActiveStep]); - return ( - <> - - -
- -

- {i18n.translate('instructionGroup.prepare.title')} -

-
    + const prepareSteps = useMemo( + () => ( + <>
  1. {i18n.translate( hubHasUSB(hubType) @@ -193,22 +169,21 @@ const BootloaderInstructions: React.VoidFunctionComponent<
  2. {i18n.translate('instructionGroup.prepare.turnOff')}
  3. {/* For non-usb recovery, show step about official app */} - {recovery && !hubHasUSB(hubType) ? ( + {recovery && !hubHasUSB(hubType) && (
  4. {i18n.translate('instructionGroup.prepare.app', { lego: legoRegisteredTrademark, })}
  5. - ) : ( - <> )} -
-

- - {i18n.translate('instructionGroup.bootloaderMode.title')} - -

-
    + + ), + [i18n, recovery, hubType], + ); + + const bootloaderModeSteps = useMemo( + () => ( + <> {/* City hub has power issues and requires disconnecting motors/sensors */} {hubType === Hub.City && (
  1. )} + + ), + [recovery, activeStep, i18n, button, hubType, light, lightPattern], + ); + + return ( + <> + + +
    + +

    + {i18n.translate('instructionGroup.prepare.title')} +

    +
      {prepareSteps}
    +

    + + {i18n.translate('instructionGroup.bootloaderMode.title')} + +

    +
      + {bootloaderModeSteps}
    - {hubHasUSB(hubType) || (!hubHasUSB(hubType) && !recovery) ? ( + {(hubHasUSB(hubType) || (!hubHasUSB(hubType) && !recovery)) && ( <>

    {i18n.translate('instructionGroup.connect.title')}

    -
      +
      1. {i18n.translate( 'instructionGroup.connect.clickConnectAndFlash', @@ -336,8 +363,6 @@ const BootloaderInstructions: React.VoidFunctionComponent<
      - ) : ( - <> )} {hubHasUSB(hubType) && isLinux() && ( diff --git a/src/firmware/bootloaderInstructions/bootloaderInstructions.scss b/src/firmware/bootloaderInstructions/bootloaderInstructions.scss index c7ad83d3..1bfe0556 100644 --- a/src/firmware/bootloaderInstructions/bootloaderInstructions.scss +++ b/src/firmware/bootloaderInstructions/bootloaderInstructions.scss @@ -11,19 +11,3 @@ display: block; margin: 0 auto; } - -// Only first ol should reset. -ol.firstList { - counter-reset: listCounter 0; -} - -// Increment on each li, no matter which list. -ol.firstList li, -ol.continuedList li { - counter-increment: listCounter; - - // Use counter value to set marker. - &::marker { - content: counter(listCounter, decimal) '. '; - } -}