Merge pull request #37 from kremalicious/feature/windows

Windows fixes

src/main/index.js

@@ -35,9 +35,11 @@ const createWindow = async () => {
     frame: process.platform === 'darwin' ? false : true,
     show: false,
     title: pkg.productName,
+    autoHideMenuBar: true,
     webPreferences: {
       nodeIntegration: true,
-      scrollBounce: true
+      scrollBounce: true,
+      enableBlinkFeatures: 'OverlayScrollbars'
     }
   })
 
@@ -86,9 +88,7 @@ app.on('ready', () => {
 
     // add platform as class
     mainWindow.webContents.executeJavaScript(
-      `document.getElementsByTagName('html')[0].classList.add('${
+      `document.getElementsByTagName('html')[0].classList.add('${process.platform}')`
-        process.platform
-      }')`
     )
   })
 })

src/renderer/App.css

@@ -38,9 +38,6 @@ html.fullscreen {
     font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'pnum' 1, 'tnum' 0,
         'onum' 0, 'lnum' 0, 'dlig' 1;
     color: #303030;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
     transform: translate3d(0, 0, 0);
     -webkit-app-region: drag;
     -webkit-user-select: none;
@@ -69,29 +66,16 @@ a h1 {
 }
 
 .app {
-    padding: 5% 7%;
+    padding: 10% 7% 5% 7%;
     cursor: default;
-    height: calc(100vh - 5%);
     transition: .15s ease-out;
     width: 100%;
+    height: 100%;
     overflow-y: auto;
 }
 
 .darwin .app {
-    margin-top: 35px;
+    padding-top: calc(35px + 10%);
-}
-
-.app > div,
-.app > div > div {
-    width: 100%;
-    height: 100%;
-}
-
-.app > div > div {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    width: 100%;
 }
 
 .fullscreen.darwin .app {

src/renderer/App.jsx

@@ -1,6 +1,12 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { Router, Location, navigate } from '@reach/router'
+import {
+  Router,
+  createMemorySource,
+  createHistory,
+  LocationProvider,
+  navigate
+} from '@reach/router'
 import { webFrame, ipcRenderer } from 'electron'
 import posed, { PoseGroup } from 'react-pose'
 import Titlebar from './components/Titlebar'
@@ -17,8 +23,13 @@ webFrame.setLayoutZoomLevelLimits(0, 0)
 
 const Animation = posed.div(defaultAnimation)
 
+// Fix reach-router in packaged Electron
+// https://github.com/reach/router/issues/25#issuecomment-394003652
+let source = createMemorySource('/')
+let history = createHistory(source)
+
 const PosedRouter = ({ children }) => (
-  <Location>
+  <LocationProvider history={history}>
     {({ location }) => (
       <PoseGroup animateOnMount>
         <Animation key={location.key}>
@@ -26,7 +37,7 @@ const PosedRouter = ({ children }) => (
         </Animation>
       </PoseGroup>
     )}
-  </Location>
+  </LocationProvider>
 )
 
 PosedRouter.propTypes = {

src/renderer/components/Ticker.css

@@ -1,6 +1,5 @@
 .ticker {
     margin-top: 3rem;
-    margin-bottom: 4rem;
     width: 100%;
 }
 

src/renderer/index.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { render } from 'react-dom'
 import AppProvider from './store/AppProvider'
 import App from './App'
+import pkg from '../../package.json'
 
 document.body.style.backgroundColor = '#141414'
 
@@ -9,6 +10,7 @@ document.body.style.backgroundColor = '#141414'
 let root = document.createElement('div')
 root.id = 'root'
 document.body.appendChild(root)
+document.title = pkg.productName
 
 render(
   <AppProvider>

src/renderer/screens/Home.css

@@ -1,5 +1,4 @@
 .main {
-    margin-top: 7vh;
     min-height: 222px;
     display: flex;
     align-items: center;
@@ -28,7 +27,7 @@
 .number-unit-wrap {
     display: grid;
     grid-gap: .5rem;
-    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
     justify-items: start;
     width: 100%;
 }

src/renderer/screens/Preferences/index.css

@@ -2,11 +2,11 @@
     text-align: left;
     width: 100%;
     position: relative;
-    margin-top: 7vh;
     padding-bottom: 4rem;
 }
 
 .preferences__title {
+    width: 100%;
     font-size: 2.2rem;
     margin-top: -1rem;
     margin-bottom: 2rem;
@@ -16,7 +16,7 @@
     text-decoration: none;
     font-size: 2rem;
     position: absolute;
-    top: -1.5rem;
+    top: 0;
     right: 0;
     color: #8b98a9;
 }