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