style: make use of more blueprint styles

https://blueprintjs.com/docs/#core/typography

Also fix wrapping license text while we are touching this.

Author: dlech

src/alerts/UnexpectedErrorAlert.tsx

@@ -2,7 +2,14 @@
 // Copyright (c) 2022 The Pybricks Authors
 
 import './UnexpectedErrorAlert.scss';
-import { AnchorButton, Button, ButtonGroup, Collapse, Intent } from '@blueprintjs/core';
+import {
+    AnchorButton,
+    Button,
+    ButtonGroup,
+    Collapse,
+    Intent,
+    Pre,
+} from '@blueprintjs/core';
 import React, { useState } from 'react';
 import { useId } from 'react-aria';
 import { CreateToast } from '../i18nToaster';
@@ -33,7 +40,7 @@ const UnexpectedErrorAlert: React.VoidFunctionComponent<UnexpectedErrorAlertProp
                 <span id={labelId}>{i18n.translate('technicalInfo')}</span>
             </span>
             <Collapse isOpen={isExpanded}>
-                <pre className="pb-alerts-stack-trace">{error.stack}</pre>
+                <Pre className="pb-alerts-stack-trace">{error.stack}</Pre>
             </Collapse>
             <div>
                 <ButtonGroup minimal={true} fill={true}>

src/ble/alerts/NoWebBluetooth.tsx

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2022 The Pybricks Authors
 
-import { Button, Intent } from '@blueprintjs/core';
+import { Button, Code, Intent } from '@blueprintjs/core';
 import React from 'react';
 import { CreateToast } from '../../i18nToaster';
 import { isIOS, isLinux } from '../../utils/os';
