From 29dfa3988c0d25b2836fb87892fa4bfeb82cd82b Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 20 Feb 2019 11:59:57 -0300 Subject: [PATCH 1/4] fix(theme): fix getInitialTheme helper --- app/app.js | 14 +++++++++----- public/flow-coverage-badge.svg | 2 +- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/app/app.js b/app/app.js index f7b161d..edaa085 100644 --- a/app/app.js +++ b/app/app.js @@ -9,7 +9,7 @@ import { configureStore, history } from './redux/create'; import { Router } from './router/container'; import { appTheme as theme, GlobalStyle } from './theme'; import electronStore from '../config/electron-store'; -import { DARK, THEME_MODE } from './constants/themes'; +import { DARK, LIGHT, THEME_MODE } from './constants/themes'; const store = configureStore({}); @@ -18,15 +18,19 @@ type State = { themeMode: string, }; +const getInitialTheme = () => { + const themeInStore = String(electronStore.get(THEME_MODE)); + if (themeInStore === DARK || themeInStore === LIGHT) return themeInStore; + return DARK; +}; + export class App extends Component { state = { - themeMode: electronStore.get(THEME_MODE) || DARK, + themeMode: getInitialTheme(), }; componentDidMount() { - if (!electronStore.has(THEME_MODE)) { - electronStore.set(THEME_MODE, DARK); - } + electronStore.set(THEME_MODE, getInitialTheme()); electronStore.onDidChange(THEME_MODE, newValue => this.setState({ themeMode: newValue })); } diff --git a/public/flow-coverage-badge.svg b/public/flow-coverage-badge.svg index b36be62..f5dabfe 100644 --- a/public/flow-coverage-badge.svg +++ b/public/flow-coverage-badge.svg @@ -1 +1 @@ -flow-coverageflow-coverage88%88% \ No newline at end of file +flow-coverageflow-coverage89%89% \ No newline at end of file From 8bcd08b91580f887b1f15c63f99faae5c0d139ad Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 20 Feb 2019 12:02:23 -0300 Subject: [PATCH 2/4] fix(theme): fix colors usage --- app/components/loading-screen.js | 4 ++-- app/components/transaction-details.js | 16 +++++++++++----- app/components/transaction-item.js | 11 +++++++++-- 3 files changed, 22 insertions(+), 9 deletions(-) diff --git a/app/components/loading-screen.js b/app/components/loading-screen.js index 8c8f660..80da5d5 100644 --- a/app/components/loading-screen.js +++ b/app/components/loading-screen.js @@ -108,8 +108,8 @@ class Component extends PureComponent { progress={progress} responsive showPercentage={false} - progressColor={theme.colors.activeItem} - bgColor={theme.colors.inactiveItem} + progressColor={theme.colors.activeItem(this.props)} + bgColor={theme.colors.inactiveItem(this.props)} /> diff --git a/app/components/transaction-details.js b/app/components/transaction-details.js index f552313..6915e5e 100644 --- a/app/components/transaction-details.js +++ b/app/components/transaction-details.js @@ -18,8 +18,6 @@ import { TextComponent } from './text'; import { RowComponent } from './row'; import { ColumnComponent } from './column'; -import { appTheme } from '../theme'; - import { formatNumber } from '../utils/format-number'; import { openExternal } from '../utils/open-external'; @@ -164,7 +162,11 @@ const Component = ({ append: `${isReceived ? '+' : '-'}ZEC `, value: amount, })} - color={isReceived ? appTheme.colors.transactionReceived : appTheme.colors.transactionSent} + color={ + isReceived + ? theme.colors.transactionReceived({ theme }) + : theme.colors.transactionSent({ theme }) + } /> @@ -181,7 +183,11 @@ const Component = ({ - + + - )} From 52b496c4762d7cb6473a736137c8c755c78c46e6 Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 20 Feb 2019 12:08:53 -0300 Subject: [PATCH 3/4] fix(send): only shows balance tooltip if from address is valid --- app/views/send.js | 31 +++++++++++++++++++++---------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/app/views/send.js b/app/views/send.js index 1d2fb7d..5db71db 100644 --- a/app/views/send.js +++ b/app/views/send.js @@ -361,7 +361,11 @@ class Component extends PureComponent { } updateTooltipVisibility = ({ balance, amount }: { balance: number, amount: number }) => { - this.setState({ showBalanceTooltip: new BigNumber(amount).gt(balance) }); + const { from, to } = this.state; + + this.setState({ + showBalanceTooltip: !from || !to ? false : new BigNumber(amount).gt(balance), + }); }; getAmountWithFee = () => { @@ -379,11 +383,15 @@ class Component extends PureComponent { const { amount } = this.state; if (field === 'to') { - this.setState(() => ({ [field]: value }), () => validateAddress({ address: String(value) })); - } else if (field === 'amount') { this.setState( () => ({ [field]: value }), - () => this.updateTooltipVisibility({ balance, amount: new BigNumber(value).toNumber() }), + () => { + validateAddress({ address: String(value) }); + this.updateTooltipVisibility({ + balance, + amount: new BigNumber(amount).toNumber(), + }); + }, ); } else { if (field === 'from') getAddressBalance({ address: String(value) }); @@ -392,6 +400,10 @@ class Component extends PureComponent { () => ({ [field]: value }), () => { if (field === 'fee') this.handleChange('amount')(amount); + this.updateTooltipVisibility({ + balance, + amount: new BigNumber(field === 'amount' ? value : amount).toNumber(), + }); }, ); } @@ -461,7 +473,6 @@ class Component extends PureComponent { const feeValue = new BigNumber(fee); if (feeValue.isEqualTo(FEES.LOW)) return `Low ZEC ${feeValue.toString()}`; - // eslint-disable-next-line max-len if (feeValue.isEqualTo(FEES.MEDIUM)) return `Medium ZEC ${feeValue.toString()}`; if (feeValue.isEqualTo(FEES.HIGH)) return `High ZEC ${feeValue.toString()}`; @@ -474,12 +485,12 @@ class Component extends PureComponent { return isToAddressValid ? ( - + ) : ( - + ); }; @@ -712,8 +723,8 @@ class Component extends PureComponent { onChange={this.handleChange('fee')} value={String(fee)} disabled={feeType !== FEES.CUSTOM} - bgColor={theme.colors.sendAdditionalInputBg} - color={theme.colors.sendAdditionalInputText} + bgColor={theme.colors.sendAdditionalInputBg(this.props)} + color={theme.colors.sendAdditionalInputText(this.props)} name='fee' /> @@ -721,7 +732,7 @@ class Component extends PureComponent { ({ label: cur.toLowerCase(), From bdc41f50f13cadaab0e0d66a35732db12a3bc226 Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 20 Feb 2019 12:18:55 -0300 Subject: [PATCH 4/4] fix(send): amount field vertical align --- app/views/send.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/send.js b/app/views/send.js index 5db71db..622e02b 100644 --- a/app/views/send.js +++ b/app/views/send.js @@ -80,7 +80,7 @@ const AmountWrapper = styled.div` content: 'ZEC'; font-family: ${props => props.theme.fontFamily}; position: absolute; - margin-top: 15px; + margin-top: 16px; margin-left: 15px; display: block; transition: all 0.05s ease-in-out;