explorer/newFileWizard: update layout

- move switch under template title
- add description text
- style changes

src/components/hubPicker/hubPicker.scss

@@ -6,11 +6,13 @@
 .pb-hub-picker {
     display: flex;
     flex-wrap: wrap;
-    gap: bp.$pt-grid-size * 2;
+    column-gap: bp.$pt-grid-size * 2;
+    row-gap: bp.$pt-grid-size * 0.5;
 
     .#{bp.$ns}-radio {
         display: flex;
         align-items: center;
+        margin: unset;
 
         &.#{bp.$ns}-disabled img {
             opacity: 50%;

src/explorer/newFileWizard/NewFileWizard.tsx

@@ -1,7 +1,15 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2022 The Pybricks Authors
 
-import { Button, Classes, Dialog, FormGroup, Switch } from '@blueprintjs/core';
+import {
+    Button,
+    Classes,
+    ControlGroup,
+    Dialog,
+    FormGroup,
+    Switch,
+    Text,
+} from '@blueprintjs/core';
 import React, { useCallback, useRef, useState } from 'react';
 import { useId } from 'react-aria';
 import { useDispatch } from 'react-redux';
@@ -77,18 +85,27 @@ const NewFileWizard: React.VoidFunctionComponent = () => {
                         inputRef={fileNameInputRef}
                         onChange={setFileName}
                     />
-                    <Switch
-                        checked={useTemplate}
-                        onChange={(e) =>
-                            setuseTemplate((e.target as HTMLInputElement).checked)
-                        }
-                    >
-                        {i18n.translate('useTemplate.label')}
-                    </Switch>
-                    <FormGroup
-                        label={i18n.translate('template.label')}
-                        disabled={!useTemplate}
-                    >
+                    <FormGroup label={i18n.translate('template.label')}>
+                        <ControlGroup vertical>
+                            <Switch
+                                checked={useTemplate}
+                                onChange={(e) =>
+                                    setuseTemplate(
+                                        (e.target as HTMLInputElement).checked,
+                                    )
+                                }
+                            >
+                                {i18n.translate('useTemplate.label')}
+                            </Switch>
+                            <Text className={Classes.TEXT_MUTED}>
+                                {useTemplate
+                                    ? i18n.translate('useTemplate.description.checked')
+                                    : i18n.translate(
+                                          'useTemplate.description.unchecked',
+                                      )}
+                            </Text>
+                        </ControlGroup>
+                        <div className="pb-spacer" />
                         <HubPicker disabled={!useTemplate} />
                     </FormGroup>
                 </div>

src/explorer/newFileWizard/translations/en.json

@@ -4,7 +4,11 @@
         "label": "Template"
     },
     "useTemplate": {
-        "label": "Include template"
+        "label": "Use a template",
+        "description": {
+            "checked": "Create a new file for the selected hub.",
+            "unchecked": "Create a new empty file."
+        }
     },
     "action": {
         "create": "Create"

src/index.scss

@@ -83,6 +83,10 @@ body {
     }
 }
 
+.pb-spacer {
+    height: bp.$pt-grid-size * 2;
+}
+
 // global style tweaks
 
 .#{bp.$ns}-toast {