Merge pull request #16 from kremalicious/feature/linux

Linux UI fixes, and some Windows fixes

README.md

@@ -95,10 +95,10 @@ npm run dist
 
 Will build and package the app into platform specific packages for macOS, Windows & Linux.
 
-On a Mac and Linux machine, packaging requires [`wine`](https://www.winehq.org) and `rpm` in your `PATH`. To install on macOS with [Homebrew](https://brew.sh):
+On a Mac and Linux machine, packaging requires [`wine`](https://www.winehq.org) in your `PATH`. To install on macOS with [Homebrew](https://brew.sh):
 
 ```bash
-brew install wine rpm
+brew install wine
 ```
 
 ## Creating Releases

package.json

@@ -76,12 +76,11 @@
     "linux": {
       "target": [
         "deb",
-        "rpm",
         "snap",
         "AppImage"
       ],
       "category": "Office",
-      "executableName": "desiredName",
+      "executableName": "Blowfish",
       "artifactName": "${productName}-${version}.${ext}"
     }
   },
@@ -102,8 +101,7 @@
         "dist/*.dmg",
         "dist/*.AppImage",
         "dist/*.deb",
-        "dist/*.snap",
+        "dist/*.snap"
-        "dist/*.rpm"
       ]
     },
     "npm": {

src/main/index.js

@@ -32,7 +32,7 @@ const createWindow = async () => {
     titleBarStyle: 'hiddenInset',
     fullscreenWindowTitle: true,
     backgroundColor: isDarkMode ? '#141414' : '#fff',
-    frame: false,
+    frame: process.platform === 'darwin' ? false : true,
     show: false,
     title: pkg.productName,
     webPreferences: {
@@ -59,8 +59,9 @@ const createWindow = async () => {
     mainWindow = null
   })
 
-  // Load menubar
+  // Load menu
   buildMenu(mainWindow)
+
   // Load touchbar
   if (process.platform === 'darwin') {
     const accentColor = getAccentColor()
@@ -82,6 +83,13 @@ app.on('ready', () => {
   mainWindow.webContents.on('dom-ready', () => {
     switchTheme()
     switchAccentColor()
+
+    // add platform as class
+    mainWindow.webContents.executeJavaScript(
+      `document.getElementsByTagName('html')[0].classList.add('${
+        process.platform
+      }')`
+    )
   })
 })
 
@@ -154,36 +162,47 @@ const getAccentColor = () => {
 }
 
 const switchAccentColor = () => {
-  const accentColor = getAccentColor()
+  if (process.platform !== 'linux') {
-  mainWindow.webContents.send('accent-color', accentColor)
+    const accentColor = getAccentColor()
+    mainWindow.webContents.send('accent-color', accentColor)
+  }
 }
 
 // Listen for accent color changes in System Preferences
 // macOS
-systemPreferences.subscribeNotification('AppleAquaColorVariantChanged', () =>
+if (process.platform === 'darwin') {
-  switchAccentColor()
+  systemPreferences.subscribeNotification('AppleAquaColorVariantChanged', () =>
-)
+    switchAccentColor()
+  )
+}
+
 // Windows
-systemPreferences.on('accent-color-changed', () => switchAccentColor())
+if (process.platform === 'windows') {
+  systemPreferences.on('accent-color-changed', () => switchAccentColor())
+}
 
 //
 // Appearance setting
 // macOS
 //
 const switchTheme = () => {
-  const isDarkMode = systemPreferences.isDarkMode()
+  if (process.platform === 'darwin') {
+    const isDarkMode = systemPreferences.isDarkMode()
 
-  isDarkMode
+    isDarkMode
-    ? mainWindow.webContents.executeJavaScript(
+      ? mainWindow.webContents.executeJavaScript(
-        'document.getElementsByTagName(\'html\')[0].classList.add(\'dark\')'
+          'document.getElementsByTagName(\'html\')[0].classList.add(\'dark\')'
-      )
+        )
-    : mainWindow.webContents.executeJavaScript(
+      : mainWindow.webContents.executeJavaScript(
-        'document.getElementsByTagName(\'html\')[0].classList.remove(\'dark\')'
+          'document.getElementsByTagName(\'html\')[0].classList.remove(\'dark\')'
-      )
+        )
+  }
 }
 
 // Listen for appearance changes in System Preferences
-systemPreferences.subscribeNotification(
+if (process.platform === 'darwin') {
-  'AppleInterfaceThemeChangedNotification',
+  systemPreferences.subscribeNotification(
-  () => switchTheme()
+    'AppleInterfaceThemeChangedNotification',
-)
+    () => switchTheme()
+  )
+}

src/renderer/App.css

@@ -32,7 +32,7 @@ html.fullscreen {
     position: relative;
     font-size: 1rem;
     line-height: 1.3;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu,
         Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
         'Segoe UI Symbol';
     font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'pnum' 1, 'tnum' 0,
@@ -69,7 +69,6 @@ a h1 {
 }
 
 .app {
-    margin-top: 35px;
     padding: 5% 7%;
     cursor: default;
     height: calc(100vh - 5%);
@@ -78,6 +77,10 @@ a h1 {
     overflow-y: auto;
 }
 
+.darwin .app {
+    margin-top: 35px;
+}
+
 .app > div,
 .app > div > div {
     width: 100%;
@@ -91,7 +94,7 @@ a h1 {
     width: 100%;
 }
 
-.fullscreen .app {
+.fullscreen.darwin .app {
     transform: translate3d(0, -36px, 0);
 }
 

src/renderer/App.jsx

@@ -43,7 +43,7 @@ export default class App extends PureComponent {
   render() {
     return (
       <>
-        <Titlebar />
+        {process.platform === 'darwin' && <Titlebar />}
         <div className="app">
           <PosedRouter>
             <Home path="/" default />

src/renderer/components/Ticker.css

@@ -20,7 +20,7 @@
     padding: .2rem .4rem;
     display: block;
     transition: border .2s ease-out;
-    color: #8b98a9;
+    color: #41474e;
 }
 
 .ticker button:disabled {
@@ -29,6 +29,7 @@
 
 .dark .ticker button {
     border-color: #303030;
+    color: #8b98a9;
 }
 
 .label--price {

src/renderer/store/AppProvider.jsx

@@ -28,7 +28,7 @@ export default class AppProvider extends PureComponent {
     prices: pricesMap,
     toggleCurrencies: currency => this.toggleCurrencies(currency),
     setBalances: () => this.setBalances(),
-    accentColor: ''
+    accentColor: '#f6388a'
   }
 
   async componentDidMount() {