Skip to content

Commit

Permalink
fix(design): go back navigation restyling
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheLeoB
TheLeoB committed Aug 5, 2021
1 parent 782044c commit ad43d2c
Show file tree
Hide file tree
Showing 7 changed files with 34 additions and 59 deletions.
6 changes: 3 additions & 3 deletions packages/blockchain-wallet-v4-frontend/src/scenes/Home/Banners/KycResubmit/index.tsx
View file
Expand Up @@ -38,7 +38,7 @@ const Column = styled.div<{ hiddenOnMobile?: boolean }>`
}
`
const Title = styled(Text)`
color: ${(props) => props.theme['marketing-primary']};
color: ${(props) => props.theme.grey900};
margin-bottom: 4px;
`

Expand All @@ -53,13 +53,13 @@ const ResubmitBtn = styled(Button).attrs({
const KycResubmit = ({ verifyIdentity }) => (
<Wrapper>
<Column>
<Title size='20px' weight={600} color='grey900'>
<Title size='20px' weight={600}>
<FormattedMessage
id='scenes.home.banners.kycresubmit.title'
defaultMessage='Documents Needed'
/>
</Title>
<Text size='14px' weight={500}>
<Text size='14px' weight={500} color='grey900'>
<FormattedMessage
id='scenes.home.banners.kycresubmit.copy'
defaultMessage='Please re-verify your identity to access our full products and services.'
Expand Down
9 changes: 3 additions & 6 deletions packages/blockchain-wallet-v4-frontend/src/scenes/RecoverWallet/CloudRecovery/index.tsx
View file
Expand Up @@ -48,6 +48,9 @@ const CloudRecovery = (props: Props) => {
guid={cachedGuid || lastGuid}
/>
)}
{!cachedEmail && (
<GoBackArrow handleBackArrowClick={() => props.setStep(RecoverSteps.RECOVERY_OPTIONS)} />
)}
<Body>
{!props.phonePubKey && (
<TextColumn>
Expand Down Expand Up @@ -140,12 +143,6 @@ const CloudRecovery = (props: Props) => {
<Badge size='40px' type='googleplay' />
</BadgeRow>
<CenteredRow>
{!cachedEmail && (
<GoBackArrow
handleBackArrowClick={() => props.setStep(RecoverSteps.RECOVERY_OPTIONS)}
minWidth='120px'
/>
)}
<LinkContainer to='/help'>
<Link size='13px' weight={600} data-e2e='loginGetHelp'>
<FormattedMessage id='copy.need_some_help' defaultMessage='Need some help?' />
Expand Down
10 changes: 4 additions & 6 deletions packages/blockchain-wallet-v4-frontend/src/scenes/RecoverWallet/RecoveryOptions/index.tsx
View file
Expand Up @@ -13,9 +13,9 @@ const FormBody = styled.div`
display: flex;
flex-direction: column;
`
const Row = styled.div<{ cachedEmail: boolean }>`
const Row = styled.div`
display: flex;
justify-content: ${(props) => (props.cachedEmail === undefined ? 'flex-start' : 'center')};
justify-content: center;
align-items: center;
margin-top: 24px;
`
Expand All @@ -40,6 +40,7 @@ const RecoveryOptions = (props: Props) => {
guid={cachedGuid || lastGuid}
/>
)}
{!cachedEmail && <GoBackArrow handleBackArrowClick={() => routerActions.push('/login')} />}
<FormBody>
<Text color='grey900' size='20px' weight={600} lineHeight='1.5'>
<FormattedMessage
Expand Down Expand Up @@ -92,10 +93,7 @@ const RecoveryOptions = (props: Props) => {
<Icon name='chevron-right' size='20px' color='grey400' />
</IconTextRow>
</FormBody>
<Row cachedEmail={cachedEmail}>
{!cachedEmail && (
<GoBackArrow handleBackArrowClick={() => routerActions.push('/login')} minWidth='120px' />
)}
<Row>
<Text size='13px' weight={600} color='grey600'>
<FormattedMessage
id='scenes.login.trouble_logging_in'
Expand Down
42 changes: 16 additions & 26 deletions ...blockchain-wallet-v4-frontend/src/scenes/RecoverWallet/RecoveryPhrase/FirstStep/index.tsx
View file
Expand Up @@ -10,40 +10,24 @@ import { RecoverSteps } from 'data/types'
import { required, validMnemonic } from 'services/forms'

import { Props } from '../..'
import { BackArrowFormHeader, GoBackArrow, placeholder } from '../../model'
import { BackArrowFormHeader } from '../../model'

const FormBody = styled.div`
display: flex;
flex-direction: column;
`
const WordContainer = styled.div`
const BottomRow = styled.div`
display: flex;
justify-content: space-between;
max-width: 412px;
margin: 16px 0;
align-items: space-between;
`
const BottomRow = styled.div<{ cachedEmail: boolean }>`
display: flex;
justify-content: ${(props) => (props.cachedEmail ? 'center' : 'flex-start')};
justify-content: center;
align-items: center;
margin-top: 24px;
`
const WordColumn = styled.div`
display: flex;
flex-direction: column;
max-width: 200px;
> div {
margin-bottom: 8px;
}
`

const FirstStep = (props: Props) => {
const {
cachedEmail,
cachedGuid,
formActions,
formValues,
invalid,
lastGuid,
nabuId,
Expand Down Expand Up @@ -125,13 +109,19 @@ const FirstStep = (props: Props) => {
</Text>
)}
</Button>
<BottomRow cachedEmail={cachedEmail}>
{!cachedEmail && (
<GoBackArrow
handleBackArrowClick={() => props.setStep(RecoverSteps.RECOVERY_OPTIONS)}
minWidth='120px'
/>
)}
{!cachedEmail && (
<Text
size='13px'
color='blue600'
weight={600}
onClick={() => setStep(RecoverSteps.RECOVERY_OPTIONS)}
style={{ textAlign: 'center' }}
cursor='pointer'
>
<FormattedMessage id='buttons.go_back' defaultMessage='Go Back' />
</Text>
)}
<BottomRow>
<Text size='13px' weight={600} color='grey600'>
<FormattedMessage
id='scenes.login.trouble_logging_in'
Expand Down
2 changes: 1 addition & 1 deletion ...kchain-wallet-v4-frontend/src/scenes/RecoverWallet/RecoveryPhrase/SecondStep/template.tsx
View file
Expand Up @@ -4,7 +4,7 @@ import { has, props } from 'ramda'
import { Field, reduxForm } from 'redux-form'
import styled from 'styled-components'

import { Button, HeartbeatLoader, Link, Text } from 'blockchain-info-components'
import { Button, HeartbeatLoader, Text } from 'blockchain-info-components'
import { Form, FormGroup, FormLabel, PasswordBox, TextBox } from 'components/Form'
import { Wrapper } from 'components/Public'
import Terms from 'components/Terms'
Expand Down
15 changes: 2 additions & 13 deletions ...ges/blockchain-wallet-v4-frontend/src/scenes/RecoverWallet/ResetAccount/StepOne/index.tsx
View file
Expand Up @@ -38,11 +38,11 @@ class StepOne extends React.PureComponent<Props, State> {
}

render() {
const { cachedEmail, cachedGuid, lastGuid, setStep } = this.props
const { cachedEmail, cachedGuid, lastGuid } = this.props
return (
<>
<BackArrowFormHeader
handleBackArrowClick={() => setStep(RecoverSteps.RECOVERY_OPTIONS)}
handleBackArrowClick={() => this.handleGoBackClick}
email={cachedEmail}
guid={cachedGuid || lastGuid}
step={RecoverSteps.RESET_ACCOUNT}
Expand Down Expand Up @@ -106,7 +106,6 @@ class StepOne extends React.PureComponent<Props, State> {
</Text>
</FormBody>
)}

<ActionButton
nature='primary'
fullwidth
Expand All @@ -117,16 +116,6 @@ class StepOne extends React.PureComponent<Props, State> {
>
<FormattedMessage id='buttons.reset_account' defaultMessage='Reset Account' />
</ActionButton>
<ActionButton
nature='empty-secondary'
fullwidth
height='48px'
data-e2e='goBack'
style={{ marginBottom: '16px' }}
onClick={this.handleGoBackClick}
>
<FormattedMessage id='buttons.go_back' defaultMessage='Go Back' />
</ActionButton>
</>
)
}
Expand Down
9 changes: 5 additions & 4 deletions packages/blockchain-wallet-v4-frontend/src/scenes/RecoverWallet/model.tsx
View file
Expand Up @@ -74,18 +74,19 @@ export const ReverifyIdentityInfoBox = () => {
)
}

export const GoBackArrow = (props: { handleBackArrowClick: () => void; minWidth: string }) => {
export const GoBackArrow = (props: { handleBackArrowClick: () => void }) => {
return (
<Row style={{ minWidth: props.minWidth }} onClick={() => props.handleBackArrowClick()}>
<Row style={{ marginBottom: '16px' }} onClick={() => props.handleBackArrowClick()}>
<Icon
cursor
data-e2e='recoverBack'
name='arrow-left'
size='24px'
color='grey400'
color='grey600'
role='button'
style={{ marginRight: '8px' }}
/>
<Text size='13px' weight={600} color='grey600' cursor='pointer'>
<Text size='14px' weight={600} color='grey600' cursor='pointer'>
<FormattedMessage id='buttons.go_back' defaultMessage='Go Back' />
</Text>
</Row>
Expand Down

0 comments on commit ad43d2c

Please sign in to comment.