fix(Header): backgroundColor

packages/blockchain-info-components/src/Navigation/Colors/index.js

@@ -0,0 +1,19 @@
+/*https://davidwalsh.name/sass-color-variables-dont-suck*/
+
+export const textBlack = "#030E26"
+export const clay = "#222D38"
+export const porcelain = "#F4F6F7"
+export const silver = "#cecece"
+export const whiteAlpha75 = "rgba(255,255,255,0.75)"
+export const whiteAlpha10 = "rgba(255,255,255,0.1)"
+export const blackAlpha75 = "rgba(0,0,0,0.75)"
+export const blackAlpha05 = "rgba(0,0,0,0.05)"
+
+/* blues Dark to Light*/
+export const bigStone = "#152343"
+export const biscay = "#153A62"
+export const blueWood = "#27324B"
+export const orient = "#004A7C"
+export const azure = "#3558A8"
+export const cerulean = "#10ADE4"
+export const powderBlue = "#B2D5E5"

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

@@ -5,7 +5,7 @@ import { IntlProvider, FormattedMessage } from "react-intl"
 import Button from "./Button"
 import ButtonGroup from "./ButtonGroup"
 import MenuButton from "./MenuButton"
-import * as Color from "../Colors"
+import * as Color from "./Colors"
 import { trackEvent } from "./Events"
 import Logomark from "./Logomark"
 import { Image } from '../Images'
@@ -80,6 +80,7 @@ injectGlobal`
 const GlobalNav = styled.div.attrs({
   className: "flex-container"
 })`
+  background-color: ${props => props.backgroundColor ? props.backgroundColor : "transparent"};
   position: fixed;
   z-index: 100;
 
@@ -503,12 +504,13 @@ class Header extends PureComponent {
     let navVisibility = this.state.showNav ? "visible" : "hidden"
     let navScrollUp = this.state.scrollUp ? "scrollup" : ""
     let navClasses = [navVisibility, navScrollUp].join(" ")
+    let backgroundColor = Color.azure
 
     return (
       <ThemeProvider theme={themeObj}>
         <IntlProvider>
           <div>
-            <GlobalNav className={navClasses} navColor={themeObj.headerScroll}>
+            <GlobalNav className={navClasses} backgroundColor={backgroundColor} navColor={themeObj.headerScroll}>
               <NavWrapper>
                 <NavInner>
                   <Link href="/" event="header_logo">