diff --git a/src/settings/SettingsDrawer.tsx b/src/settings/SettingsDrawer.tsx index d46254b6..a2452299 100644 --- a/src/settings/SettingsDrawer.tsx +++ b/src/settings/SettingsDrawer.tsx @@ -193,38 +193,53 @@ class SettingsDrawer extends React.PureComponent { /> - + boundary="window" + position={Position.LEFT} + targetTagName="div" + hoverOpenDelay={tooltipDelay} + > + + + e.preventDefault()} + className="pb-hub-name-input" + intent={ + isHubNameValid ? Intent.NONE : Intent.DANGER + } + placeholder="Pybricks Hub" + rightElement={ + isHubNameValid ? undefined : ( + + + + ) + } + /> diff --git a/src/settings/i18n.en.json b/src/settings/i18n.en.json index d70bda6f..66f0b25b 100644 --- a/src/settings/i18n.en.json +++ b/src/settings/i18n.en.json @@ -23,6 +23,7 @@ }, "hub-name": { "label": "Hub name", + "tooltip": "Hub name to use when flashing the firmware.", "error": { "tooltip": "The name is too long." } diff --git a/src/settings/i18n.ts b/src/settings/i18n.ts index 3644b2e3..69902f61 100644 --- a/src/settings/i18n.ts +++ b/src/settings/i18n.ts @@ -15,6 +15,7 @@ export enum SettingsStringId { FirmwareCurrentProgramLabel = 'settings.firmware.flash-current-program.label', FirmwareCurrentProgramTooltip = 'settings.firmware.flash-current-program.tooltip', FirmwareHubNameLabel = 'settings.firmware.hub-name.label', + FirmwareHubNameTooltip = 'settings.firmware.hub-name.tooltip', FirmwareHubNameErrorTooltip = 'settings.firmware.hub-name.error.tooltip', HelpTitle = 'settings.help.title', HelpProjectsLabel = 'settings.help.projects.label', diff --git a/src/settings/settings.scss b/src/settings/settings.scss index 25b015e3..fa4d7dba 100644 --- a/src/settings/settings.scss +++ b/src/settings/settings.scss @@ -7,4 +7,5 @@ .pb-hub-name-input .#{$ns}-input { width: 200px; + margin-left: 8px; }