feat(public background): new public background

blockchain · Sep 21, 2020 · 41d1a52 · 41d1a52
1 parent 62b69ae
commit 41d1a52
Show file tree

Hide file tree

Showing 10 changed files with 2,126 additions and 275 deletions.
diff --git a/packages/blockchain-info-components/src/Images/Images.ts b/packages/blockchain-info-components/src/Images/Images.ts
@@ -9,6 +9,7 @@ import allowCamera from './img/allow-camera.png'
 import allowCamera2 from './img/allow-camera@2x.png'
 import allowCamera3 from './img/allow-camera@3x.png'
 import appleAppStoreBadge from './img/apple-app-store-badge.svg'
+import bgIllo from './img/bg-illo.svg'
 import bitpayLogo from './img/bitpay-logo.svg'
 import blankCard from './img/blank-card.svg'
 import blockchainIcon from './img/bc-icon.svg'
@@ -124,6 +125,7 @@ const Images = {
   'allow-camera2': allowCamera2,
   'allow-camera3': allowCamera3,
   'apple-app-store-badge': appleAppStoreBadge,
+  'bg-illo': bgIllo,
   'bitpay-logo': bitpayLogo,
   'blank-card': blankCard,
   'blockchain-logo': blockchainLogo,

diff --git a/packages/blockchain-info-components/src/Images/img/bg-illo.svg b/packages/blockchain-info-components/src/Images/img/bg-illo.svg
diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json b/packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json
@@ -1634,7 +1634,7 @@
   "scenes.login.resendsms": "Resend SMS",
   "scenes.login.sendguid": "Send my Wallet ID",
   "scenes.login.wallet.link": "Don't have a wallet?",
-  "scenes.login.wallet.signup": "Sign Up",
+  "scenes.login.wallet.signup": "Sign up Now",
   "scenes.login.welcome": "Welcome back!",
   "scenes.login.wrong_password": "Error decrypting wallet. Wrong password",
   "scenes.login.yubikey": "Yubikey",

diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts b/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts
@@ -1717,7 +1717,7 @@ type MessagesType = {
   'scenes.login.resendsms': 'Resend SMS'
   'scenes.login.sendguid': 'Send my Wallet ID'
   'scenes.login.wallet.link': "Don't have a wallet?"
-  'scenes.login.wallet.signup': 'Sign Up'
+  'scenes.login.wallet.signup': 'Sign up Now'
   'scenes.login.welcome': 'Welcome back!'
   'scenes.login.wrong_password': 'Error decrypting wallet. Wrong password'
   'scenes.login.yubikey': 'Yubikey'

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/DropdownLanguage/index.js b/packages/blockchain-wallet-v4-frontend/src/components/DropdownLanguage/index.js
@@ -13,7 +13,7 @@ class DropdownLanguageContainer extends React.PureComponent {
   }
 
   render () {
-    const { currentLanguage, languages } = this.props
+    const { currentLanguage, languages, color } = this.props
     const languageList = languages.map(lang => {
       return {
         text: lang.name,
@@ -24,7 +24,7 @@ class DropdownLanguageContainer extends React.PureComponent {
 
     return (
       <SimpleDropdown
-        color='whiteFade900'
+        color={color || 'gray400'}
         uppercase={false}
         items={languageList}
         selectedValue={currentLanguage}

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Public/Footer/index.tsx b/packages/blockchain-wallet-v4-frontend/src/layouts/Public/Footer/index.tsx
@@ -1,27 +1,41 @@
-import { Link } from 'blockchain-info-components'
 import React from 'react'
+
+import { FormattedMessage } from 'react-intl'
+import { Link } from 'blockchain-info-components'
+import { LinkContainer } from 'react-router-bootstrap'
 import styled from 'styled-components'
 
 const VersionWrapper = styled.span`
   margin-top: 4px;
   margin-left: 16px;
+  margin-right: 16px;
 `
 
 // @ts-ignore
 const V = APP_VERSION
 
 const Footer = () => (
-  <VersionWrapper>
-    <Link
-      color='whiteFade600'
-      href='https://github.com/blockchain/blockchain-wallet-v4-frontend/releases'
-      size='14px'
-      target='_blank'
-      weight={500}
-    >
-      Version {V}
-    </Link>
-  </VersionWrapper>
+  <>
+    <VersionWrapper>
+      <Link
+        color='grey400'
+        href='https://github.com/blockchain/blockchain-wallet-v4-frontend/releases'
+        size='16px'
+        target='_blank'
+        weight={500}
+      >
+        Version {V}
+      </Link>
+    </VersionWrapper>
+    <LinkContainer to='/help'>
+      <Link size='16px' weight={600} color='grey400' data-e2e='loginGetHelp'>
+        <FormattedMessage
+          id='scenes.login.needhelp'
+          defaultMessage='Need some help?'
+        />
+      </Link>
+    </LinkContainer>
+  </>
 )
 
 export default Footer
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Public/Header/index.tsx b/packages/blockchain-wallet-v4-frontend/src/layouts/Public/Header/index.tsx
@@ -9,8 +9,17 @@ import styled from 'styled-components'
 const NavbarStyled = styled(Navbar)`
   padding: 0 16px;
   box-sizing: border-box;
-  background-color: ${props => props.theme.blue900};
+  background-color: ${props => props.theme.grey900};
+  background-image: url('/img/bg-illo.svg');
 `
+
+const NavbarBrandStyled = styled(NavbarBrand)`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: center;
+`
+
 const BlockchainLogoImage = styled(Image)`
   width: 240px;
   display: block;
@@ -21,22 +30,23 @@ const BlockchainLogoImage = styled(Image)`
 
 const PublicBrand = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  justify-content: center;
 `
 
 const Header = () => (
-  <React.Fragment>
-    <NavbarStyled height='90px'>
-      <NavbarBrand>
+  <>
+    <NavbarStyled height='112px'>
+      <NavbarBrandStyled>
         <PublicBrand>
           <Link href='https://www.blockchain.com'>
             <BlockchainLogoImage name='blockchain-logo' height='24px' />
           </Link>
         </PublicBrand>
-      </NavbarBrand>
+      </NavbarBrandStyled>
     </NavbarStyled>
     <Announcements type='service' alertArea='public' />
-  </React.Fragment>
+  </>
 )
 
 export default Header
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Public/index.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Public/index.js
@@ -25,7 +25,7 @@ const FooterInner = styled.div`
 `
 
 const Wrapper = styled.div`
-  background-color: ${props => props.theme.blue900};
+  background-color: ${props => props.theme.grey900};
   height: auto;
   min-height: 100%;
   width: 100%;
@@ -51,7 +51,7 @@ const ContentContainer = styled.div`
   align-items: center;
   padding: 0 32px;
   z-index: 1;
-  max-width: 100%;
+  width: 100%;
   ${media.mobile`
     padding: 0 15px;
   `}
@@ -72,7 +72,7 @@ const PublicLayoutContainer = ({ component: Component, ...rest }) => (
           </ContentContainer>
           <FooterWrapper>
             <FooterInner>
-              <DropdownLanguage color='whiteFade900' />
+              <DropdownLanguage color='grey400' />
               <Footer />
             </FooterInner>
           </FooterWrapper>