use utility classes

similar to how bootstrap works

src/components/ActionButton.tsx

@@ -33,6 +33,7 @@ class ActionButton extends React.Component<Props> {
                     intent={Intent.PRIMARY}
                     onClick={(): void => this.props.onAction()}
                     disabled={this.props.enabled === false}
+                    className="no-box-shadow"
                     style={
                         this.props.enabled === false
                             ? { pointerEvents: 'none' }

src/components/App.tsx

@@ -38,35 +38,35 @@ function App(): JSX.Element {
         <div className="app">
             <Toolbar />
             <SplitterLayout
-                customClassName="app-main"
+                customClassName="h-body"
                 onDragStart={(): void => setDragging(true)}
                 onDragEnd={(): void => setDragging(false)}
                 percentage={true}
                 secondaryInitialSize={Number(
-                    localStorage.getItem('app-main-split') || 30,
+                    localStorage.getItem('app-docs-split') || 30,
                 )}
                 onSecondaryPaneSizeChange={(value): void =>
-                    localStorage.setItem('app-main-split', String(value))
+                    localStorage.setItem('app-docs-split', String(value))
                 }
             >
                 <SplitterLayout
                     vertical={true}
                     percentage={true}
                     secondaryInitialSize={Number(
-                        localStorage.getItem('app-docs-split') || 30,
+                        localStorage.getItem('app-terminal-split') || 30,
                     )}
                     onSecondaryPaneSizeChange={(value): void =>
-                        localStorage.setItem('app-docs-split', String(value))
+                        localStorage.setItem('app-terminal-split', String(value))
                     }
                 >
                     <Editor />
-                    <div className="terminal-padding">
+                    <div className="terminal-padding h-100">
                         <Terminal />
                     </div>
                 </SplitterLayout>
                 {showDocs && (
-                    <div className="docs-iframe">
-                        {dragging && <div className="docs-iframe-overlay" />}
+                    <div className="h-100 w-100">
+                        {dragging && <div className="h-100 w-100 p-absolute" />}
                         <iframe
                             src="https://docs.pybricks.com"
                             allowFullScreen={true}

src/components/Editor.tsx

@@ -31,7 +31,7 @@ class Editor extends React.Component<EditorProps> {
             <ResizeSensor
                 onResize={(): void => this.editorRef.current?.editor?.resize()}
             >
-                <div className="editor-container">
+                <div className="h-100">
                     <AceEditor
                         ref={this.editorRef}
                         mode="python"

src/components/OpenFileButton.tsx

@@ -86,6 +86,7 @@ class OpenFileButton extends React.Component<Props> {
                             {...getRootProps()}
                             intent={Intent.PRIMARY}
                             disabled={this.props.enabled === false}
+                            className="no-box-shadow"
                             style={
                                 this.props.enabled === false
                                     ? { pointerEvents: 'none' }

src/components/Terminal.tsx

@@ -63,7 +63,7 @@ class Terminal extends React.Component<TerminalProps> {
     render(): JSX.Element {
         return (
             <ResizeSensor onResize={(): void => this.fitAddon.fit()}>
-                <div className="terminal-container" ref={this.terminalRef} />
+                <div ref={this.terminalRef} className="h-100" />
             </ResizeSensor>
         );
     }

src/components/Toolbar.tsx

@@ -14,7 +14,7 @@ import StopButton from './StopButton';
 class Toolbar extends React.Component {
     render(): JSX.Element {
         return (
-            <Navbar fixedToTop={true}>
+            <Navbar fixedToTop={true} className="no-box-shadow">
                 <Navbar.Group>
                     <ButtonGroup>
                         <OpenButton id="open" />

src/index.scss

@@ -32,35 +32,31 @@ body {
     padding-top: $pt-navbar-height;
 }
 
-.docs-iframe {
-    height: 100%;
-    width: 100%;
-}
+// Utility classes
 
-.docs-iframe-overlay {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-}
-
-.editor-container {
-    height: 100%;
-}
-
-.terminal-padding {
-    padding-left: 10px;
-    height: 100%;
-}
-
-.terminal-container {
-    height: 100%;
-}
-
-.app-main {
+.h-body {
     // height makes everything fit without scrolling
     height: calc(100vh - #{$pt-navbar-height} - #{$status-bar-height} - var(--mobile-pad)) !important;
 }
 
+.h-100 {
+    height: 100%;
+}
+
+.w-100 {
+    width: 100%;
+}
+
+.p-absolute {
+    position: absolute;
+}
+
+.no-box-shadow {
+    box-shadow: unset !important;
+}
+
+// Status bar. TODO: move this to separate file
+
 .status-bar {
     position: fixed;
     top: calc(100vh - #{$status-bar-height} - var(--mobile-pad));
@@ -76,20 +72,12 @@ body {
     margin-left: 10px;
 }
 
-.bp3-button {
-    // no borders on buttons
-    box-shadow: unset !important;
-}
-
 .bp3-progress-bar.status-bar-item {
     // override progress bar default gray1 backgound
     background-color: $pt-app-background-color;
 }
 
-.bp3-navbar {
-    // no borders on navbar
-    box-shadow: unset;
-}
+// Hacks
 
 .bp3-navbar-divider {
     // don't draw vertical line since we are just using button groups
@@ -105,3 +93,7 @@ body {
     // make layout splitter match app color scheme
     background-color: $pt-app-background-color !important;
 }
+
+.terminal-padding {
+    padding-left: 10px;
+}

src/index.tsx

@@ -57,10 +57,7 @@ ReactDOM.render(
                         );
                     }}
                 >
-                    <div
-                        id="vh"
-                        style={{ height: '100vh', width: '0px', position: 'absolute' }}
-                    />
+                    <div id="vh" className="h-100 w-100 p-absolute" />
                 </ResizeSensor>
                 <NotificationStack />
                 <App />