update to blueprintjs 5.x

src/ble/alerts/BluetoothNotAvailable.tsx

@@ -2,6 +2,7 @@
 // Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
+import { Error } from '@blueprintjs/icons';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
@@ -19,7 +20,7 @@ const BluetoothNotAvailable: React.FunctionComponent = () => {
 
 export const bluetoothNotAvailable: CreateToast = (onAction) => ({
     message: <BluetoothNotAvailable />,
-    icon: 'error',
+    icon: <Error />,
     intent: Intent.DANGER,
     onDismiss: () => onAction('dismiss'),
 });

src/ble/alerts/Disconnected.tsx

@@ -2,6 +2,7 @@
 // Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
+import { Error } from '@blueprintjs/icons';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
@@ -13,7 +14,7 @@ const Disconnected: React.FunctionComponent = () => {
 
 export const disconnected: CreateToast = (onAction) => ({
     message: <Disconnected />,
-    icon: 'error',
+    icon: <Error />,
     intent: Intent.DANGER,
     onDismiss: () => onAction('dismiss'),
 });

src/ble/alerts/MissingService.tsx

@@ -2,6 +2,7 @@
 // Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
+import { Error } from '@blueprintjs/icons';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
@@ -27,7 +28,7 @@ const MissingService: React.FunctionComponent<MissingServiceProps> = ({
 
 export const missingService: CreateToast<MissingServiceProps> = (onAction, props) => ({
     message: <MissingService {...props} />,
-    icon: 'error',
+    icon: <Error />,
     intent: Intent.DANGER,
     onDismiss: () => onAction('dismiss'),
 });

src/ble/alerts/NewPybricksProfile.tsx

@@ -2,6 +2,7 @@
 // Copyright (c) 2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
+import { WarningSign } from '@blueprintjs/icons';
 import React from 'react';
 import { appName } from '../../app/constants';
 import type { CreateToast } from '../../toasterTypes';
@@ -43,7 +44,7 @@ export const newPybricksProfile: CreateToast<NewPybricksProfileProps> = (
     props,
 ) => ({
     message: <NewPybricksProfile {...props} />,
-    icon: 'warning-sign',
+    icon: <WarningSign />,
     intent: Intent.WARNING,
     timeout: 15000, // long message, need more time to read
     onDismiss: () => onAction('dismiss'),

src/ble/alerts/NoGatt.tsx

@@ -2,6 +2,7 @@
 // Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
+import { Error } from '@blueprintjs/icons';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
@@ -13,7 +14,7 @@ const NoGatt: React.FunctionComponent = () => {
 
 export const noGatt: CreateToast = (onAction) => ({
     message: <NoGatt />,
-    icon: 'error',
+    icon: <Error />,
     intent: Intent.DANGER,
     onDismiss: () => onAction('dismiss'),
 });

src/ble/alerts/NoHub.tsx

@@ -3,6 +3,7 @@
 
 import './index.scss';
 import { AnchorButton, Button, Intent } from '@blueprintjs/core';
+import { Download, Help, InfoSign } from '@blueprintjs/icons';
 import React from 'react';
 import { pybricksBluetoothTroubleshootingUrl } from '../../app/constants';
 import ExternalLinkIcon from '../../components/ExternalLinkIcon';
@@ -21,11 +22,11 @@ const NoHub: React.FunctionComponent<NoHubProps> = ({ onFlashFirmware }) => {
             <p>{i18n.translate('noHub.message')}</p>
             <p>{i18n.translate('noHub.suggestion')}</p>
             <div className="pb-ble-alerts-buttons">
-                <Button icon="download" onClick={onFlashFirmware}>
+                <Button icon={<Download />} onClick={onFlashFirmware}>
                     {i18n.translate('noHub.flashFirmwareButton')}
                 </Button>
                 <AnchorButton
-                    icon="help"
+                    icon={<Help />}
                     href={pybricksBluetoothTroubleshootingUrl}
                     target="_blank"
                     rel="noopener"
@@ -40,7 +41,7 @@ const NoHub: React.FunctionComponent<NoHubProps> = ({ onFlashFirmware }) => {
 
 export const noHub: CreateToast<never, 'dismiss' | 'flashFirmware'> = (onAction) => ({
     message: <NoHub onFlashFirmware={() => onAction('flashFirmware')} />,
-    icon: 'info-sign',
+    icon: <InfoSign />,
     intent: Intent.PRIMARY,
     timeout: 15000,
     onDismiss: () => onAction('dismiss'),

src/ble/alerts/NoWebBluetooth.tsx

@@ -2,6 +2,7 @@
 // Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Button, Code, Intent } from '@blueprintjs/core';
+import { Duplicate, Error } from '@blueprintjs/icons';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { isIOS, isLinux } from '../../utils/os';
@@ -23,7 +24,7 @@ const NoWebBluetooth: React.FunctionComponent = () => {
                             chrome://flags/#enable-experimental-web-platform-features
                         </Code>
                         <Button
-                            icon="duplicate"
+                            icon={<Duplicate />}
                             small={true}
                             minimal={true}
                             onClick={() =>
@@ -41,7 +42,7 @@ const NoWebBluetooth: React.FunctionComponent = () => {
 
 export const noWebBluetooth: CreateToast = (onAction) => ({
     message: <NoWebBluetooth />,
-    icon: 'error',
+    icon: <Error />,
     intent: Intent.DANGER,
     onDismiss: () => onAction('dismiss'),
 });

src/ble/alerts/OldFirmware.tsx

@@ -3,6 +3,7 @@
 
 import './index.scss';
 import { Button, Intent } from '@blueprintjs/core';
+import { Download, InfoSign } from '@blueprintjs/icons';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
@@ -20,7 +21,7 @@ const OldFirmware: React.FunctionComponent<OldFirmwareProps> = ({
         <>
             <p>{i18n.translate('oldFirmware.message')}</p>
             <div className="pb-ble-alerts-buttons">
-                <Button icon="download" onClick={onFlashFirmware}>
+                <Button icon={<Download />} onClick={onFlashFirmware}>
                     {i18n.translate('oldFirmware.flashFirmware.label')}
                 </Button>
             </div>
@@ -32,7 +33,7 @@ export const oldFirmware: CreateToast<never, 'dismiss' | 'flashFirmware'> = (
     onAction,
 ) => ({
     message: <OldFirmware onFlashFirmware={() => onAction('flashFirmware')} />,
-    icon: 'info-sign',
+    icon: <InfoSign />,
     intent: Intent.PRIMARY,
     onDismiss: () => onAction('dismiss'),
 });