Linux compatibility (#2)

* Make app run in window on Linux/Windows

* Fix filename case

* Show window by default except on macOS

* always show dev tools when developing

* Adjust content height for other platforms

3 files changed, 9 insertions, 4 deletions

diff --git a/app/components/Connect.js b/app/components/Connect.js
index 081aa7f6c2..5f924e92ed 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -6,7 +6,7 @@ import ReactMapboxGl, { Marker } from 'react-mapbox-gl';
 import cheapRuler from 'cheap-ruler';
 import { Layout, Container, Header } from './Layout';
 import { mapbox as mapboxConfig } from '../config';
-import Backend from '../lib/Backend';
+import Backend from '../lib/backend';
 import { ConnectionState } from '../enums';
 import ExternalLinkSVG from '../assets/images/icon-extLink.svg';
 
diff --git a/app/components/HeaderBar.css b/app/components/HeaderBar.css
index 00ef8ef077..22e4011aa4 100644
--- a/app/components/HeaderBar.css
+++ b/app/components/HeaderBar.css
@@ -1,10 +1,15 @@
 .headerbar {
-  padding: 24px 12px 12px;
+  padding: 12px;
   background-color: #294D73;
+  transition: 0.5s background-color ease-in-out;
+}
+
+/* macOS app runs as menubar app so create arrow and add extra padding */
+.headerbar--darwin {
+  padding-top: 24px;
   -webkit-mask: 
     url(../assets/images/app-triangle.svg) 50% 0% no-repeat, 
     url(../assets/images/app-header-backdrop.svg) no-repeat;
-  transition: 0.5s background-color ease-in-out;
 }
 
 .headerbar--hidden { 
diff --git a/app/components/HeaderBar.js b/app/components/HeaderBar.js
index b7a76757fc..4da1e26562 100644
--- a/app/components/HeaderBar.js
+++ b/app/components/HeaderBar.js
@@ -42,7 +42,7 @@ export default class HeaderBar extends Component {
    */
   render() {
     const style = this.props.style;
-    let containerClass = ['headerbar'];
+    let containerClass = ['headerbar', 'headerbar--' + process.platform];
 
     if(HeaderBar.Style.isValid(style)) {
       containerClass.push(`headerbar--style-${style}`);