diff --git a/package.json b/package.json index 988a882..a11d765 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "@babel/preset-env": "^7.4.4", "@babel/preset-react": "^7.0.0", "@babel/runtime": "^7.4.4", + "@svgr/webpack": "^4.2.0", "babel-eslint": "^10.0.1", "babel-loader": "^8.0.5", "css-loader": "^2.1.1", diff --git a/src/App.css b/src/App.css index d244c75..4bea8b0 100644 --- a/src/App.css +++ b/src/App.css @@ -13,6 +13,7 @@ body { width: 100%; height: 100%; background: #fcfcfc !important; + overflow: hidden; } html.dark, @@ -66,13 +67,16 @@ button { } .app { + margin-top: 35px; padding: 5% 7%; cursor: default; - height: calc(100vh - 35px); + height: 100vh; transition: .15s ease-out; width: 100%; + overflow-y: auto; } +.app, .app > div { display: flex; align-items: center; diff --git a/src/components/Titlebar.css b/src/components/Titlebar.css index 61799cc..9c58888 100644 --- a/src/components/Titlebar.css +++ b/src/components/Titlebar.css @@ -1,5 +1,5 @@ .titlebar { - align-self: flex-start; + position: fixed; width: 100%; height: 35px; line-height: 35px; diff --git a/src/images/cog.svg b/src/images/cog.svg new file mode 100644 index 0000000..43f1806 --- /dev/null +++ b/src/images/cog.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/main.js b/src/main.js index 5f3033e..1684f8f 100644 --- a/src/main.js +++ b/src/main.js @@ -31,9 +31,9 @@ const createWindow = async () => { frame: false, show: false, title: 'Ocean', - scrollBounce: true, webPreferences: { - nodeIntegration: true + nodeIntegration: true, + scrollBounce: true } }) diff --git a/src/screens/Home.css b/src/screens/Home.css index fbdc43c..52001e1 100644 --- a/src/screens/Home.css +++ b/src/screens/Home.css @@ -17,6 +17,23 @@ border-color: #303030; } +.preferences-link { + position: absolute; + right: 5%; + top: 1.5rem; +} + +.preferences-link svg { + fill: #8b98a9; + transition: fill .2s ease-out; + width: 1.25rem; + height: 1.25rem; +} + +.preferences-link:hover svg { + fill: #f6388a; +} + .number-unit-wrap { display: flex; width: 100%; diff --git a/src/screens/Home.jsx b/src/screens/Home.jsx index e6eef5d..b020b3c 100644 --- a/src/screens/Home.jsx +++ b/src/screens/Home.jsx @@ -5,6 +5,7 @@ import Total from '../components/Total' import Account from '../components/Account' import Ticker from '../components/Ticker' import Spinner from '../components/Spinner' +import IconCog from '../images/cog.svg' import './Home.css' export default class Home extends PureComponent { @@ -15,8 +16,11 @@ export default class Home extends PureComponent { return ( <> - Preferences
+ + + + {needsConfig ? ( 'Needs config' ) : isLoading ? ( diff --git a/src/screens/Preferences.css b/src/screens/Preferences.css index 6852a52..6ca0abe 100644 --- a/src/screens/Preferences.css +++ b/src/screens/Preferences.css @@ -1,11 +1,30 @@ .preferences { text-align: left; width: 100%; + margin: 5%; + position: relative; } .preferences__title { - font-size: 3rem; - margin-top: 0; + font-size: 2rem; + margin-top: -1rem; + margin-bottom: 3rem; +} + +.preferences__close { + text-decoration: none; + font-family: 'Sharp Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', + Helvetica, Arial, sans-serif; + font-weight: 600; + font-size: 2.5rem; + position: absolute; + top: -1.5rem; + right: 0; + color: #8b98a9; +} + +.preferences__close:hover { + color: #f6388a; } .preference__list { @@ -25,7 +44,6 @@ border-bottom: 1px solid #e2e2e2; padding-top: .3rem; padding-bottom: .25rem; - font-family: monospace; } .dark .preference__list li { @@ -45,7 +63,7 @@ button.delete { font-size: 2rem; - color: #8b98a9; + color: #41474e; transition: color .5s ease-out; } @@ -59,7 +77,7 @@ button.delete:hover { } .preference__title { - font-size: 1.2rem; + font-size: 1rem; color: #8b98a9; } @@ -81,7 +99,6 @@ button.delete:hover { color: #303030; margin-top: .75rem; margin-bottom: .75rem; - font-family: monospace; } .dark .preference__input { diff --git a/src/screens/Preferences.jsx b/src/screens/Preferences.jsx index 0ed896b..2534d75 100644 --- a/src/screens/Preferences.jsx +++ b/src/screens/Preferences.jsx @@ -57,7 +57,9 @@ export default class Preferences extends PureComponent { return (

Preferences

{' '} - Close + + × +

Accounts

    diff --git a/webpack.common.config.js b/webpack.common.config.js index ffe177e..5216959 100644 --- a/webpack.common.config.js +++ b/webpack.common.config.js @@ -28,7 +28,12 @@ module.exports = { include: defaultInclude }, { - test: /\.(eot|svg|ttf|woff|woff2)$/, + test: /\.svg$/, + use: ['@svgr/webpack'], + include: defaultInclude + }, + { + test: /\.(eot|ttf|woff|woff2)$/, use: ['file-loader?name=font/[name]__[hash:base64:5].[ext]'], include: defaultInclude }