From 0940226a4d65e981daacdce9e14ef70f3de39077 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Sun, 7 Jun 2020 20:46:05 -0500
Subject: [PATCH] use utility classes

similar to how bootstrap works
---
 src/components/ActionButton.tsx   |  1 +
 src/components/App.tsx            | 16 ++++-----
 src/components/Editor.tsx         |  2 +-
 src/components/OpenFileButton.tsx |  1 +
 src/components/Terminal.tsx       |  2 +-
 src/components/Toolbar.tsx        |  2 +-
 src/index.scss                    | 58 +++++++++++++------------------
 src/index.tsx                     |  5 +--
 8 files changed, 39 insertions(+), 48 deletions(-)

diff --git a/src/components/ActionButton.tsx b/src/components/ActionButton.tsx
index 02e0109d..17403594 100644
--- a/src/components/ActionButton.tsx
+++ b/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' }
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 6616375d..4bfa788e 100644
--- a/src/components/App.tsx
+++ b/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}
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
index bbe055ef..ce57901f 100644
--- a/src/components/Editor.tsx
+++ b/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"
diff --git a/src/components/OpenFileButton.tsx b/src/components/OpenFileButton.tsx
index 6a4ffbd3..56e40340 100644
--- a/src/components/OpenFileButton.tsx
+++ b/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' }
diff --git a/src/components/Terminal.tsx b/src/components/Terminal.tsx
index 1f3a1cba..1272adf1 100644
--- a/src/components/Terminal.tsx
+++ b/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>
         );
     }
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
index c903de27..6bbbd1f7 100644
--- a/src/components/Toolbar.tsx
+++ b/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" />
diff --git a/src/index.scss b/src/index.scss
index ae5e6645..f82f069c 100644
--- a/src/index.scss
+++ b/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;
+}
diff --git a/src/index.tsx b/src/index.tsx
index 1dba66e8..cb67447e 100644
--- a/src/index.tsx
+++ b/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 />