From c84fe99712bdafabfd50efcb1931cc14b156c45c Mon Sep 17 00:00:00 2001 From: andreyvEze Date: Thu, 8 Apr 2021 20:19:44 +0300 Subject: [PATCH 1/3] Create wallet confirmation UI2 design. --- src/components/Main.ui.js | 1 - .../scenes/CreateWalletReviewScene.js | 147 ++++++------------ 2 files changed, 49 insertions(+), 99 deletions(-) diff --git a/src/components/Main.ui.js b/src/components/Main.ui.js index 10279cd0954..01732ea8557 100644 --- a/src/components/Main.ui.js +++ b/src/components/Main.ui.js @@ -233,7 +233,6 @@ export class MainComponent extends React.Component { key={Constants.CREATE_WALLET_REVIEW} navTransparent component={ifLoggedIn(CreateWalletReviewScene)} - renderTitle={} renderLeftButton={} renderRightButton={this.renderEmptyButton()} /> diff --git a/src/components/scenes/CreateWalletReviewScene.js b/src/components/scenes/CreateWalletReviewScene.js index 3e1eb6bcb1b..ee601404471 100644 --- a/src/components/scenes/CreateWalletReviewScene.js +++ b/src/components/scenes/CreateWalletReviewScene.js @@ -1,7 +1,7 @@ // @flow import * as React from 'react' -import { ActivityIndicator, Image, Keyboard, StyleSheet, View } from 'react-native' +import { ActivityIndicator, Image, Keyboard, View } from 'react-native' import { Actions } from 'react-native-router-flux' import { connect } from 'react-redux' @@ -9,18 +9,16 @@ import { createCurrencyWallet } from '../../actions/CreateWalletActions.js' import CheckIcon from '../../assets/images/createWallet/check_icon_lg.png' import { WALLET_LIST_SCENE } from '../../constants/indexConstants.js' import s from '../../locales/strings.js' -import { PrimaryButton } from '../../modules/UI/components/Buttons/PrimaryButton.ui.js' -import { SecondaryButton } from '../../modules/UI/components/Buttons/SecondaryButton.ui.js' -import Text from '../../modules/UI/components/FormattedText/FormattedText.ui.js' -import Gradient from '../../modules/UI/components/Gradient/Gradient.ui' -import SafeAreaView from '../../modules/UI/components/SafeAreaView/SafeAreaView.ui.js' -import { THEME } from '../../theme/variables/airbitz.js' -import { PLATFORM } from '../../theme/variables/platform.js' import { type Dispatch, type RootState } from '../../types/reduxTypes.js' import type { CreateWalletType, GuiFiatType } from '../../types/types.js' -import { scale } from '../../util/scaling.js' import { fixFiatCurrencyCode } from '../../util/utils' import { FullScreenTransitionComponent } from '../common/FullScreenTransition.js' +import { SceneWrapper } from '../common/SceneWrapper' +import { type Theme, type ThemeProps, cacheStyles, withTheme } from '../services/ThemeContext.js' +import { EdgeText } from '../themed/EdgeText' +import { SecondaryButton } from '../themed/ThemedButtons' +import { Tile } from '../themed/Tile' +import { UnderlinedHeader } from '../themed/UnderlinedHeader' type OwnProps = { walletName: string, @@ -34,7 +32,7 @@ type StateProps = { type DispatchProps = { createCurrencyWallet(walletName: string, walletType: string, fiatCurrencyCode: string, cleanedPrivateKey?: string): void } -type Props = OwnProps & StateProps & DispatchProps +type Props = OwnProps & StateProps & DispatchProps & ThemeProps type State = { isAnimationVisible: boolean @@ -52,6 +50,8 @@ class CreateWalletReviewComponent extends React.Component { Keyboard.dismiss() } + goToWalletList = () => Actions.popTo(WALLET_LIST_SCENE) + onSubmit = async () => { const { walletName, selectedWalletType, selectedFiat, cleanedPrivateKey, createCurrencyWallet } = this.props const createdWallet = await createCurrencyWallet(walletName, selectedWalletType.walletType, fixFiatCurrencyCode(selectedFiat.value), cleanedPrivateKey) @@ -68,122 +68,73 @@ class CreateWalletReviewComponent extends React.Component { } render() { - const { isCreatingWallet } = this.props + const { isCreatingWallet, theme } = this.props const { isAnimationVisible } = this.state + const styles = getStyles(theme) return ( - + {!isAnimationVisible ? ( - - - - - - {s.strings.create_wallet_top_instructions} - - - - {s.strings.create_wallet_crypto_type_label} {this.props.selectedWalletType.currencyName} - {this.props.selectedWalletType.currencyCode} - - - {s.strings.create_wallet_fiat_type_label} {this.props.selectedFiat.label} - - - {s.strings.create_wallet_name_label} {this.props.walletName} - - + + + + {s.strings.create_wallet_top_instructions} + + + + - - - {s.strings.title_back} - - - - {isCreatingWallet ? ( - - ) : ( - {s.strings.fragment_create_wallet_create_wallet} - )} - - - + + {isCreatingWallet ? : {s.strings.fragment_create_wallet_create_wallet}} + ) : ( Actions.popTo(WALLET_LIST_SCENE)} - image={} - text={{s.strings.create_wallet_import_successful}} + onDone={this.goToWalletList} + image={} + text={{s.strings.create_wallet_import_successful}} /> )} - + ) } } -const rawStyles = { - scene: { - flex: 1, - backgroundColor: THEME.COLORS.WHITE - }, - gradient: { - height: THEME.HEADER, - width: '100%', - position: 'absolute' - }, +const getStyles = cacheStyles((theme: Theme) => ({ view: { - position: 'relative', - top: THEME.HEADER, - paddingHorizontal: 20, - height: PLATFORM.usableHeight + flex: 1, + position: 'relative' }, currencyLogo: { alignSelf: 'center', - marginTop: scale(24), - height: scale(64), - width: scale(64) - }, - instructionalArea: { - paddingVertical: scale(16), - paddingHorizontal: scale(20) + marginTop: theme.rem(1.5), + marginBottom: theme.rem(2.25), + height: theme.rem(4), + width: theme.rem(4) }, instructionalText: { - fontSize: scale(16), - textAlign: 'center', - color: THEME.COLORS.GRAY_1 - }, - reviewArea: { - paddingVertical: scale(18) - }, - reviewAreaText: { - fontSize: scale(16), - lineHeight: scale(24), - color: THEME.COLORS.BLACK + fontSize: theme.rem(1), + color: theme.primaryText, + paddingHorizontal: theme.rem(1), + marginTop: theme.rem(0.5), + marginBottom: theme.rem(2) }, text: { - color: THEME.COLORS.WHITE - }, - buttons: { - marginTop: scale(24), - flexDirection: 'row' + color: theme.primaryText }, create: { flex: 1 }, - cancel: { - flex: 1, - marginRight: scale(2), - backgroundColor: THEME.COLORS.GRAY_2, - justifyContent: 'center', - alignItems: 'center', - borderRadius: 3 - }, createWalletImportTransitionText: { - fontSize: 24, + fontSize: theme.rem(1.5), textAlign: 'center', - color: THEME.COLORS.SECONDARY + color: theme.secondaryText } -} -const styles: typeof rawStyles = StyleSheet.create(rawStyles) +})) export const CreateWalletReviewScene = connect( (state: RootState): StateProps => ({ @@ -194,4 +145,4 @@ export const CreateWalletReviewScene = connect( dispatch(createCurrencyWallet(walletName, walletType, fiatCurrencyCode, true, false, importText)) } }) -)(CreateWalletReviewComponent) +)(withTheme(CreateWalletReviewComponent)) From f6fa05352ff407c42b7f1c6bc6397e17002ea130 Mon Sep 17 00:00:00 2001 From: andreyvEze Date: Fri, 9 Apr 2021 14:01:20 +0300 Subject: [PATCH 2/3] Create wallet button text color --- src/components/scenes/CreateWalletReviewScene.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/scenes/CreateWalletReviewScene.js b/src/components/scenes/CreateWalletReviewScene.js index ee601404471..4064e0db998 100644 --- a/src/components/scenes/CreateWalletReviewScene.js +++ b/src/components/scenes/CreateWalletReviewScene.js @@ -89,7 +89,11 @@ class CreateWalletReviewComponent extends React.Component { - {isCreatingWallet ? : {s.strings.fragment_create_wallet_create_wallet}} + {isCreatingWallet ? ( + + ) : ( + {s.strings.fragment_create_wallet_create_wallet} + )} ) : ( @@ -133,6 +137,9 @@ const getStyles = cacheStyles((theme: Theme) => ({ fontSize: theme.rem(1.5), textAlign: 'center', color: theme.secondaryText + }, + createWalletBtnText: { + color: theme.secondaryButtonText } })) From dd016d051e40106e6e7692291a66f3788b451039 Mon Sep 17 00:00:00 2001 From: andreyvEze Date: Wed, 14 Apr 2021 17:42:26 +0300 Subject: [PATCH 3/3] SceneHeader. Tiles paddings. --- src/components/Main.ui.js | 2 +- src/components/scenes/CreateWalletReviewScene.js | 13 +++++-------- src/components/themed/Tile.js | 13 ++++++++----- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/Main.ui.js b/src/components/Main.ui.js index 01732ea8557..7373161dfe5 100644 --- a/src/components/Main.ui.js +++ b/src/components/Main.ui.js @@ -233,7 +233,7 @@ export class MainComponent extends React.Component { key={Constants.CREATE_WALLET_REVIEW} navTransparent component={ifLoggedIn(CreateWalletReviewScene)} - renderLeftButton={} + renderLeftButton={} renderRightButton={this.renderEmptyButton()} /> diff --git a/src/components/scenes/CreateWalletReviewScene.js b/src/components/scenes/CreateWalletReviewScene.js index 4064e0db998..cc260fbea04 100644 --- a/src/components/scenes/CreateWalletReviewScene.js +++ b/src/components/scenes/CreateWalletReviewScene.js @@ -16,9 +16,9 @@ import { FullScreenTransitionComponent } from '../common/FullScreenTransition.js import { SceneWrapper } from '../common/SceneWrapper' import { type Theme, type ThemeProps, cacheStyles, withTheme } from '../services/ThemeContext.js' import { EdgeText } from '../themed/EdgeText' +import { SceneHeader } from '../themed/SceneHeader' import { SecondaryButton } from '../themed/ThemedButtons' import { Tile } from '../themed/Tile' -import { UnderlinedHeader } from '../themed/UnderlinedHeader' type OwnProps = { walletName: string, @@ -63,10 +63,6 @@ class CreateWalletReviewComponent extends React.Component { } } - onBack = () => { - Actions.pop() - } - render() { const { isCreatingWallet, theme } = this.props const { isAnimationVisible } = this.state @@ -76,7 +72,7 @@ class CreateWalletReviewComponent extends React.Component { {!isAnimationVisible ? ( - + {s.strings.create_wallet_top_instructions} @@ -84,9 +80,10 @@ class CreateWalletReviewComponent extends React.Component { type="static" title={s.strings.create_wallet_crypto_type_label} body={`${this.props.selectedWalletType.currencyName} - ${this.props.selectedWalletType.currencyCode}`} + contentPadding={false} /> - - + + {isCreatingWallet ? ( diff --git a/src/components/themed/Tile.js b/src/components/themed/Tile.js index 7bdcd8666d3..5dc0abfbd3e 100644 --- a/src/components/themed/Tile.js +++ b/src/components/themed/Tile.js @@ -16,7 +16,8 @@ type OwnProps = { error?: boolean, onPress?: () => void, title: string, - type: 'editable' | 'static' | 'touchable' | 'copy' | 'loading' + type: 'editable' | 'static' | 'touchable' | 'copy' | 'loading', + contentPadding?: boolean } type Props = OwnProps & ThemeProps @@ -28,14 +29,14 @@ class TileComponent extends React.PureComponent { } render() { - const { body, title, children, theme, type, error } = this.props + const { body, title, contentPadding = true, children, theme, type, error } = this.props const styles = getStyles(theme) const onPress = type === 'copy' ? () => this.copy() : this.props.onPress if (type === 'loading') { return ( - + {title} @@ -48,7 +49,7 @@ class TileComponent extends React.PureComponent { - + {type === 'editable' && } {type === 'copy' && } {title} @@ -82,7 +83,9 @@ const getStyles = cacheStyles((theme: Theme) => ({ alignItems: 'center' }, content: { - flex: 1, + flex: 1 + }, + contentPadding: { paddingLeft: theme.rem(0.25) }, iconContainer: {