diff --git a/src/firmware/installPybricksDialog/InstallPybricksDialog.tsx b/src/firmware/installPybricksDialog/InstallPybricksDialog.tsx index d707c7e0..dfaa6967 100644 --- a/src/firmware/installPybricksDialog/InstallPybricksDialog.tsx +++ b/src/firmware/installPybricksDialog/InstallPybricksDialog.tsx @@ -154,28 +154,27 @@ const AcceptLicensePanel: React.VoidFunctionComponent = return (
-
-
- {data ? ( -
{data.licenseText}
- ) : ( - } - description={ - error - ? i18n.translate('licensePanel.licenseText.error') - : undefined - } - /> - )} -
- onLicenseAcceptedChanged(e.currentTarget.checked)} - disabled={!data} - /> +
+ {data ? ( +
{data.licenseText}
+ ) : ( + } + description={ + error + ? i18n.translate('licensePanel.licenseText.error') + : undefined + } + /> + )}
+ onLicenseAcceptedChanged(e.currentTarget.checked)} + disabled={!data} + />
); }; @@ -349,82 +348,84 @@ const BootloaderModePanel: React.VoidFunctionComponent return (
{hubHasUSB(hubType) && isLinux() && ( -

- - {i18n.translate('bootloaderPanel.warning.linux')}{' '} - - {i18n.translate('bootloaderPanel.warning.learnMore')} - - - -

+ + {i18n.translate('bootloaderPanel.warning.linux')}{' '} + + {i18n.translate('bootloaderPanel.warning.learnMore')} + + + )} {hubHasUSB(hubType) && isWindows() && ( -

- - {i18n.translate('bootloaderPanel.warning.windows')}{' '} - - {i18n.translate('bootloaderPanel.warning.learnMore')} - - - -

+ + {i18n.translate('bootloaderPanel.warning.windows')}{' '} + + {i18n.translate('bootloaderPanel.warning.learnMore')} + + + )} -

{i18n.translate('bootloaderPanel.instruction1')}

-
    - {hubHasUSB(hubType) && ( -
  1. {i18n.translate('bootloaderPanel.step.disconnectUsb')}
  2. - )} - -
  3. {i18n.translate('bootloaderPanel.step.powerOff')}
  4. - - {/* City hub has power issues and requires disconnecting motors/sensors */} - {hubType === Hub.City && ( -
  5. {i18n.translate('bootloaderPanel.step.disconnectIo')}
  6. - )} - -
  7. {i18n.translate('bootloaderPanel.step.holdButton', { button })}
  8. - - {hubHasUSB(hubType) && ( -
  9. {i18n.translate('bootloaderPanel.step.connectUsb')}
  10. - )} - -
  11. - {i18n.translate('bootloaderPanel.step.waitForLight', { - button, - light, - lightPattern, - })} -
  12. - -
  13. - {i18n.translate( - /* hubs with USB will keep the power on, but other hubs won't */ - hubHasUSB(hubType) - ? 'bootloaderPanel.step.releaseButton' - : 'bootloaderPanel.step.keepHolding', - { - button, - }, +
    +

    {i18n.translate('bootloaderPanel.instruction1')}

    +
      + {hubHasUSB(hubType) && ( +
    1. {i18n.translate('bootloaderPanel.step.disconnectUsb')}
    2. )} - -
    -

    - {i18n.translate('bootloaderPanel.instruction2', { - flashFirmware: ( - {i18n.translate('flashFirmwareButton.label')} - ), - })} -

    + +
  14. {i18n.translate('bootloaderPanel.step.powerOff')}
  15. + + {/* City hub has power issues and requires disconnecting motors/sensors */} + {hubType === Hub.City && ( +
  16. {i18n.translate('bootloaderPanel.step.disconnectIo')}
  17. + )} + +
  18. + {i18n.translate('bootloaderPanel.step.holdButton', { button })} +
  19. + + {hubHasUSB(hubType) && ( +
  20. {i18n.translate('bootloaderPanel.step.connectUsb')}
  21. + )} + +
  22. + {i18n.translate('bootloaderPanel.step.waitForLight', { + button, + light, + lightPattern, + })} +
  23. + +
  24. + {i18n.translate( + /* hubs with USB will keep the power on, but other hubs won't */ + hubHasUSB(hubType) + ? 'bootloaderPanel.step.releaseButton' + : 'bootloaderPanel.step.keepHolding', + { + button, + }, + )} +
  25. +
+

+ {i18n.translate('bootloaderPanel.instruction2', { + flashFirmware: ( + + {i18n.translate('flashFirmwareButton.label')} + + ), + })} +

+
); }; diff --git a/src/firmware/installPybricksDialog/installPybricksDialog.scss b/src/firmware/installPybricksDialog/installPybricksDialog.scss index 7b0ebf53..4a06192d 100644 --- a/src/firmware/installPybricksDialog/installPybricksDialog.scss +++ b/src/firmware/installPybricksDialog/installPybricksDialog.scss @@ -5,24 +5,28 @@ .pb-firmware-installPybricksDialog { &-body { - min-height: bp.$pt-grid-size * 35; + min-height: bp.$pt-grid-size * 40; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: bp.$pt-grid-size; } &-license { - display: flex; - flex-direction: column; - gap: bp.$pt-grid-size; - min-height: inherit; - &-text { flex-grow: 1; + width: 100%; min-height: 0; - max-height: bp.$pt-grid-size * 30; + max-height: bp.$pt-grid-size * 35; overflow: auto; & .#{bp.$ns}-non-ideal-state { - min-height: bp.$pt-grid-size * 30; + min-height: bp.$pt-grid-size * 35; } } + + &-checkbox { + margin-top: auto; + } } }