From b0188ab96564020b00c1d142a3c98f8470654b76 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 10 May 2019 00:37:59 +0200 Subject: [PATCH] welcome screen --- src/App.css | 23 +++++++++++++++++++++ src/components/Account.jsx | 20 ++++++++++--------- src/components/Ticker.css | 7 ++++++- src/components/Ticker.jsx | 40 ++++++++++++++++++------------------- src/components/Welcome.css | 17 ++++++++++++++++ src/components/Welcome.jsx | 13 ++++++++++++ src/images/rocket.svg | 7 +++++++ src/screens/Home.css | 29 +++++++++++---------------- src/screens/Home.jsx | 5 +++-- src/screens/Preferences.css | 5 ++--- src/screens/Preferences.jsx | 2 +- src/store/AppProvider.jsx | 1 + 12 files changed, 116 insertions(+), 53 deletions(-) create mode 100644 src/components/Welcome.css create mode 100644 src/components/Welcome.jsx create mode 100644 src/images/rocket.svg diff --git a/src/App.css b/src/App.css index 98ee19a..4046707 100644 --- a/src/App.css +++ b/src/App.css @@ -58,6 +58,15 @@ h5 { font-weight: 700; } +a { + color: #f6388a; + text-decoration: none; +} + +a h1 { + color: unset; +} + .app { margin-top: 35px; padding: 5% 7%; @@ -79,3 +88,17 @@ h5 { .fullscreen .app { transform: translate3d(0, -36px, 0); } + +.box { + width: 100%; + padding: 5%; + background: #fff; + border-radius: 5px; + border: .1rem solid #e2e2e2; + animation: fadein .5s .5s ease-out; +} + +.dark .box { + background: #222; + border-color: #303030; +} diff --git a/src/components/Account.jsx b/src/components/Account.jsx index 3e90dde..9ca4efb 100644 --- a/src/components/Account.jsx +++ b/src/components/Account.jsx @@ -16,16 +16,18 @@ export default class Account extends PureComponent { const { balance, address } = account return ( - - openUrl(`https://etherscan.io/address/${address}#tokentxns`) - } - title="Click to view on Etherscan" - className="number-unit" - > +
- {address.substring(0, 12)}... - + + openUrl(`https://etherscan.io/address/${address}#tokentxns`) + } + title="Click to view on Etherscan" + > + {address.substring(0, 12)}… + +
) } } diff --git a/src/components/Ticker.css b/src/components/Ticker.css index 17a6c01..29ba613 100644 --- a/src/components/Ticker.css +++ b/src/components/Ticker.css @@ -21,13 +21,18 @@ padding: .2rem .4rem; display: block; transition: border .2s ease-out; + color: #8b98a9; +} + +.ticker button:disabled { + pointer-events: none; } .dark .ticker button { border-color: #303030; } -.ticker button:hover { +.ticker button:not(:disabled):hover { border-color: #f6388a; color: #f6388a; } diff --git a/src/components/Ticker.jsx b/src/components/Ticker.jsx index 27a00b1..4ea8f7c 100644 --- a/src/components/Ticker.jsx +++ b/src/components/Ticker.jsx @@ -5,29 +5,29 @@ import { formatCurrency } from '@coingecko/cryptoformat' import './Ticker.css' export default class Ticker extends PureComponent { + static contextType = AppContext + render() { + const { toggleCurrencies, needsConfig, currency, prices } = this.context + return ( ) } diff --git a/src/components/Welcome.css b/src/components/Welcome.css new file mode 100644 index 0000000..ac68a6b --- /dev/null +++ b/src/components/Welcome.css @@ -0,0 +1,17 @@ +.welcome { + width: 100%; + height: 100%; + text-align: center; +} + +.welcome svg { + display: block; + width: 5rem; + height: 5rem; + margin: 0 auto 2rem auto; + fill: #e2e2e2; +} + +.dark .welcome svg { + fill: #41474e; +} diff --git a/src/components/Welcome.jsx b/src/components/Welcome.jsx new file mode 100644 index 0000000..9c3a6e7 --- /dev/null +++ b/src/components/Welcome.jsx @@ -0,0 +1,13 @@ +import React from 'react' +import { Link } from '@reach/router' +import IconRocket from '../images/rocket.svg' +import './Welcome.css' + +const Welcome = () => ( +
+ + Add your first address to get started. +
+) + +export default Welcome diff --git a/src/images/rocket.svg b/src/images/rocket.svg new file mode 100644 index 0000000..384fd02 --- /dev/null +++ b/src/images/rocket.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/screens/Home.css b/src/screens/Home.css index b23ead5..c2294a6 100644 --- a/src/screens/Home.css +++ b/src/screens/Home.css @@ -1,10 +1,5 @@ .main { - width: 100%; margin-top: 7vh; - padding: 5%; - background: #fff; - border-radius: 5px; - border: .1rem solid #e2e2e2; min-height: 222px; display: flex; align-items: center; @@ -13,11 +8,6 @@ animation: fadein .5s .5s ease-out; } -.dark .main { - background: #222; - border-color: #303030; -} - .preferences-link { position: absolute; right: 5%; @@ -26,13 +16,22 @@ .preferences-link svg { fill: #8b98a9; - transition: fill .2s ease-out; + transition: .2s ease-out; width: 1.25rem; height: 1.25rem; } .preferences-link:hover svg { - fill: #f6388a; + fill: #41474e; +} + +.dark .preferences-link svg { + fill: #8b98a9; + opacity: .5; +} + +.dark .preferences-link:hover svg { + opacity: 1; } .number-unit-wrap { @@ -60,7 +59,7 @@ transition: color .2s ease-out; } -.number-unit:hover .label { +.number-unit:not(.number-unit--main) .label:not(:disabled):hover { color: #f6388a; } @@ -73,10 +72,6 @@ border-bottom: 1px solid #e2e2e2; } -.number-unit--main:hover .label { - color: #8b98a9; -} - .dark .number-unit--main { border-bottom-color: #303030; } diff --git a/src/screens/Home.jsx b/src/screens/Home.jsx index b020b3c..ee84abb 100644 --- a/src/screens/Home.jsx +++ b/src/screens/Home.jsx @@ -1,6 +1,7 @@ import React, { PureComponent } from 'react' import { Link } from '@reach/router' import { AppContext } from '../store/createContext' +import Welcome from '../components/Welcome' import Total from '../components/Total' import Account from '../components/Account' import Ticker from '../components/Ticker' @@ -16,13 +17,13 @@ export default class Home extends PureComponent { return ( <> -
+
{needsConfig ? ( - 'Needs config' + ) : isLoading ? ( ) : ( diff --git a/src/screens/Preferences.css b/src/screens/Preferences.css index 202ec7f..b8143c2 100644 --- a/src/screens/Preferences.css +++ b/src/screens/Preferences.css @@ -1,15 +1,14 @@ .preferences { text-align: left; width: 100%; - margin: 5%; - margin-top: calc(7vh + 5%); + margin-top: 7vh; position: relative; } .preferences__title { font-size: 2.2rem; margin-top: -1rem; - margin-bottom: 3rem; + margin-bottom: 2rem; } .preferences__close { diff --git a/src/screens/Preferences.jsx b/src/screens/Preferences.jsx index 98c1960..88752b3 100644 --- a/src/screens/Preferences.jsx +++ b/src/screens/Preferences.jsx @@ -75,7 +75,7 @@ export default class Preferences extends PureComponent { × -
+

Accounts

Add Ethereum account addresses holding Ocean Tokens. diff --git a/src/store/AppProvider.jsx b/src/store/AppProvider.jsx index 4189794..1fe78c5 100644 --- a/src/store/AppProvider.jsx +++ b/src/store/AppProvider.jsx @@ -44,6 +44,7 @@ export default class AppProvider extends PureComponent { : this.setState({ needsConfig: false }) } else { accountsPref = [] + this.setState({ needsConfig: true }) } return accountsPref