feat(Footer): include new globals (only in footer for now)

packages/blockchain-info-components/src/Footer/index.js

@@ -1,11 +1,44 @@
 import React, { PureComponent } from 'react'
-import styled from 'styled-components'
-import Cookies from 'universal-cookie'
+import styled, { injectGlobal } from 'styled-components'
 
-import BlueLogo from '../Images/img/logomark.svg'
+import { Image } from '../Images'
 import { Select } from '../Select'
+import Normalize8 from '../Normalize.js'
+
+injectGlobal`
+    :root {
+        --textBlack: #030E26;
+        --shark: #24292E;
+        --porcelain: #F4F6F7;
+        --silver: #cecece;
+        --whiteAlpha75: rgba(255,255,255,0.75);
+        --whiteAlpha10: rgba(255,255,255,0.1);
+        --blackAlpha75: rgba(0,0,0,0.75);
+        --blackAlpha05: rgba(0,0,0,0.05);
+
+        /* blues */
+        --cerulean: #10ADE4;
+        --azure: #3558A8;
+        --biscay: #222D38;
+        --orient: #004A7C;
+        --powderBlue: #B2D5E5;
+        --blueWood: #27324B;
+
+        --siteMaxWidth: 75rem;
+        --contentMaxWidth: 62rem;
+        --copyMaxWidth: 42rem;
+
+        --smScreen: 48rem;
+        --mdScreen: 62rem;
+        --lgScreen: 75rem;
+
+        --smBorderRadius: 2px;
+        --lgBorderRadius: 4px;
+    }
+`
 
 const GlobalFooter = styled.div`
+  ${Normalize8}
   background: var(--porcelain);
   position: relative;
   padding-top: 4rem;
@@ -24,6 +57,7 @@ const Container = styled.div.attrs({
     max-width: var(--siteMaxWidth);
     padding: 1.25rem 2rem;
     color: var(--textBlack);
+    margin: 0 auto;
 
     a {
         transition: color .5s, opacity: .5s;
@@ -133,7 +167,7 @@ const SocialLinks = styled.a.attrs({
   height: 2.5rem;
   width: 2.5rem;
   border-radius: 100%;
-  background: var(--silver);
+  background-color: var(--silver) !important;
   color: white;
   transition: all 0.5s;
   margin-right: 0.75rem;
@@ -144,7 +178,7 @@ const SocialLinks = styled.a.attrs({
   }
 
   &:hover {
-    background: var(--azure);
+    background: var(--azure) !important;
 
     .social-icons {
       opacity: 1;
@@ -162,33 +196,12 @@ const SocialLinks = styled.a.attrs({
   }
 `
 
-class Footer extends PureComponent {
-  constructor (props) {
-    super(props)
-    this.cookies = new Cookies()
-    const { intl, router } = this.props
-
-    this.lang = this.cookies.get('blockchainlang')
-
-    if (intl) {
-      this.lang = this.lang || intl.locale
-    } else {
-      this.lang = this.lang || 'en'
-    }
-
-    // let langPathMatch = router.asPath.match(/^\/([a-z]{2})\//)
-    // let langPath = langPathMatch && langPathMatch[1]
-    // if (langPath && langPath in publicRuntimeConfig.supportedLanguages) {
-    //   this.lang = langPath
-    // }
-  }
-
-  handleDropdown (value) {
-    this.cookies.set('blockchainlang', value, { path: '/' })
-    // trigger page refresh
-    window.location = window.location
-  }
+const BlueLogo = styled(Image)`
+  float: right;
+  margin-bottom: 20px;
+`
 
+class Footer extends PureComponent {
   render () {
     return (
       <GlobalFooter>
@@ -282,7 +295,7 @@ class Footer extends PureComponent {
             </Column>
 
             <Column>
-              {BlueLogo}
+              <BlueLogo name='blue-logo' height='50px' />
               <Copyright>
                 © {new Date().getFullYear()} BLOCKCHAIN LUXEMBOURG S.A.
               </Copyright>
@@ -296,13 +309,13 @@ class Footer extends PureComponent {
             />
             <SocialLinksWrap>
               <SocialLinks href='https://twitter.com/blockchain'>
-                <img src='/static/img/footer/twitter.svg' />
+                <Image name='twitter-white' />
               </SocialLinks>
               <SocialLinks href='https://www.linkedin.com/company/blockchain/'>
-                <img src='/static/img/footer/linkedin.svg' />
+                <Image name='linkedin-white' />
               </SocialLinks>
               <SocialLinks href='https://www.facebook.com/blockchain/'>
-                <img src='/static/img/footer/facebook.svg' />
+                <Image name='facebook-white' />
               </SocialLinks>
             </SocialLinksWrap>
           </LangNav>

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

@@ -16,13 +16,13 @@ import checkHelper from './img/check-helper.svg'
 import coinifyLogo from './img/coinify-logo.svg'
 import emptySearch from './img/empty-search.svg'
 import emptyTx from './img/empty-tx.svg'
+import facebookWhite from './img/facebook-white.svg'
 import googleAuthenticator from './img/google-authenticator.png'
 import googlePlayBadge from './img/google-play-badge.png'
 import halfBitcoin from './img/half-bitcoin.svg'
 import halfBitcoincash from './img/half-bitcoincash.svg'
 import halfEther from './img/half-ether.svg'
-import landingPageBannerOverlay from './img/landing-page-banner-overlay.jpg'
-import landingPageBannerSmOverlay from './img/landing-page-banner-sm-overlay.jpg'
+import linkedinWhite from './img/linkedin-white.svg'
 import microDepositsWhole from './img/micro-deposits-whole.svg'
 import printer from './img/printer.svg'
 import qrCode from './img/qr-code.png'
@@ -32,6 +32,7 @@ import shapeshiftLogo from './img/shapeshift-logo.png'
 import smartphone from './img/smartphone.png'
 import sfoxLogo from './img/sfox-logo.png'
 import sophisticated from './img/sophisticated.svg'
+import twitterWhite from './img/twitter-white.svg'
 import v4Welcome from './img/v4-welcome.jpg'
 import walletV3Backup from './img/wallet-v3-backup.jpg'
 import walletV3FundManagement from './img/wallet-v3-fund-management.jpg'
@@ -58,13 +59,13 @@ export default {
   'coinify-logo': coinifyLogo,
   'empty-search': emptySearch,
   'empty-tx': emptyTx,
+  'facebook-white': facebookWhite,
   'google-authenticator': googleAuthenticator,
   'google-play-badge': googlePlayBadge,
   'half-bitcoin': halfBitcoin,
   'half-bitcoincash': halfBitcoincash,
   'half-ether': halfEther,
-  'landing-page-banner-overlay': landingPageBannerOverlay,
-  'landing-page-banner-sm-overlay': landingPageBannerSmOverlay,
+  'linkedin-white': linkedinWhite,
   'micro-deposits-whole': microDepositsWhole,
   'printer': printer,
   'qr-code': qrCode,
@@ -74,6 +75,7 @@ export default {
   'shapeshiftLogo': shapeshiftLogo,
   'smartphone': smartphone,
   'sophisticated': sophisticated,
+  'twitter-white': twitterWhite,
   'v4-welcome': v4Welcome,
   'wallet-v3-backup': walletV3Backup,
   'wallet-v3-fund-management': walletV3FundManagement,