@@ -19,9 +19,9 @@ const NoWebBluetooth: React.VoidFunctionComponent = () => {
                 <>
                     <p>{i18n.translate('noWebBluetooth.linux')}</p>
                     <p>
-                        <code>
+                        <Code>
                             chrome://flags/#enable-experimental-web-platform-features
-                        </code>
+                        </Code>
                         <Button
                             icon="duplicate"
                             small={true}

src/explorer/fileNameFormGroup/FileNameFormGroup.tsx

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2022 The Pybricks Authors
 
-import { Classes, FormGroup, InputGroup, Intent, Tag } from '@blueprintjs/core';
+import { Classes, Code, FormGroup, InputGroup, Intent, Tag } from '@blueprintjs/core';
 import type { AriaButtonProps } from '@react-types/button';
 import React, { useCallback, useRef } from 'react';
 import { useButton } from 'react-aria';
@@ -108,19 +108,19 @@ const FileNameHelpText: React.VoidFunctionComponent<FileNameHelpTextProps> = ({
             return (
                 <>
                     {i18n.translate('helpText.hasInvalidFirstCharacter', {
-                        letters: <code className={Classes.CODE}>a…z</code>,
-                        underscore: <code className={Classes.CODE}>_</code>,
+                        letters: <Code className={Classes.CODE}>a…z</Code>,
+                        underscore: <Code className={Classes.CODE}>_</Code>,
                     })}
                 </>
             );
         case FileNameValidationResult.HasInvalidCharacters:
             return (
                 <>
                     {i18n.translate('helpText.hasInvalidCharacters', {
-                        letters: <code className={Classes.CODE}>a…z</code>,
-                        numbers: <code className={Classes.CODE}>0…9</code>,
-                        dash: <code className={Classes.CODE}>-</code>,
-                        underscore: <code className={Classes.CODE}>_</code>,
+                        letters: <Code className={Classes.CODE}>a…z</Code>,
+                        numbers: <Code className={Classes.CODE}>0…9</Code>,
+                        dash: <Code className={Classes.CODE}>-</Code>,
+                        underscore: <Code className={Classes.CODE}>_</Code>,
                     })}{' '}
                     <FixItButton onPress={handleHasInvalidCharacters} />
                 </>

src/firmware/installPybricksDialog/InstallPybricksDialog.tsx

@@ -7,6 +7,7 @@ import {
     Callout,
     Checkbox,
     Classes,
+    Code,
     ControlGroup,
     DialogStep,
     FormGroup,
@@ -17,6 +18,7 @@ import {
     MenuItem,
     MultistepDialog,
     NonIdealState,
+    Pre,
     Spinner,
     Switch,
 } from '@blueprintjs/core';
@@ -69,12 +71,12 @@ const SelectHubPanel: React.VoidFunctionComponent = () => {
                 popoverClassName={Classes2.POPOVER2_CONTENT_SIZING}
                 placement="right-end"
                 content={
-                    <div>
-                        <h3>
+                    <div className={Classes.RUNNING_TEXT}>
+                        <h4>
                             {i18n.translate(
                                 'selectHubPanel.notOnListButton.info.mindstorms.title',
                             )}
-                        </h3>
+                        </h4>
                         <ul>
                             <li>
                                 {i18n.translate(
@@ -92,11 +94,11 @@ const SelectHubPanel: React.VoidFunctionComponent = () => {
                                 )}
                             </li>
                         </ul>
-                        <h3>
+                        <h4>
                             {i18n.translate(
                                 'selectHubPanel.notOnListButton.info.poweredUp.title',
                             )}
-                        </h3>
+                        </h4>
                         <ul>
                             <li>
                                 {i18n.translate(
@@ -156,7 +158,7 @@ const AcceptLicensePanel: React.VoidFunctionComponent<AcceptLicensePanelProps> =
         <div className={dialogBody}>
             <div className="pb-firmware-installPybricksDialog-license-text">
                 {data ? (
-                    <pre>{data.licenseText}</pre>
+                    <Pre>{data.licenseText}</Pre>
                 ) : (
                     <NonIdealState
                         icon={error ? 'error' : <Spinner />}
@@ -247,7 +249,7 @@ const ConfigureOptionsPanel: React.VoidFunctionComponent<SelectOptionsPanelProps
                         <Switch
                             labelElement={i18n.translate(
                                 'optionsPanel.customMain.include.label',
-                                { main: <code>main.py</code> },
+                                { main: <Code>main.py</Code> },
                             )}
                             checked={includeProgram}
                             onChange={(e) =>

src/firmware/installPybricksDialog/installPybricksDialog.scss

@@ -23,6 +23,12 @@
             & .#{bp.$ns}-non-ideal-state {
                 min-height: bp.$pt-grid-size * 35;
             }
+
+            & pre {
+                white-space: pre-wrap;
+                word-break: keep-all;
+                margin: 0;
+            }
         }
 
         &-checkbox {

src/index.scss

@@ -136,6 +136,10 @@ a.#{bp.$ns}-button {
     min-width: math.div(bp.$pt-grid-size, 2);
 }
 
+.#{bp.$ns}-running-text h4:first-child {
+    margin-top: 0;
+}
+
 // make scrollbars fit our style
 ::-webkit-scrollbar {
     width: 16px;

src/licenses/LicenseDialog.tsx

@@ -10,6 +10,7 @@ import {
     Classes,
     Dialog,
     NonIdealState,
+    Pre,
     Spinner,
     Text,
 } from '@blueprintjs/core';
@@ -190,7 +191,7 @@ const LicenseInfoPanel = React.forwardRef<HTMLDivElement, LicenseInfoPanelProps>
                         {i18n.translate('help.selectPackage')}
                     </NonIdealState>
                 ) : (
-                    <div>
+                    <>
                         <Card>
                             <p>
                                 <strong>{i18n.translate('packageLabel')}</strong>{' '}
@@ -211,9 +212,9 @@ const LicenseInfoPanel = React.forwardRef<HTMLDivElement, LicenseInfoPanelProps>
                             </p>
                         </Card>
                         <div className="pb-license-text">
-                            <pre>{licenseInfo.licenseText}</pre>
+                            <Pre>{licenseInfo.licenseText}</Pre>
                         </div>
-                    </div>
+                    </>
                 )}
             </div>
         );

src/licenses/license.scss

@@ -50,9 +50,19 @@
 .pb-license-info {
     width: 80%;
     padding: 0px 16px;
-    overflow: auto;
+
+    display: flex;
+    flex-direction: column;
+    gap: bp.$pt-grid-size;
 }
 
 .pb-license-text {
-    padding: 0px 16px;
+    overflow: auto;
+    min-height: 0;
+
+    & pre {
+        white-space: pre-wrap;
+        word-break: keep-all;
+        margin: 0;
+    }
 }