From 67997fe12a5edb590a60d46fb5898b46bf90d77c Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 8 May 2019 21:41:24 +0200 Subject: [PATCH] preferences styling --- package.json | 1 + src/components/Balance.jsx | 6 +-- src/components/Ticker.jsx | 6 +-- src/components/Total.jsx | 6 +-- src/screens/Home.jsx | 50 +++++++++++----------- src/screens/Preferences.css | 85 +++++++++++++++++++++++++++++++++++++ src/screens/Preferences.jsx | 67 ++++++++++++++++++++--------- src/store/AppProvider.jsx | 20 ++++----- src/store/createContext.jsx | 4 +- 9 files changed, 176 insertions(+), 69 deletions(-) diff --git a/package.json b/package.json index 54f9b24..988a882 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@reach/router": "^1.2.1", "ms": "^2.1.1", "react": "^16.8.6", + "react-blockies": "^1.4.1", "react-dom": "^16.8.6" }, "devDependencies": { diff --git a/src/components/Balance.jsx b/src/components/Balance.jsx index 229470e..b3741dc 100644 --- a/src/components/Balance.jsx +++ b/src/components/Balance.jsx @@ -1,19 +1,19 @@ import React from 'react' import PropTypes from 'prop-types' -import { Consumer } from '../store/createContext' +import { AppContext } from '../store/createContext' import { locale } from '../util/moneyFormatter' import { formatCurrency } from '@coingecko/cryptoformat' const Balance = ({ balance }) => (

