switch to blueprintjs UI toolkit

src/components/Notification.tsx

@@ -1,12 +1,13 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020 The Pybricks Authors
 
+import { IconName, Intent, Toast } from '@blueprintjs/core';
 import { WithI18nProps, withI18n } from '@shopify/react-i18n';
 import React from 'react';
-import Toast from 'react-bootstrap/Toast';
 import { connect } from 'react-redux';
 import { Dispatch } from '../actions';
-import { remove } from '../actions/notification';
+import { NotificationLevel, remove } from '../actions/notification';
+import { Level } from '../reducers/notification';
 import en from './notification.en.json';
 
 interface DispatchProps {
@@ -15,7 +16,7 @@ interface DispatchProps {
 
 interface OwnProps {
     id: number;
-    style: string;
+    level: NotificationLevel;
     message?: string;
     messageId?: string;
     helpUrl?: string;
@@ -23,51 +24,63 @@ interface OwnProps {
 
 type NotificationProps = DispatchProps & OwnProps & WithI18nProps;
 
-function mapTitle(style: string): string {
-    switch (style) {
-        case 'danger':
-            return 'Error';
-        case 'warning':
-            return 'Warning';
+function mapIntent(level: NotificationLevel): Intent {
+    switch (level) {
+        case Level.Error:
+            return Intent.DANGER;
+        case Level.Warning:
+            return Intent.WARNING;
+        case Level.Info:
+            return Intent.PRIMARY;
         default:
-            return 'Info';
+            return Intent.NONE;
+    }
+}
+
+function mapIcon(level: NotificationLevel): IconName | undefined {
+    switch (level) {
+        case Level.Error:
+            return 'error';
+        case Level.Warning:
+            return 'warning-sign';
+        case Level.Info:
+            return 'info-sign';
+        default:
+            return undefined;
     }
 }
 
 class Notification extends React.Component<NotificationProps> {
     render(): JSX.Element {
-        const title = mapTitle(this.props.style);
         return (
             <Toast
-                onClose={(): void => {
+                onDismiss={(): void => {
                     this.props.onClose();
                 }}
-                transition={false}
-            >
-                <Toast.Header>
-                    <strong className={`mr-auto text-${this.props.style}`}>
-                        {title}
-                    </strong>
-                </Toast.Header>
-                <Toast.Body>
-                    <p>
-                        {this.props.messageId
-                            ? this.props.i18n.translate(this.props.messageId)
-                            : this.props.message || 'missing message!'}
-                    </p>
-                    <p>
+                timeout={0}
+                intent={mapIntent(this.props.level)}
+                icon={mapIcon(this.props.level)}
+                message={
+                    <div>
+                        <p>
+                            {this.props.messageId
+                                ? this.props.i18n.translate(this.props.messageId)
+                                : this.props.message || 'missing message!'}
+                        </p>
                         {this.props.helpUrl && (
-                            <a
-                                href={this.props.helpUrl}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                More info
-                            </a>
+                            <p>
+                                <a
+                                    href={this.props.helpUrl}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                >
+                                    More info
+                                </a>
+                            </p>
                         )}
-                    </p>
-                </Toast.Body>
-            </Toast>
+                    </div>
+                }
+            />
         );
     }
 }