fix(CoinifyUpgrade): change modal and copy

packages/blockchain-info-components/src/Images/Images.js

@@ -39,6 +39,7 @@ import getFreeCrypto from './img/get-free-crypto.png'
 import getFreeCrypto2 from './img/get-free-crypto@2x.png'
 import getFreeCrypto3 from './img/get-free-crypto@3x.png'
 import goldApproved from './img/gold-approved.svg'
+import goldVerified from './img/gold-verified.svg'
 import googleAuthenticator from './img/google-authenticator.png'
 import googlePlayBadge from './img/google-play-badge.svg'
 import halfBitcoin from './img/half-bitcoin.svg'
@@ -153,6 +154,7 @@ export default {
   'get-free-crypto2': getFreeCrypto2,
   'get-free-crypto3': getFreeCrypto3,
   'gold-approved': goldApproved,
+  'gold-verified': goldVerified,
   'google-authenticator': googleAuthenticator,
   'google-play-badge': googlePlayBadge,
   'half-bitcoin': halfBitcoin,

packages/blockchain-info-components/src/Modals/Modal.js

@@ -45,6 +45,8 @@ const selectWidth = size => {
   switch (size) {
     case 'auto':
       return 'auto'
+    case 'xsmall':
+      return '320px'
     case 'small':
       return '400px'
     case 'medium':

packages/blockchain-wallet-v4-frontend/src/modals/Exchange/IdentityVerification/Submitted/index.js

@@ -234,15 +234,15 @@ class Submitted extends React.PureComponent {
                     <HeartbeatLoader height='20px' width='20px' color='white' />
                   ) : (
                     <FormattedMessage
-                      id='modals.exchange.identityverification.submitted.claim'
-                      defaultMessage='Claim Free XLM'
+                      id='modals.exchange.identityverification.submitted.enterairdrop'
+                      defaultMessage='Enter Airdrop Program'
                     />
                   )}
                 </ClaimButton>
                 <NextStepsSubHeader>
                   <FormattedMessage
                     id='modals.exchange.identityverification.submitted.makesuretoclick2'
-                    defaultMessage='Make sure you click the button to become eligible to claim your free XLM.'
+                    defaultMessage='By entering the airdrop program you’ll become eligible to receive future airdrops.'
                   />
                 </NextStepsSubHeader>
               </React.Fragment>

packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/CoinifyUpgrade/index.js

@@ -6,89 +6,82 @@ import { FormattedMessage } from 'react-intl'
 
 import { actions } from 'data'
 import modalEnhancer from 'providers/ModalEnhancer'
-import { Button, Image, Modal, Text } from 'blockchain-info-components'
+import {
+  Button,
+  Icon,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  Text
+} from 'blockchain-info-components'
 
-const Body = styled.div`
+const AbsoluteModalHeader = styled(ModalHeader)`
+  position: absolute;
+  border: none;
+  > span {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+  z-index: 99;
+`
+const Body = styled(ModalBody)`
   display: flex;
-  flex-direction: column;
-  justify-content: center;
   align-items: center;
-  padding: 24px;
-  box-sizing: border-box;
+  justify-content: center;
+  flex-direction: column;
   text-align: center;
+  margin-top: 24px;
+`
+const Header = styled(Text)`
+  font-size: 24px;
+  font-weight: 600;
+  margin-top: 12px;
+  color: ${props => props.theme['gray-6']};
 `
 const Copy = styled(Text)`
   margin-top: 16px;
-`
-const UpgradeImage = styled(Image)`
-  display: block;
-  width: 100%;
-  margin-top: 24px;
-`
-const Footer = styled.div`
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: auto;
-  padding: 0 24px;
-  box-sizing: border-box;
+  font-weight: 500;
+  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 CoinifyUpgrade extends React.PureComponent {
   render () {
     const { position, total, close, actions } = this.props
     return (
-      <Modal size='small' position={position} total={total}>
+      <Modal size='xsmall' position={position} total={total}>
+        <AbsoluteModalHeader onClick={close} />
         <Body>
-          <Copy weight={400}>
+          <Icon name='cart-filled' color='brand-secondary' size='72px' />
+          <Header>
+            <FormattedMessage
+              id='modals.coinifyupgrade.header'
+              defaultMessage='Unlock Buy / Sell'
+            />
+          </Header>
+          <Copy>
             <FormattedMessage
-              id='modals.coinifyupgrade.coinifyupgradeairdrop2'
-              defaultMessage='Please take a few minutes to complete your profile to continue accessing Buy/Sell, and get at least $25 of free Stellar (XLM).'
+              id='modals.coinifyupgrade.coinifyupgradeairdropprogram'
+              defaultMessage='Complete your profile to access Buy / Sell, and be eligible for our Airdrop Program.'
             />
           </Copy>
-        </Body>
-        <Footer>
           <FooterButton
             nature='primary'
             size='18px'
             fullwidth
             onClick={() => actions.coinifyUpgradeSubmitClicked('sunriver')}
           >
             <FormattedMessage
-              defaultMessage='Complete My Profile Now'
-              id='modals.coinifyupgrade.completeprofile'
+              defaultMessage='Get Started'
+              id='modals.coinifyupgrade.getstarted'
             />
           </FooterButton>
-          <UpgradeImage name='identity-verification' />
-          <LaterButton
-            nature='primary'
-            size='18px'
-            fullwidth
-            onClick={close}
-            data-e2e='remindMeLaterButton'
-          >
-            <FormattedMessage
-              defaultMessage='Remind Me Later'
-              id='modals.coinifyupgrade.later'
-            />
-          </LaterButton>
-        </Footer>
+        </Body>
       </Modal>
     )
   }

packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/UpgradeForAirdrop/index.js

@@ -11,27 +11,36 @@ import {
   Button,
   Image,
   Modal,
+  ModalBody,
   ModalHeader,
   Text
 } from 'blockchain-info-components'
 
 const { CAMPAIGNS } = model.components.identityVerification
 
-const UpgradeForAirdropModalHeader = styled(ModalHeader)`
+const AbsoluteModalHeader = styled(ModalHeader)`
   position: absolute;
-  border: 0;
+  border: none;
   > span {
-    color: ${props => props.theme['gray-1']};
+    &:hover {
+      cursor: pointer;
+    }
   }
+  z-index: 99;
 `
-const Body = styled.div`
+const Body = styled(ModalBody)`
   display: flex;
-  flex-direction: column;
-  justify-content: center;
   align-items: center;
-  padding: 24px;
-  box-sizing: border-box;
+  justify-content: center;
+  flex-direction: column;
   text-align: center;
+  margin-top: 24px;
+`
+const Header = styled(Text)`
+  font-size: 24px;
+  font-weight: 600;
+  margin-top: 12px;
+  color: ${props => props.theme['gray-6']};
 `
 const Copy = styled(Text)`
   margin-top: 16px;
@@ -70,22 +79,15 @@ class UpgradeForAirdrop extends React.PureComponent {
     const { campaign, position, total, close, actions } = this.props
     return (
       <Modal size='small' position={position} total={total}>
-        <UpgradeForAirdropModalHeader onClose={close} />
-        <Image
-          width='100%'
-          name='get-free-crypto'
-          srcset={{
-            'get-free-crypto2': '2x',
-            'get-free-crypto3': '3x'
-          }}
-        />
+        <AbsoluteModalHeader onClose={close} />
         <Body>
-          <Text size='24px' weight={400}>
+          <Image name='gold-verified' />
+          <Header>
             <FormattedMessage
-              id='modals.upgradeforairdrop.getfreecrypto'
-              defaultMessage='Get Free Crypto'
+              id='modals.upgradeforairdrop.goforgold'
+              defaultMessage='Go for Gold'
             />
-          </Text>
+          </Header>
           <Copy weight={400}>
             <FormattedMessage
               id='modals.upgradeforairdrop.completeprofileforairdropfree'