split scss into separate files

src/components/App.tsx

@@ -12,6 +12,7 @@ import Terminal from './Terminal';
 import Toolbar from './Toolbar';
 
 import 'react-splitter-layout/lib/index.css';
+import './app.scss';
 
 function App(): JSX.Element {
     const showDocs = useSelector((s: RootState): boolean => s.settings.showDocs);

src/components/Editor.tsx

@@ -29,6 +29,7 @@ import 'ace-builds/src-noconflict/ext-keybinding_menu';
 import 'ace-builds/src-noconflict/ext-language_tools';
 
 import './editor-snippets';
+import './editor.scss';
 
 type StateProps = {
     darkMode: boolean;

src/components/StatusBar.tsx

@@ -6,6 +6,8 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { RootState } from '../reducers';
 
+import './status-bar.scss';
+
 type StateProps = { progress: number };
 
 type StatusProps = StateProps;

src/components/Toolbar.tsx

@@ -12,6 +12,8 @@ import SaveAsButton from './SaveAsButton';
 import SettingsButton from './SettingsButton';
 import StopButton from './StopButton';
 
+import './toolbar.scss';
+
 class Toolbar extends React.Component {
     render(): JSX.Element {
         return (

src/components/app.scss

@@ -0,0 +1,24 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2020-2021 The Pybricks Authors
+
+// Custom styling for the App control.
+
+@import '../variables.scss';
+
+.bp3-dark .splitter-layout > .layout-splitter  {
+    // make layout splitter match app color scheme
+    background-color: $pt-dark-app-background-color;
+}
+
+.splitter-layout > .layout-splitter {
+    // make layout splitter match app color scheme
+    background-color: $pt-app-background-color;
+}
+
+.bp3-dark .terminal-padding {
+    background-color: black;
+}
+
+.terminal-padding {
+    padding-left: 10px;
+}

src/components/editor.scss

@@ -0,0 +1,28 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2020-2021 The Pybricks Authors
+
+// Custom styling for the Editor control.
+
+@import '../variables.scss';
+
+.bp3-dark .ace_gutter {
+    // make ace editor match app backgound color
+    background-color: $pt-dark-app-background-color;
+}
+
+.ace_gutter {
+    // make ace editor match app backgound color
+    background-color: $pt-app-background-color;
+}
+
+.watermark::after {
+    content: "";
+    background: url("./images/beta.svg");
+    opacity: 1;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    position: absolute;
+    pointer-events: none
+}

src/components/images/beta.svg

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="450"
+   height="350"
+   viewBox="0 0 119.06251 92.604169"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="beta.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.9899495"
+     inkscape:cx="374.35693"
+     inkscape:cy="136.47484"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1172"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-204.39581)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:40.28653717px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#6d6d6d;fill-opacity:0.05882353;stroke:none;stroke-width:0.26458335"
+       x="-120.74549"
+       y="261.49072"
+       id="text836"
+       transform="rotate(-28.480658)"><tspan
+         sodipodi:role="line"
+         id="tspan834"
+         x="-120.74549"
+         y="261.49072"
+         style="fill:#6d6d6d;fill-opacity:0.045;stroke-width:0.26458335">BETA</tspan></text>
+  </g>
+</svg>

src/components/settings.scss

@@ -1,6 +1,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2021 The Pybricks Authors
 
+// Custom styling for the Settings* controls.
+
 .pb-settings {
     margin: 25px;
 }

src/components/status-bar.scss

@@ -0,0 +1,26 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2020-2021 The Pybricks Authors
+
+// Custom styling for the StatusBar control.
+
+@import '../variables.scss';
+
+.status-bar {
+    position: fixed;
+    top: calc(100vh - #{$pb-status-bar-height} - var(--mobile-pad));
+    background-color: $pb-pybricks-blue;
+    height: $pb-status-bar-height;
+    width: 100vw;
+    display: flex;
+    align-items: center;
+}
+
+.status-bar-item {
+    width: 25%;
+    margin-left: 10px;
+}
+
+.bp3-progress-bar.status-bar-item {
+    // override progress bar default gray1 backgound
+    background-color: $pt-app-background-color;
+}

src/components/toolbar.scss

@@ -0,0 +1,9 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2020-2021 The Pybricks Authors
+
+// Custom styling for the Toolbar control.
+
+.bp3-navbar-divider {
+    // don't draw vertical line since we are just using button groups
+    border-left: unset;
+}