From 4d0e7eb3c1db554d690fce4642f9ca074afb33a4 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 6 May 2019 01:50:08 +0200 Subject: [PATCH] light & dark mode, add ocean typography --- package.json | 1 + src/App.css | 45 +++++++++++++++++++++++++++++++++----- src/components/Account.jsx | 4 +--- src/components/Balance.jsx | 28 +++++++++++++----------- src/components/Total.jsx | 6 +---- src/main.js | 24 ++++++++++---------- 6 files changed, 69 insertions(+), 39 deletions(-) diff --git a/package.json b/package.json index 232abf1..bec12fd 100644 --- a/package.json +++ b/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" diff --git a/src/App.css b/src/App.css index 65f612e..58b8995 100644 --- a/src/App.css +++ b/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 { diff --git a/src/components/Account.jsx b/src/components/Account.jsx index 061fef3..b541ec1 100644 --- a/src/components/Account.jsx +++ b/src/components/Account.jsx @@ -20,9 +20,7 @@ export default class Account extends PureComponent { return (
-

- -

+ {address.substring(0, 12)}... diff --git a/src/components/Balance.jsx b/src/components/Balance.jsx index 792a920..92a2523 100644 --- a/src/components/Balance.jsx +++ b/src/components/Balance.jsx @@ -7,19 +7,21 @@ const Balance = ({ balance }) => { const { ocean, eur, usd } = balance return ( - - {({ currency }) => - currency === 'ocean' ? ( - - Ọ {numberFormatter(ocean) || 0} - - ) : currency === 'eur' ? ( - {fiatFormatter('EUR', eur)} - ) : ( - {fiatFormatter('USD', usd)} - ) - } - +

+ + {({ currency }) => + currency === 'ocean' ? ( + + Ọ {numberFormatter(ocean) || 0} + + ) : currency === 'eur' ? ( + {fiatFormatter('EUR', eur)} + ) : ( + {fiatFormatter('USD', usd)} + ) + } + +

) } diff --git a/src/components/Total.jsx b/src/components/Total.jsx index 7fc328f..82ff943 100644 --- a/src/components/Total.jsx +++ b/src/components/Total.jsx @@ -32,11 +32,7 @@ const Total = () => ( usd: totalUsd } - return ( -

- -

- ) + return }} Total balance diff --git a/src/main.js b/src/main.js index e975a76..5f3214a 100644 --- a/src/main.js +++ b/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()) { - mainWindow.webContents.executeJavaScript( - 'document.getElementsByTagName(\'html\')[0].classList.add(\'dark\')' - ) - } else { - 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 theme changes in System Preferences