switch to blueprintjs UI toolkit

src/components/OpenFileButton.tsx

@@ -1,12 +1,9 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020 The Pybricks Authors
 
+import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
 import { WithI18nProps, withI18n } from '@shopify/react-i18n';
 import React from 'react';
-import Button from 'react-bootstrap/Button';
-import Image from 'react-bootstrap/Image';
-import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
-import Tooltip from 'react-bootstrap/Tooltip';
 import Dropzone, { FileRejection } from 'react-dropzone';
 import { TooltipId } from './button';
 import en from './button.en.json';
@@ -81,17 +78,13 @@ class OpenFileButton extends React.Component<Props> {
                 noKeyboard={this.props.onClick !== undefined}
             >
                 {({ getRootProps, getInputProps }): JSX.Element => (
-                    <OverlayTrigger
-                        placement="bottom"
-                        overlay={
-                            <Tooltip id={`${this.props.id}-tooltip`}>
-                                {this.props.i18n.translate(this.props.tooltip)}.
-                            </Tooltip>
-                        }
+                    <Tooltip
+                        content={this.props.i18n.translate(this.props.tooltip)}
+                        position={Position.BOTTOM}
                     >
                         <Button
                             {...getRootProps()}
-                            variant="light"
+                            intent={Intent.PRIMARY}
                             disabled={this.props.enabled === false}
                             style={
                                 this.props.enabled === false
@@ -106,9 +99,9 @@ class OpenFileButton extends React.Component<Props> {
                                 : {})}
                         >
                             <input {...getInputProps()} />
-                            <Image src={this.props.icon} alt={this.props.id} />
+                            <img src={this.props.icon} alt={this.props.id} />
                         </Button>
-                    </OverlayTrigger>
+                    </Tooltip>
                 )}
             </Dropzone>
         );