switch over to titlebar-less design on macOS

app/assets/style/app.scss

@@ -98,6 +98,16 @@ body {
   }
 }
 
+[data-platform=darwin] .titlebar {
+  z-index:10;
+  position:absolute;
+  left:0;
+  top:0;
+  width:100%;
+  height:1.3rem;
+  -webkit-app-region:drag;
+}
+
 .updater {
   z-index:5;
   display:block;
@@ -137,6 +147,7 @@ body {
     vertical-align:middle;
   }
 }
+[data-platform=darwin] .updater {padding-top:2rem;}
 
 @import "../../../node_modules/react-codemirror/node_modules/codemirror/lib/codemirror.css";
 @import "../../../node_modules/react-codemirror/node_modules/codemirror/addon/scroll/simplescrollbars.css";

app/containers/FromScratch.jsx

@@ -174,7 +174,7 @@ export default class FromScratch extends React.Component {
       }
     };
     return (
-      <div style={style}>
+      <div style={style} data-platform={process.platform}>
         <Codemirror value={this.state.content} ref="editor" onChange={this.handleChange.bind(this)} options={options} />
         <div className={this.state.mock}>Already saved! ;)</div>
         <div onClick={this.openDownloadPage.bind(this)} className={this.state.update}>
@@ -183,6 +183,7 @@ export default class FromScratch extends React.Component {
             x
           </span>
         </div>
+        <div className="titlebar"></div>
       </div>
     );
   }

main.js

@@ -59,9 +59,7 @@ app.on('ready', () => {
     height: windowState.bounds && windowState.bounds.height || 450,
     darkTheme: true,
     backgroundColor: '#002b36',
-    webPreferences: {
-      overlayScrollbars: true,
-    }
+    titleBarStyle: 'hidden'
   };
 
   mainWindow = new BrowserWindow(windowSettings);