fix(XLM): edit UpgradeForAirdrop

blockchain · Jun 3, 2019 · 1d96a94 · 1d96a94
1 parent 4f9de54
commit 1d96a94
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 54 deletions.
diff --git a/...in-wallet-v4-frontend/src/components/TransactionListItem/__snapshots__/index.spec.js.snap b/...in-wallet-v4-frontend/src/components/TransactionListItem/__snapshots__/index.spec.js.snap
@@ -65,7 +65,6 @@ exports[`ListItemContainer renders correctly 1`] = `
     preferencesActions={
       Object {
         "hideAirdropClaimModal": [Function],
-        "hideAirdropReminderModal": [Function],
         "hideKycCompleted": [Function],
         "hideKycGetStarted": [Function],
         "hideSwapBanner": [Function],

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/AirdropClaim/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/AirdropClaim/index.js
@@ -47,6 +47,8 @@ const Header = styled(Text)`
 const Copy = styled(Text)`
   margin-top: 16px;
   font-weight: 500;
+  line-height: 1.6;
+  max-width: 300px;
   color: ${props => props.theme['gray-6']};
 `
 const FooterButton = styled(Button)`
@@ -74,15 +76,15 @@ class AirdropClaim extends React.PureComponent {
       <Modal size='small' position={position} total={total}>
         <AbsoluteModalHeader onClose={close} />
         <Body>
-          <Image width='52px%' name='gold-verified' />
+          <Image width='52px' name='gold-verified' />
           <Header>
             <FormattedMessage
               id='modals.airdropclaim.claimairdrop'
               defaultMessage='Claim Your Airdrop'
             />
           </Header>
           {isCampaignTagged ? (
-            <Copy weight={400}>
+            <Copy>
               <FormattedMessage
                 id='modals.airdropclaim.thanksforparticipating'
                 defaultMessage='Thanks for claiming your airdrop. You should be receiving your {coinName} ({coinCode}) soon!'

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/CoinifyUpgrade/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/CoinifyUpgrade/index.js
@@ -42,6 +42,7 @@ const Header = styled(Text)`
 const Copy = styled(Text)`
   margin-top: 16px;
   font-weight: 500;
+  line-height: 1.6;
   color: ${props => props.theme['gray-6']};
 `
 const FooterButton = styled(Button)`

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/UpgradeForAirdrop/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/UpgradeForAirdrop/index.js
@@ -1,11 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
-import { prop } from 'ramda'
 import { compose, bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { FormattedMessage } from 'react-intl'
 
-import { actions, model } from 'data'
+import { actions } from 'data'
 import modalEnhancer from 'providers/ModalEnhancer'
 import {
   Button,
@@ -16,8 +15,6 @@ import {
   Text
 } from 'blockchain-info-components'
 
-const { CAMPAIGNS } = model.components.identityVerification
-
 const AbsoluteModalHeader = styled(ModalHeader)`
   position: absolute;
   border: none;
@@ -44,30 +41,15 @@ const Header = styled(Text)`
 `
 const Copy = styled(Text)`
   margin-top: 16px;
-`
-const Footer = styled.div`
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: auto;
-  padding: 0 24px 32px 24px;
-  box-sizing: border-box;
+  font-weight: 500;
+  line-height: 1.6;
+  max-width: 300px;
+  color: ${props => props.theme['gray-6']};
 `
 const FooterButton = styled(Button)`
-  height: auto;
-  font-weight: 400;
-  padding: 15px 0;
-`
-const LaterButton = styled(FooterButton)`
-  position: absolute;
-  background-color: rgba(0, 0, 0, 0);
-  border: none;
-  top: calc(100% + 9px);
-  width: calc(100% - 48px);
-  &:hover {
-    background-color: rgba(0, 0, 0, 0);
-    border: none;
-  }
+  height: 56px;
+  font-weight: 500;
+  margin-top: 24px;
 `
 
 class UpgradeForAirdrop extends React.PureComponent {
@@ -81,49 +63,31 @@ class UpgradeForAirdrop extends React.PureComponent {
       <Modal size='small' position={position} total={total}>
         <AbsoluteModalHeader onClose={close} />
         <Body>
-          <Image name='gold-verified' />
+          <Image width='52px' name='gold-verified' />
           <Header>
             <FormattedMessage
               id='modals.upgradeforairdrop.goforgold'
               defaultMessage='Go for Gold'
             />
           </Header>
-          <Copy weight={400}>
+          <Copy>
             <FormattedMessage
-              id='modals.upgradeforairdrop.completeprofileforairdropfree'
-              defaultMessage='Upgrade your profile from Silver to Gold, raise your trading limits and get free {coinName} ({coinCode}).'
-              values={{
-                coinName: prop('coinName', CAMPAIGNS[campaign]),
-                coinCode: prop('coinCode', CAMPAIGNS[campaign])
-              }}
+              id='modals.upgradeforairdrop.completeprofileforairdropprogram'
+              defaultMessage='Complete your profile to start instantly trading crypto from the security of your wallet and become eligible for our Airdrop Program.'
             />
           </Copy>
-        </Body>
-        <Footer>
           <FooterButton
             nature='primary'
             size='18px'
             fullwidth
             onClick={() => actions.upgradeForAirdropSubmitClicked(campaign)}
           >
             <FormattedMessage
-              defaultMessage='Upgrade Now'
-              id='modals.upgradeforairdrop.upgradenow'
+              defaultMessage='Complete Profile'
+              id='modals.upgradeforairdrop.completeprofile'
             />
           </FooterButton>
-          <LaterButton
-            nature='primary'
-            size='18px'
-            fullwidth
-            onClick={close}
-            data-e2e='remindMeLaterButton'
-          >
-            <FormattedMessage
-              defaultMessage='Remind Me Later'
-              id='modals.upgradeforairdrop.later'
-            />
-          </LaterButton>
-        </Footer>
+        </Body>
       </Modal>
     )
   }