feat: fixed back button

blockchain · Jul 24, 2020 · 91e7427 · 91e7427
1 parent ceb5c1a
commit 91e7427
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 39 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts b/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts
@@ -1185,6 +1185,7 @@ type MessagesType = {
   'modals.simplebuy.transactionfeed.waitingondepo': 'Pending Deposit'
   'modals.simplebuy.transactionlist.viewdetails': 'View Details'
   'modals.simplebuy.transferdetails': 'Transfer Details'
+  'modals.simplebuy.transferdetails.back': 'Back'
   'modals.simplebuy.transferdetails.IBAN': 'IBAN'
   'modals.simplebuy.transferdetails.account': 'Account Number'
   'modals.simplebuy.transferdetails.agree': 'Terms and Conditions of Modular'

diff --git a/...s/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/TransferDetails/template.success.tsx b/...s/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/TransferDetails/template.success.tsx
@@ -24,6 +24,15 @@ const TopText = styled(Text)`
   flex-direction: row;
 `
 
+const BackContainer = styled(Text)`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 40px;
+  font-weight: 600;
+  font-size: 20px;
+`
+
 const Bottom = styled(FlyoutWrapper)`
   display: flex;
   padding-top: 24px;
@@ -68,50 +77,39 @@ const Copy = styled.div`
   display: flex;
 `
 
-const BackIcon = styled(Icon)`
-  position: absolute;
-  left: 40px;
-  top: 20px;
-`
-
-const CloseIcon = styled(Icon)`
-  position: absolute;
-  right: 28px;
-  top: 28px;
-`
-
 const Success: React.FC<Props> = props => {
   return (
     <Wrapper>
       <div>
-        {props.displayBack && (
-          <BackIcon
-            cursor
-            name='arrow-left'
-            size='20px'
-            color='grey600'
-            style={{ marginRight: '28px' }}
-            role='button'
-            onClick={() =>
-              props.simpleBuyActions.setStep({
-                step: 'PAYMENT_METHODS',
-                fiatCurrency: props.fiatCurrency || 'USD',
-                pair: props.pair,
-                cryptoCurrency: props.cryptoCurrency || 'BTC',
-                order: props.order
-              })
-            }
-          />
-        )}
-
-        <CloseIcon
-          cursor
-          name='close'
-          size='20px'
-          color='grey600'
-          onClick={() => props.handleClose()}
-        />
         <FlyoutWrapper>
+          {props.displayBack && (
+            <BackContainer>
+              <Icon
+                cursor
+                name='arrow-left'
+                size='20px'
+                color='grey600'
+                style={{ marginRight: '28px' }}
+                role='button'
+                onClick={() =>
+                  props.simpleBuyActions.setStep({
+                    step: 'PAYMENT_METHODS',
+                    fiatCurrency: props.fiatCurrency || 'USD',
+                    pair: props.pair,
+                    cryptoCurrency: props.cryptoCurrency || 'BTC',
+                    order: props.order
+                  })
+                }
+              />
+              <div>
+                <FormattedMessage
+                  id='modals.simplebuy.transferdetails.back'
+                  defaultMessage='Back'
+                />
+              </div>
+            </BackContainer>
+          )}
+
           <Icon
             size='32px'
             color='fiat'
@@ -126,6 +124,15 @@ const Success: React.FC<Props> = props => {
                   currency: Currencies[props.fiatCurrency].displayName
                 }}
               />
+              {!props.displayBack && (
+                <Icon
+                  cursor
+                  name='close'
+                  size='20px'
+                  color='grey600'
+                  onClick={() => props.handleClose()}
+                />
+              )}
             </TopText>
             <TopText color='grey600' size='24px' weight={600}>
               <FormattedMessage