- + {({ currency }) => formatCurrency(balance[currency], currency.toUpperCase(), locale) .replace(/BTC/, 'Ƀ') .replace(/ETH/, 'Ξ') .replace(/OCEAN/, 'Ọ') } - +

) diff --git a/src/components/Ticker.jsx b/src/components/Ticker.jsx index 29bec39..27a00b1 100644 --- a/src/components/Ticker.jsx +++ b/src/components/Ticker.jsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react' -import { Consumer } from '../store/createContext' +import { AppContext } from '../store/createContext' import { locale } from '../util/moneyFormatter' import { formatCurrency } from '@coingecko/cryptoformat' import './Ticker.css' @@ -8,7 +8,7 @@ export default class Ticker extends PureComponent { render() { return ( ) } diff --git a/src/components/Total.jsx b/src/components/Total.jsx index c4e4b91..cadd4b8 100644 --- a/src/components/Total.jsx +++ b/src/components/Total.jsx @@ -1,5 +1,5 @@ import React from 'react' -import { Consumer } from '../store/createContext' +import { AppContext } from '../store/createContext' import Balance from './Balance' import { prices } from '../../config' @@ -21,7 +21,7 @@ const calculateTotalBalance = (accounts, currency) => { const Total = () => (
- + {({ accounts }) => { const conversions = Object.assign( ...prices.map(key => ({ @@ -36,7 +36,7 @@ const Total = () => ( return }} - + Total Balance
) diff --git a/src/screens/Home.jsx b/src/screens/Home.jsx index a0a631a..e6eef5d 100644 --- a/src/screens/Home.jsx +++ b/src/screens/Home.jsx @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react' import { Link } from '@reach/router' -import { Consumer } from '../store/createContext' +import { AppContext } from '../store/createContext' import Total from '../components/Total' import Account from '../components/Account' import Ticker from '../components/Ticker' @@ -8,34 +8,34 @@ import Spinner from '../components/Spinner' import './Home.css' export default class Home extends PureComponent { + static contextType = AppContext + render() { + const { isLoading, accounts, needsConfig } = this.context + return ( - - {({ isLoading, accounts, needsConfig }) => ( - <> - Settings -
- {needsConfig ? ( - 'Needs config' - ) : isLoading ? ( - - ) : ( - <> - + <> + Preferences +
+ {needsConfig ? ( + 'Needs config' + ) : isLoading ? ( + + ) : ( + <> + -
- {accounts.map((account, i) => ( - - ))} -
- - )} -
+
+ {accounts.map((account, i) => ( + + ))} +
+ + )} +
- - - )} - + + ) } } diff --git a/src/screens/Preferences.css b/src/screens/Preferences.css index 46d48f9..6852a52 100644 --- a/src/screens/Preferences.css +++ b/src/screens/Preferences.css @@ -2,3 +2,88 @@ text-align: left; width: 100%; } + +.preferences__title { + font-size: 3rem; + margin-top: 0; +} + +.preference__list { + padding: 0; + border-top: 1px solid #e2e2e2; +} + +.dark .preference__list { + border-top-color: #303030; +} + +.preference__list li { + list-style: none; + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #e2e2e2; + padding-top: .3rem; + padding-bottom: .25rem; + font-family: monospace; +} + +.dark .preference__list li { + border-bottom-color: #303030; +} + +.preferences button { + background: none; + border: 0; + box-shadow: none; + margin: 0; + outline: 0; + color: #f6388a; + font-size: 1rem; + text-transform: uppercase; +} + +button.delete { + font-size: 2rem; + color: #8b98a9; + transition: color .5s ease-out; +} + +button.delete:hover { + color: #f6388a; +} + +.preference { + -webkit-app-region: none; + -webkit-user-select: text; +} + +.preference__title { + font-size: 1.2rem; + color: #8b98a9; +} + +.preference .identicon { + width: 1.5rem !important; + height: 1.5rem !important; + border-radius: 50%; + vertical-align: middle; + margin-top: -.2rem; + margin-right: .5rem; +} + +.preference__input { + font-size: 1rem; + outline: 0; + background: none; + border: 0; + width: 80%; + color: #303030; + margin-top: .75rem; + margin-bottom: .75rem; + font-family: monospace; +} + +.dark .preference__input { + color: #fff; +} diff --git a/src/screens/Preferences.jsx b/src/screens/Preferences.jsx index b61dc79..0ed896b 100644 --- a/src/screens/Preferences.jsx +++ b/src/screens/Preferences.jsx @@ -1,9 +1,13 @@ import React, { PureComponent } from 'react' import { Link } from '@reach/router' import Store from 'electron-store' +import Blockies from 'react-blockies' import './Preferences.css' +import { AppContext } from '../store/createContext' export default class Preferences extends PureComponent { + static contextType = AppContext + store = new Store() state = { accounts: [], input: '' } @@ -26,8 +30,10 @@ export default class Preferences extends PureComponent { !this.state.accounts.includes(this.state.input) // duplication check ) { const joined = [...this.state.accounts, this.state.input] + this.store.set('accounts', joined) - this.setState({ accounts: joined }) + this.setState({ accounts: joined, input: '' }) + this.context.setBalances(joined) } } @@ -44,32 +50,51 @@ export default class Preferences extends PureComponent { this.store.set('accounts', array) this.setState({ accounts: array }) + this.context.setBalances(array) } render() { return (
- Hello Preferences Close -
- {this.state.accounts && - this.state.accounts.map(account => ( -
- {account} - -
- ))} +

Preferences

{' '} + Close +
+

Accounts

+
    + {this.state.accounts && + this.state.accounts.map(account => ( +
  • +
    + + {account} +
    + + +
    • + ))} +
  • + + +
    • +
-
- - -
) } diff --git a/src/store/AppProvider.jsx b/src/store/AppProvider.jsx index 6bcf4d3..1bbd8d5 100644 --- a/src/store/AppProvider.jsx +++ b/src/store/AppProvider.jsx @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import ms from 'ms' import Store from 'electron-store' -import { Provider } from './createContext' +import { AppContext } from './createContext' import { refreshInterval, prices, oceanTokenContract } from '../../config' export default class AppProvider extends PureComponent { @@ -18,7 +18,8 @@ export default class AppProvider extends PureComponent { currency: 'ocean', needsConfig: false, prices: Object.assign(...prices.map(key => ({ [key]: 0 }))), - toggleCurrencies: currency => this.setState({ currency }) + toggleCurrencies: currency => this.setState({ currency }), + setBalances: account => this.setBalances(account) } async componentDidMount() { @@ -30,15 +31,6 @@ export default class AppProvider extends PureComponent { await setInterval(this.setBalances, ms(refreshInterval)) this.setState({ isLoading: false }) - - // document.addEventListener('DOMContentLoaded', () => { - // this.store.onDidChange('accounts', async (newValue, oldValue) => { - // const { accounts } = await this.getAccounts() - // await this.setBalances(accounts) - - // console.log('hello from setting window', newValue, oldValue) - // }) - // }) } componentWillUnmount() { @@ -138,6 +130,10 @@ export default class AppProvider extends PureComponent { } render() { - return {this.props.children} + return ( + + {this.props.children} + + ) } } diff --git a/src/store/createContext.jsx b/src/store/createContext.jsx index 25bffa4..75ba03c 100644 --- a/src/store/createContext.jsx +++ b/src/store/createContext.jsx @@ -1,5 +1,5 @@ import { createContext } from 'react' -const { Provider, Consumer } = createContext() +const AppContext = createContext({}) -export { Provider, Consumer } +export { AppContext }