toolbar is not a navbar

This adds custom styling for the toolbar (inspired by blueprintsjs
navbar). But this lets us use the correct role and not fight the
navbar styling so much.

src/app/app.scss

@@ -8,7 +8,7 @@
 .pb-app-body {
     // height makes everything fit without scrolling
     height: calc(
-        var(--pb-vh, 100vh) - #{$pt-navbar-height} - #{$pb-status-bar-height}
+        var(--pb-vh, 100vh) - #{$pb-toolbar-height} - #{$pb-status-bar-height}
     ) !important;
 }
 

src/toolbar/Toolbar.tsx

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020 The Pybricks Authors
 
-import { Alignment, ButtonGroup, Navbar } from '@blueprintjs/core';
+import { ButtonGroup } from '@blueprintjs/core';
 import React from 'react';
 import OpenButton from '../editor/OpenButton';
 import SaveAsButton from '../editor/SaveAsButton';
@@ -22,44 +22,35 @@ class Toolbar extends React.Component {
 
     render(): JSX.Element {
         return (
-            <Navbar
+            <div
+                role="toolbar"
                 onContextMenu={(e): void => e.preventDefault()}
-                className="no-box-shadow"
+                className="pb-toolbar no-box-shadow"
             >
-                <Navbar.Group>
-                    <ButtonGroup>
-                        <OpenButton id="open" />
-                        <SaveAsButton id="saveAs" />
-                    </ButtonGroup>
-                    <Navbar.Divider />
-                    <ButtonGroup>
-                        <RunButton id="run" keyboardShortcut="F5" />
-                        <StopButton id="stop" keyboardShortcut="F6" />
-                        <ReplButton id="repl" />
-                    </ButtonGroup>
-                    <Navbar.Divider />
-                    <ButtonGroup>
-                        <FlashButton id="flash" />
-                        <BluetoothButton id="bluetooth" />
-                    </ButtonGroup>
-                </Navbar.Group>
-                <Navbar.Group align={Alignment.RIGHT}>
-                    <ButtonGroup>
-                        <SettingsButton
-                            id="settings"
-                            onAction={() =>
-                                this.setState({ settingsDrawerIsOpen: true })
-                            }
-                        />
-                        <SettingsDrawer
-                            isOpen={this.state.settingsDrawerIsOpen}
-                            onClose={() =>
-                                this.setState({ settingsDrawerIsOpen: false })
-                            }
-                        />
-                    </ButtonGroup>
-                </Navbar.Group>
-            </Navbar>
+                <ButtonGroup className="pb-toolbar-group pb-align-left">
+                    <OpenButton id="open" />
+                    <SaveAsButton id="saveAs" />
+                </ButtonGroup>
+                <ButtonGroup className="pb-toolbar-group pb-align-left">
+                    <RunButton id="run" keyboardShortcut="F5" />
+                    <StopButton id="stop" keyboardShortcut="F6" />
+                    <ReplButton id="repl" />
+                </ButtonGroup>
+                <ButtonGroup className="pb-toolbar-group pb-align-left">
+                    <FlashButton id="flash" />
+                    <BluetoothButton id="bluetooth" />
+                </ButtonGroup>
+                <ButtonGroup className="pb-toolbar-group pb-align-right">
+                    <SettingsButton
+                        id="settings"
+                        onAction={() => this.setState({ settingsDrawerIsOpen: true })}
+                    />
+                    <SettingsDrawer
+                        isOpen={this.state.settingsDrawerIsOpen}
+                        onClose={() => this.setState({ settingsDrawerIsOpen: false })}
+                    />
+                </ButtonGroup>
+            </div>
         );
     }
 }

src/toolbar/toolbar.scss

@@ -5,7 +5,31 @@
 
 @import '../variables.scss';
 
-.#{$ns}-navbar-divider {
-    // don't draw vertical line since we are just using button groups
-    border-left: unset;
+.#{$ns}-dark .pb-toolbar {
+    background-color: $pt-dark-app-background-color;
+}
+
+.pb-toolbar {
+    height: $pb-toolbar-height;
+    background-color: $pt-app-background-color;
+    padding: 0 $pt-grid-size * 1.5;
+    position: relative;
+    width: 100%;
+    z-index: $pt-z-index-content;
+}
+
+.pb-toolbar-group {
+    align-items: center;
+    display: flex;
+    height: $pb-toolbar-height;
+
+    &.pb-align-left {
+        float: left;
+        margin-right: $pt-grid-size * 2;
+    }
+
+    &.pb-align-right {
+        float: right;
+        margin-left: $pt-grid-size * 2;
+    }
 }

src/variables.scss

@@ -10,13 +10,10 @@ $pt-font-size: $pt-grid-size * 1.6;
 $pt-font-size-large: $pt-grid-size * 1.8;
 $pt-font-size-small: $pt-grid-size * 1.4;
 
-$pt-navbar-height: 72px;
+$pb-toolbar-height: 72px;
 $pb-status-bar-height: 24px;
 
 $pb-pybricks-blue: #0088ce;
 $pt-app-background-color: #e8e8e8;
 $pt-intent-primary: $pb-pybricks-blue;
 $pt-outline-color: rgba($pb-pybricks-blue, 0.6);
-
-$navbar-background-color: $pt-app-background-color;
-$dark-navbar-background-color: $pt-dark-app-background-color;