feat(exchange): adding login button on wallet login

packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts

@@ -36,6 +36,7 @@ type MessagesType = {
   'buttons.learn_more': 'Learn More'
   'buttons.learn_more_arrow': 'Learn more ->'
   'buttons.link_bank': 'Link a Bank Account'
+  'buttons.login': 'Login'
   'buttons.ok': 'OK'
   'buttons.preview_swap': 'Preview Swap'
   'buttons.receive': 'Receive'
@@ -2042,11 +2043,13 @@ type MessagesType = {
   'scenes.login.mobile': 'SMS Code'
   'scenes.login.gethelp': 'Get Help'
   'scenes.login.version': 'Version {version}'
+  'scenes.login.need.help': 'Need help?'
   'scenes.login.password': 'Password'
   'scenes.login.resendsms': 'Resend SMS'
   'scenes.login.sendguid': 'Request Wallet ID'
   'scenes.login.simplebuy.header': 'Buy Crypto With Credit Card'
   'scenes.login.wallet.link': "Don't have a wallet?"
+  'scenes.login.wallet.exchange': 'Looking for Exchange?'
   'scenes.login.wallet.message.sent': 'Message Sent'
   'scenes.login.wallet.connected.title': 'Mobile Device Connected'
   'scenes.login.wallet.connected.description_1': 'We sent your connected mobile device a notification. Open the app to auto-log in on the web.'

packages/blockchain-wallet-v4-frontend/src/layouts/Public/components/Footer/ExchangeLogin/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import styled from 'styled-components'
+
+import { Icon, Link, Text } from 'blockchain-info-components'
+
+const ExchangePill = styled.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background-color: ${props => props.theme.whiteFade100};
+  padding: 12px 32px;
+`
+
+const ExchangeLogin = () => {
+  return (
+    <>
+      <Link href='https://exchange.blockchain.com/trade/login'>
+        <ExchangePill>
+          <Icon name='blockchain-logo-circle' color='white' size='24px' />
+          &nbsp; &nbsp;
+          <Text size='16px' color='whiteFade600' weight={500}>
+            <FormattedMessage
+              id='scenes.login.wallet.exchange'
+              defaultMessage='Looking for Exchange?'
+            />
+          </Text>
+          &nbsp;
+          <Text size='16px' color='whiteFade900' weight={600}>
+            <FormattedMessage id='buttons.login' defaultMessage='Login' />
+          </Text>
+        </ExchangePill>
+      </Link>
+    </>
+  )
+}
+
+export default ExchangeLogin

packages/blockchain-wallet-v4-frontend/src/layouts/Public/components/Footer/Help/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import { LinkContainer } from 'react-router-bootstrap'
+import styled from 'styled-components'
+
+import { Text } from 'blockchain-info-components'
+
+const HelpContainer = styled.div`
+  display: inline-flex;
+  cursor: pointer;
+`
+
+const Help = () => {
+  return (
+    <HelpContainer>
+      <LinkContainer to='/help'>
+        <Text color='grey400' size='16px' weight={500}>
+          <FormattedMessage
+            id='scenes.login.need.help'
+            defaultMessage='Need Help?'
+          />
+        </Text>
+      </LinkContainer>
+    </HelpContainer>
+  )
+}
+export default Help

packages/blockchain-wallet-v4-frontend/src/layouts/Public/components/Footer/Version/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import styled from 'styled-components'
+
+import { Link } from 'blockchain-info-components'
+
+const VersionWrapper = styled.span`
+  margin-top: 4px;
+  margin-left: 16px;
+  margin-right: 16px;
+`
+
+// @ts-ignore
+const V = APP_VERSION
+
+const Version = () => (
+  <>
+    <VersionWrapper>
+      <Link
+        color='grey400'
+        href='https://github.com/blockchain/blockchain-wallet-v4-frontend/releases'
+        size='14px'
+        target='_blank'
+        weight={500}
+      >
+        <FormattedMessage
+          id='scenes.login.version'
+          defaultMessage='Version {version}'
+          values={{
+            version: V
+          }}
+        />
+      </Link>
+    </VersionWrapper>
+  </>
+)
+
+export default Version

packages/blockchain-wallet-v4-frontend/src/layouts/Public/components/Footer/index.tsx

@@ -1,38 +1,31 @@
 import React from 'react'
-import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 
-import { Link } from 'blockchain-info-components'
+import DropdownLanguage from './DropdownLanguage'
+import ExchangeLogin from './ExchangeLogin'
+import Help from './Help'
+import Version from './Version'
 
-const VersionWrapper = styled.span`
-  margin-top: 4px;
-  margin-left: 16px;
-  margin-right: 16px;
+const FooterInner = styled.div`
+  padding: 2rem;
+  padding-bottom: 0;
 `
 
-// @ts-ignore
-const V = APP_VERSION
+const Footer = ({ isLogin }: Props) => {
+  return (
+    <>
+      <FooterInner>{isLogin ? <ExchangeLogin /> : null}</FooterInner>
+      <FooterInner>
+        <DropdownLanguage color='grey400' size='16px' />
+        <Version />
+        <Help />
+      </FooterInner>
+    </>
+  )
+}
 
-const Footer = () => (
-  <>
-    <VersionWrapper>
-      <Link
-        color='grey400'
-        href='https://github.com/blockchain/blockchain-wallet-v4-frontend/releases'
-        size='14px'
-        target='_blank'
-        weight={500}
-      >
-        <FormattedMessage
-          id='scenes.login.version'
-          defaultMessage='Version {version}'
-          values={{
-            version: V
-          }}
-        />
-      </Link>
-    </VersionWrapper>
-  </>
-)
+type Props = {
+  isLogin: boolean
+}
 
 export default Footer

packages/blockchain-wallet-v4-frontend/src/layouts/Public/index.js → packages/blockchain-wallet-v4-frontend/src/layouts/Public/index.tsx

@@ -1,20 +1,20 @@
-import React from 'react'
+import React, { ComponentType } from 'react'
 import { Route } from 'react-router-dom'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 import Alerts from 'components/Alerts'
 import ErrorBoundary from 'providers/ErrorBoundaryProvider'
 import { media } from 'services/styles'
 
-// import AndroidAppBanner from './components/AndroidAppBanner'
-import DropdownLanguage from './components/DropdownLanguage'
 import Footer from './components/Footer'
+// import AndroidAppBanner from './components/AndroidAppBanner'
 import Header from './components/Header'
 
-const FooterWrapper = styled.div`
+const FooterContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
   width: 100%;
   margin: 6rem 0 2rem;
   ${media.mobile`
@@ -23,10 +23,6 @@ const FooterWrapper = styled.div`
   `}
 `
 
-const FooterInner = styled.div`
-  padding: 0 2rem;
-`
-
 const Wrapper = styled.div`
   background-color: ${props => props.theme.grey900};
   height: auto;
@@ -47,7 +43,7 @@ const HeaderContainer = styled.div`
   position: relative;
   width: 100%;
 `
-const ContentContainer = styled.div`
+const ContentContainer = styled.div<{ isLogin?: boolean }>`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -56,33 +52,54 @@ const ContentContainer = styled.div`
   max-width: 100%;
   box-sizing: border-box;
   margin: 0 16px;
+
+  ${props =>
+    props.isLogin &&
+    css`
+      margin-top: 80px;
+    `}
 `
 
-const PublicLayoutContainer = ({ component: Component, ...rest }) => (
-  <Route
-    {...rest}
-    render={matchProps => (
-      <Wrapper>
+const PublicLayoutContainer = ({
+  component: Component,
+  exact = false,
+  path
+}: Props) => {
+  const isLogin = path === '/login'
+
+  return (
+    <Route
+      path={path}
+      exact={exact}
+      render={matchProps => (
         <ErrorBoundary>
-          {/* TODO: STILL NEEDS DEV/QA */}
-          {/* <AndroidAppBanner /> */}
-          <Alerts />
-          <HeaderContainer>
-            <Header />
-          </HeaderContainer>
-          <ContentContainer>
-            <Component {...matchProps} />
-          </ContentContainer>
-          <FooterWrapper>
-            <FooterInner>
-              <DropdownLanguage color='grey400' size='16px' />
-              <Footer />
-            </FooterInner>
-          </FooterWrapper>
+          <Wrapper>
+            {/* TODO: STILL NEEDS DEV/QA */}
+            {/* <AndroidAppBanner /> */}
+            <Alerts />
+
+            <HeaderContainer>
+              <Header />
+            </HeaderContainer>
+
+            <ContentContainer isLogin={isLogin}>
+              <Component {...matchProps} />
+            </ContentContainer>
+
+            <FooterContainer>
+              <Footer isLogin={isLogin} />
+            </FooterContainer>
+          </Wrapper>
         </ErrorBoundary>
-      </Wrapper>
-    )}
-  />
-)
+      )}
+    />
+  )
+}
+
+type Props = {
+  component: ComponentType<any>
+  exact?: boolean,
+  path: string
+}
 
 export default PublicLayoutContainer

packages/blockchain-wallet-v4-frontend/src/scenes/Login/template.tsx

@@ -522,14 +522,14 @@ const Login = (props: InjectedFormProps<{}, Props> & Props) => {
           <LinkContainer data-e2e='signupLink' to='/signup'>
             <Link>
               <SubCard>
-                <Text size='16px' color='whiteFade600' weight={500}>
+                <Text size='16px' color='white' weight={500}>
                   <FormattedMessage
                     id='scenes.login.wallet.link'
                     defaultMessage="Don't have a wallet?"
                   />
                 </Text>
                 &nbsp;
-                <SignUpText size='16px' color='whiteFade900' weight={600}>
+                <SignUpText size='16px' color='white' weight={600}>
                   <FormattedMessage
                     id='buttons.signup'
                     defaultMessage='Sign Up'