feat(simple-buy): welcome modal redesign

blockchain · Mar 27, 2020 · adc7e3f · adc7e3f
1 parent afac5de
commit adc7e3f
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 49 deletions.
diff --git a/packages/blockchain-info-components/src/Images/Images.ts b/packages/blockchain-info-components/src/Images/Images.ts
@@ -15,6 +15,7 @@ import buySellColor from './img/buy-sell-color.svg'
 import buySellGrey from './img/buy-sell-grey.svg'
 import buySellLearnMore from './img/buy-sell-learn-more.png'
 import buySellLearnMore2 from './img/buy-sell-learn-more@2x.png'
+import buyWallet from './img/buy-wallet.svg'
 import chartPlaceholder from './img/chart-placeholder.png'
 import checkmarkGreen from './img/checkmark-green.svg'
 import closeError from './img/close-error.svg'
@@ -125,6 +126,7 @@ const Images = {
   'buy-sell-grey': buySellGrey,
   'buy-sell-learn-more': buySellLearnMore,
   'buy-sell-learn-more2': buySellLearnMore2,
+  'buy-wallet': buyWallet,
   'chart-placeholder': chartPlaceholder,
   'checkmark-green': checkmarkGreen,
   coins: coins,

diff --git a/packages/blockchain-info-components/src/Images/img/buy-wallet.svg b/packages/blockchain-info-components/src/Images/img/buy-wallet.svg
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/Welcome/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/Welcome/index.tsx
@@ -30,38 +30,47 @@ const Column = styled.div`
 const Header = styled.div`
   display: flex;
   align-items: center;
-  margin-bottom: 22px;
+  margin-bottom: 40px;
 
   span {
     margin-left: 8px;
   }
 `
-
-const HeaderDesc = styled(Text)`
-  margin-bottom: 56px;
-`
-
-const Card = styled(Column)`
+const ContentContainer = styled(Column)`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  margin-bottom: 40px;
+  margin-bottom: 70px;
   padding: 40px;
-  box-sizing: border-box;
-  border: 1px solid ${({ theme }) => theme.grey100};
-  border-radius: 16px;
+  text-align: center;
+`
+const IconBackground = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+  background-color: ${props => props.theme.blue000};
+  border-radius: 48px;
 `
 
 const Title = styled(Text)`
   margin: 26px 0 13px;
 `
 
-const Content = styled(Text)`
-  margin-bottom: 24px;
-  width: 240px;
-  text-align: center;
+const ContentTextWrapper = styled(Text)`
+  margin-bottom: 50px;
+`
+const ButtonWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin-top: 5px;
+  & > :first-child {
+    margin-bottom: 15px;
+  }
 `
 
 class WelcomeContainer extends React.PureComponent<Props> {
@@ -104,26 +113,25 @@ class WelcomeContainer extends React.PureComponent<Props> {
               />
             </Text>
           </Header>
-          <HeaderDesc weight={500}>
-            <FormattedMessage
-              id='modals.wallet.welcome.desc'
-              defaultMessage='Let’s get your wallet set up. You can quickly buy crypto now or do this later.'
-            />
-          </HeaderDesc>
-          <Card>
-            <Icon color='blue600' name='cart-filled' size='32px' />
-            <Title lineHeight='30px' size='20px' weight={600}>
+          <ContentContainer>
+            <IconBackground>
+              <Icon color='blue600' name='cart-filled' size='25px' />
+            </IconBackground>
+            <Title size='20px' weight={600}>
               <FormattedMessage
                 id='modals.wallet.welcome.sb.title'
-                defaultMessage='Buy Crypto'
+                defaultMessage='Own Crypto in a Few Minutes'
               />
             </Title>
-            <Content lineHeight='24px' weight={500}>
+            <ContentTextWrapper color='grey600' size='14x' weight={500}>
               <FormattedMessage
-                id='modals.wallet.welcome.sb.content'
-                defaultMessage='We can help you buy in just a few simple steps'
+                id='modals.wallet.welcome.sb.verify'
+                defaultMessage='Verify your identity and buy crypto with a bank transfer '
               />
-            </Content>
+            </ContentTextWrapper>
+            <Image name='buy-wallet' width='282px' height='165px' />
+          </ContentContainer>
+          <ButtonWrapper>
             <Button
               capitalize
               data-e2e='toSimpleBuyModal'
@@ -138,36 +146,21 @@ class WelcomeContainer extends React.PureComponent<Props> {
                 defaultMessage='Buy Crypto Now'
               />
             </Button>
-          </Card>
-          <Card>
-            <Icon color='blue600' name='wallet-filled' size='32px' />
-            <Title lineHeight='30px' size='20px' weight={600}>
-              <FormattedMessage
-                id='modals.wallet.welcome.tour.title'
-                defaultMessage='Tour the Wallet'
-              />
-            </Title>
-            <Content lineHeight='24px' weight={500}>
-              <FormattedMessage
-                id='modals.wallet.welcome.tour.content'
-                defaultMessage='Explore your new Blockchain Wallet.'
-              />
-            </Content>
             <Button
               capitalize
               data-e2e='toWalletTour'
               fullwidth
               height='48px'
-              nature='grey800'
+              nature='empty-secondary'
               onClick={this.handleTourClick}
               size='16px'
             >
               <FormattedMessage
-                id='modals.wallet.welcome.tour.button'
-                defaultMessage='Get Started'
+                id='modals.wallet.welcome.sb.skip'
+                defaultMessage='Skip'
               />
             </Button>
-          </Card>
+          </ButtonWrapper>
         </FlyoutWrapper>
       </Flyout>
     )