Linux fixes

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()
-  mainWindow.webContents.send('accent-color', accentColor)
+  if (process.platform !== 'linux') {
+    const accentColor = getAccentColor()
+    mainWindow.webContents.send('accent-color', accentColor)
+  }
 }
 
 // Listen for accent color changes in System Preferences
 // macOS
-systemPreferences.subscribeNotification('AppleAquaColorVariantChanged', () =>
-  switchAccentColor()
-)
+if (process.platform === 'darwin') {
+  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
-    ? mainWindow.webContents.executeJavaScript(
-        'document.getElementsByTagName(\'html\')[0].classList.add(\'dark\')'
-      )
-    : mainWindow.webContents.executeJavaScript(
-        'document.getElementsByTagName(\'html\')[0].classList.remove(\'dark\')'
-      )
+    isDarkMode
+      ? mainWindow.webContents.executeJavaScript(
+          'document.getElementsByTagName(\'html\')[0].classList.add(\'dark\')'
+        )
+      : mainWindow.webContents.executeJavaScript(
+          'document.getElementsByTagName(\'html\')[0].classList.remove(\'dark\')'
+        )
+  }
 }
 
 // Listen for appearance changes in System Preferences
-systemPreferences.subscribeNotification(
-  'AppleInterfaceThemeChangedNotification',
-  () => switchTheme()
-)
+if (process.platform === 'darwin') {
+  systemPreferences.subscribeNotification(
+    '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/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/components/Titlebar.jsx

@@ -2,10 +2,14 @@ import './Titlebar.css'
 import React from 'react'
 import pkg from '../../../package.json'
 
-const Titlebar = () => (
-  <header className="titlebar">
-    <span className="header-title">{pkg.productName}</span>
-  </header>
-)
+const Titlebar = () => {
+  if (process.platform !== 'darwin') return
+
+  return (
+    <header className="titlebar">
+      <span className="header-title">{pkg.productName}</span>
+    </header>
+  )
+}
 
 export default Titlebar

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() {