fix(Request): mobile request bitcoin fix

blockchain · Jul 1, 2018 · 6a49784 · 6a49784
1 parent 729e60c
commit 6a49784
Showing 1 changed file with 34 additions and 36 deletions.
diff --git a/...es/blockchain-wallet-v4-frontend/src/modals/RequestBitcoin/SecondStep/template.success.js b/...es/blockchain-wallet-v4-frontend/src/modals/RequestBitcoin/SecondStep/template.success.js
@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { FormattedMessage } from 'react-intl'
 import { reduxForm } from 'redux-form'
 import CopyToClipBoard from 'react-copy-to-clipboard'
 
-import { Button, Link, Modal, ModalHeader, ModalBody, ModalFooter, Text } from 'blockchain-info-components'
+import { Button, Link, Text } from 'blockchain-info-components'
 import { Form } from 'components/Form'
 import CoinDisplay from 'components/Display/CoinDisplay'
 import FiatDisplay from 'components/Display/FiatDisplay'
@@ -34,50 +34,48 @@ const LinkContainer = styled.div`
 const SubHeader = styled(Text)`
   margin-bottom: 20px;
 `
+const Footer = styled.div`
+  margin-top: 20px;
+`
 
 const SecondStep = (props) => {
   const { previousStep, position, total, modalActions, ...rest } = props
   const { handleSubmit, satoshis, message, link, active } = rest
 
   return (
-    <Modal size='large' position={position} total={total}>
-      <ModalHeader icon='request' onClose={modalActions.closeAllModals}>
-        <FormattedMessage id='modals.requestbitcoin.secondstep.title' defaultMessage='Request' />
-      </ModalHeader>
-      <ModalBody>
-        <Form onSubmit={handleSubmit}>
-          <SubHeader size='14px' weight={300}>
-            <FormattedMessage id='modals.requestbitcoin.secondstep.explain' defaultMessage='Send the link below to your friend or contact and they will be able to send bitcoin directly to your wallet.' />
-          </SubHeader>
-          <Text size='14px' weight={500}>
-            <FormattedMessage id='modals.requestbitcoin.secondstep.payment' defaultMessage='Payment Request:' />
+    <Fragment>
+      <Form onSubmit={handleSubmit}>
+        <SubHeader size='14px' weight={300}>
+          <FormattedMessage id='modals.requestbitcoin.secondstep.explain' defaultMessage='Send the link below to your friend or contact and they will be able to send bitcoin directly to your wallet.' />
+        </SubHeader>
+        <Text size='14px' weight={500}>
+          <FormattedMessage id='modals.requestbitcoin.secondstep.payment' defaultMessage='Payment Request:' />
+        </Text>
+        <Container>
+          <CoinDisplay size='28px' weight={500} color='received' coin='BTC'>{satoshis}</CoinDisplay>
+          <FiatDisplay size='20px' weight={300} color='received' coin='BTC'>{satoshis}</FiatDisplay>
+          <Text size='16px'>
+            <FormattedMessage id='modals.requestbitcoin.secondstep.message' defaultMessage='For "{message}"' values={{message: message}} />
           </Text>
-          <Container>
-            <CoinDisplay size='28px' weight={500} color='received' coin='BTC'>{satoshis}</CoinDisplay>
-            <FiatDisplay size='20px' weight={300} color='received' coin='BTC'>{satoshis}</FiatDisplay>
-            <Text size='16px'>
-              <FormattedMessage id='modals.requestbitcoin.secondstep.message' defaultMessage='For "{message}"' values={{message: message}} />
-            </Text>
-            <LinkContainer>
-              <Text size='12px' weight={300}>{link}</Text>
-            </LinkContainer>
-          </Container>
-          <CopyToClipBoard text={link}>
-            <Button type='submit' nature={active ? 'copy' : 'primary'} fullwidth uppercase>
-              { active
-                ? <FormattedMessage id='modals.requestbitcoin.secondstep.copied' defaultMessage='Copied!' />
-                : <FormattedMessage id='modals.requestbitcoin.secondstep.copy' defaultMessage='Copy link' />
-              }
-            </Button>
-          </CopyToClipBoard>
-        </Form>
-      </ModalBody>
-      <ModalFooter>
+          <LinkContainer>
+            <Text size='12px' weight={300}>{link}</Text>
+          </LinkContainer>
+        </Container>
+        <CopyToClipBoard text={link}>
+          <Button type='submit' nature={active ? 'copy' : 'primary'} fullwidth uppercase>
+            { active
+              ? <FormattedMessage id='modals.requestbitcoin.secondstep.copied' defaultMessage='Copied!' />
+              : <FormattedMessage id='modals.requestbitcoin.secondstep.copy' defaultMessage='Copy link' />
+            }
+          </Button>
+        </CopyToClipBoard>
+      </Form>
+      <Footer>
         <Link onClick={previousStep} size='13px' weight={300}>
           <FormattedMessage id='scenes.requestbitcoin.secondstep.back' defaultMessage='Go Back' />
         </Link>
-      </ModalFooter>
-    </Modal>
+      </Footer>
+    </Fragment>
   )
 }