light & dark mode, add ocean typography

package.json

@@ -18,6 +18,7 @@
   "author": "Matthias Kretschmann",
   "license": "MIT",
   "dependencies": {
+    "@oceanprotocol/typographies": "^0.1.0",
     "ms": "^2.1.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"

src/App.css

@@ -1,9 +1,16 @@
+@import '../node_modules/@oceanprotocol/typographies/css/ocean-typo.css';
+
 html,
 body {
     margin: 0;
     padding: 0;
     height: 100%;
-    background: #141414;
+    background: #fcfcfc !important;
+}
+
+html.dark,
+.dark body {
+    background: #141414 !important;
 }
 
 *,
@@ -29,7 +36,7 @@ html.fullscreen {
         'Segoe UI Symbol';
     font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'pnum' 1, 'tnum' 0,
         'onum' 0, 'lnum' 0, 'dlig' 1;
-    color: #e2e2e2;
+    color: #303030;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
@@ -38,6 +45,25 @@ html.fullscreen {
     -webkit-user-select: none;
 }
 
+.dark #root {
+    color: #e2e2e2;
+}
+
+h1,
+h2,
+h3,
+h4 {
+    font-family: 'Sharp Sans Display', -apple-system, BlinkMacSystemFont,
+        'Segoe UI', Helvetica, Arial, sans-serif;
+    font-weight: 600;
+}
+
+button {
+    font-family: 'Sharp Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        Helvetica, Arial, sans-serif;
+    font-weight: 600;
+}
+
 .app__content {
     padding: 5% 7%;
     cursor: default;
@@ -58,9 +84,9 @@ html.fullscreen {
 .main {
     width: 100%;
     padding: 5%;
-    background: #303030;
+    background: #fff;
     border-radius: 5px;
-    border: .1rem solid #41474e;
+    border: .1rem solid #e2e2e2;
     min-height: 186px;
     display: flex;
     align-items: center;
@@ -68,6 +94,11 @@ html.fullscreen {
     position: relative;
 }
 
+.dark .main {
+    background: #222;
+    border-color: #303030;
+}
+
 .number-unit-wrap {
     display: flex;
     width: 100%;
@@ -115,7 +146,11 @@ html.fullscreen {
 
 .number-unit--main {
     padding-bottom: 5%;
-    border-bottom: 1px solid #41474e;
+    border-bottom: 1px solid #e2e2e2;
+}
+
+.dark .number-unit--main {
+    border-bottom-color: #303030;
 }
 
 .number-unit--main .number {

src/components/Account.jsx

@@ -20,9 +20,7 @@ export default class Account extends PureComponent {
 
     return (
       <div className="number-unit">
-        <h1 className="number">
+        <Balance balance={balance} />
-          <Balance balance={balance} />
-        </h1>
         <span className="label" title={address}>
           {address.substring(0, 12)}...
         </span>

src/components/Balance.jsx

@@ -7,19 +7,21 @@ const Balance = ({ balance }) => {
   const { ocean, eur, usd } = balance
 
   return (
-    <Consumer>
+    <h1 className="number">
-      {({ currency }) =>
+      <Consumer>
-        currency === 'ocean' ? (
+        {({ currency }) =>
-          <span className="balance" title={numberFormatter(ocean)}>
+          currency === 'ocean' ? (
-            Ọ {numberFormatter(ocean) || 0}
+            <span className="balance" title={numberFormatter(ocean)}>
-          </span>
+              Ọ {numberFormatter(ocean) || 0}
-        ) : currency === 'eur' ? (
+            </span>
-          <span className="balance">{fiatFormatter('EUR', eur)}</span>
+          ) : currency === 'eur' ? (
-        ) : (
+            <span className="balance">{fiatFormatter('EUR', eur)}</span>
-          <span className="balance">{fiatFormatter('USD', usd)}</span>
+          ) : (
-        )
+            <span className="balance">{fiatFormatter('USD', usd)}</span>
-      }
+          )
-    </Consumer>
+        }
+      </Consumer>
+    </h1>
   )
 }
 

src/components/Total.jsx

@@ -32,11 +32,7 @@ const Total = () => (
           usd: totalUsd
         }
 
-        return (
+        return <Balance balance={balance} />
-          <h1 className="number">
-            <Balance balance={balance} />
-          </h1>
-        )
       }}
     </Consumer>
     <span className="label">Total balance</span>

src/main.js

@@ -1,5 +1,5 @@
 const path = require('path')
-const { app, BrowserWindow, systemPreferences, ipcMain } = require('electron')
+const { app, BrowserWindow, systemPreferences } = require('electron')
 
 let mainWindow
 
@@ -16,18 +16,18 @@ if (
 const width = 550
 const height = 380
 
+const isDarkMode = systemPreferences.isDarkMode()
+
 const createWindow = () => {
   mainWindow = new BrowserWindow({
     width: width,
     height: height,
     minWidth: width,
     minHeight: height,
-    // maxWidth: width,
-    // maxHeight: height,
     acceptFirstMouse: true,
     titleBarStyle: 'hiddenInset',
     fullscreenWindowTitle: true,
-    backgroundColor: '#141414',
+    backgroundColor: isDarkMode ? '#141414' : '#fff',
     frame: false,
     show: false,
     webPreferences: {
@@ -126,15 +126,13 @@ app.on('activate', () => {
 })
 
 const switchTheme = () => {
-  if (systemPreferences.isDarkMode()) {
+  isDarkMode
-    mainWindow.webContents.executeJavaScript(
+    ? mainWindow.webContents.executeJavaScript(
-      'document.getElementsByTagName(\'html\')[0].classList.add(\'dark\')'
+        'document.getElementsByTagName(\'html\')[0].classList.add(\'dark\')'
-    )
+      )
-  } else {
+    : mainWindow.webContents.executeJavaScript(
-    mainWindow.webContents.executeJavaScript(
+        'document.getElementsByTagName(\'html\')[0].classList.remove(\'dark\')'
-      'document.getElementsByTagName(\'html\')[0].classList.remove(\'dark\')'
+      )
-    )
-  }
 }
 
 // Listen for theme changes in System Preferences