From 62cb8e417a31ce67d5bb1103a864527bcdf6cb28 Mon Sep 17 00:00:00 2001 From: Andre Neves Date: Sun, 24 Feb 2019 16:26:07 -0500 Subject: [PATCH] chore: settings copy and styles --- app/components/clipboard.js | 6 +- app/theme/colors/dark.js | 2 + app/theme/colors/light.js | 2 + app/views/send.js | 169 ++++++++++++++++++++++++++-------- app/views/settings.js | 120 ++++++++++++++++++------ flow-custom-typedefs/theme.js | 2 + 6 files changed, 234 insertions(+), 67 deletions(-) diff --git a/app/components/clipboard.js b/app/components/clipboard.js index 0c99bda..404586d 100644 --- a/app/components/clipboard.js +++ b/app/components/clipboard.js @@ -33,6 +33,10 @@ export class Clipboard extends PureComponent { if (document.body) document.body.removeChild(el); this.setState({ copied: true }); + + setTimeout(() => { + this.setState(() => ({ copied: false })); + }, 1500); }; render() { @@ -42,7 +46,7 @@ export class Clipboard extends PureComponent { return (
- + /> + ); } - if (error) return ; + if (error) { + return ( + + + + { + this.reset(); + toggle(); + }} + /> + + ); + } return ( <> @@ -646,7 +738,7 @@ class Component extends PureComponent { ( this.handleChange('amount')(balance)} + onClick={() => this.handleChange('amount')(balance - (Number(fee) || 0))} disabled={!from} > @@ -774,23 +866,22 @@ class Component extends PureComponent { ( - {showBalanceTooltip ? ( + {!showBalanceTooltip ? null : ( - - + - ) : null} + )} this.showModal(toggle)} id='send-submit-button' label='Send' - variant='secondary' + variant='primary' focused isFluid disabled={this.shouldDisableSendButton()} @@ -808,7 +899,11 @@ class Component extends PureComponent { )} - + ); diff --git a/app/views/settings.js b/app/views/settings.js index 480d7c0..87906c4 100644 --- a/app/views/settings.js +++ b/app/views/settings.js @@ -17,7 +17,6 @@ import { ConfirmDialogComponent } from '../components/confirm-dialog'; import { TextComponent } from '../components/text'; import { InputComponent } from '../components/input'; import { InputLabelComponent } from '../components/input-label'; -import { RowComponent } from '../components/row'; import { Clipboard } from '../components/clipboard'; import { SelectComponent } from '../components/select'; @@ -33,23 +32,25 @@ const EXPORT_VIEW_KEYS_CONTENT = 'Viewing keys for shielded addresses allow for const EXPORT_VIEW_KEYS_LEARN_MORE = 'https://z.cash/blog/viewing-keys-selective-disclosure'; const IMPORT_PRIV_KEYS_TITLE = 'Import Private Keys'; const IMPORT_PRIV_KEYS_CONTENT = 'Importing private keys will add the spendable coins to this wallet.'; +const IMPORT_PRIV_KEYS_CONTENT_MODAL = 'Paste your private keys here, one per line. These spending keys will be imported into your wallet.'; +const IMPORT_PRIV_KEYS_SUCCESS_CONTENT = 'Private keys imported in your wallet. Any spendable coins should now be available.'; const EXPORT_PRIV_KEYS_TITLE = 'Export Private Keys'; const EXPORT_PRIV_KEYS_CONTENT = 'Beware: exporting your private keys will allow anyone controlling them to spend your coins. Only perform this action on a trusted machine.'; const BACKUP_WALLET_TITLE = 'Backup Wallet'; -const BACKUP_WALLET_CONTENT = 'It is recommended that you backup your wallet often.'; +const BACKUP_WALLET_CONTENT = 'It is recommended that you backup your wallet often to avoid possible issues arising from data corruption.'; const Wrapper = styled.div` margin-top: ${props => props.theme.layoutContentPaddingTop}; `; const ModalContent = styled.div` - padding: 20px 30px; + padding: 20px 40px; width: 100%; max-height: 600px; overflow-y: auto; p { - word-break: break-all; + word-break: break-word; } `; @@ -128,6 +129,59 @@ const SettingsActionWrapper = styled.div` justify-content: space-between; `; +const StatusWrapper = styled.div` + padding: 20px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +`; + +const StatusTextError = styled(TextComponent)` + font-weight: 700; + color: ${props => props.theme.colors.error}; +`; + +const StatusTextSuccess = styled(TextComponent)` + font-weight: 700; + color: ${props => props.theme.colors.success}; +`; + +const ViewKeyHeader = styled.div` + display: flex; + flex-direction: column; + padding: 30px 0 10px 0; +`; + +const ViewKeyLabel = styled(TextComponent)` + font-weight: ${props => String(props.theme.fontWeight.bold)}; + font-size: ${props => String(props.theme.fontSize.small)}; + color: ${props => props.theme.colors.modalItemLabel}; + margin-bottom: 3.5px; +`; + +const ViewKeyAddress = styled(TextComponent)` + font-size: 12px; + padding: 10px 0; + line-height: 1.5; + word-break: break-all !important; +`; + +const ViewKeyContentWrapper = styled.div` + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + + > :first-child { + width: 100%; + } +`; + +const ViewKeyInputComponent = styled(InputComponent)` + font-size: 12px; +`; + type Key = { zAddress: string, key: string, @@ -321,27 +375,28 @@ export class SettingsView extends PureComponent { )} onConfirm={this.exportViewKeys} showButtons={!successExportViewKeys} - width={450} + width={550} > {() => ( {successExportViewKeys ? ( - viewKeys.map(({ zAddress, key }) => ( + viewKeys.map(({ zAddress, key }, index) => ( <> - - - + + + + + { - event.currentTarget.select(); - }} + onFocus={event => event.currentTarget.select()} /> - + )) ) : ( - + )} )} @@ -359,27 +414,29 @@ export class SettingsView extends PureComponent { )} onConfirm={this.exportPrivateKeys} showButtons={!successExportPrivateKeys} - width={450} + width={550} > {() => ( {successExportPrivateKeys ? ( - privateKeys.map(({ zAddress, key }) => ( + privateKeys.map(({ zAddress, key }, index) => ( <> - - - + + + + + { - event.currentTarget.select(); - }} + width='100%' + onFocus={event => event.currentTarget.select()} /> - + )) ) : ( - + )} )} @@ -400,17 +457,22 @@ export class SettingsView extends PureComponent { > {() => ( - + this.setState({ importedPrivateKeys: value })} inputType='textarea' rows={10} /> - {successImportPrivateKeys && ( - - )} - {error && } + + {successImportPrivateKeys && ( + + )} + {error && } + )} diff --git a/flow-custom-typedefs/theme.js b/flow-custom-typedefs/theme.js index 525da82..68ede9a 100644 --- a/flow-custom-typedefs/theme.js +++ b/flow-custom-typedefs/theme.js @@ -5,6 +5,8 @@ import { ThemeSet } from 'styled-theming'; type Colors = { // General text: ThemeSet, + success: ThemeSet, + error: ThemeSet, background: ThemeSet, divider: ThemeSet, activeItem: ThemeSet,