Change header button color based on theme

2 files changed, 17 insertions, 3 deletions

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index bce5ccec7..b0dabf98d 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -2,7 +2,7 @@ import _ from 'lodash';
 import * as React from 'react';
 import Headroom from 'react-headroom';
 import { Link as ReactRouterLink } from 'react-router-dom';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
@@ -55,7 +55,7 @@ const navItems: NavItem[] = [
     { id: 'blog', url: '#', text: 'Blog' },
 ];
 
-export class Header extends React.Component<HeaderProps, HeaderState> {
+class HeaderBase extends React.Component<HeaderProps, HeaderState> {
     public state = {
         isOpen: false,
     };
@@ -91,6 +91,7 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
 
     public render(): React.ReactNode {
         const { isOpen } = this.state;
+        const { theme } = this.props;
 
         return (
             <Headroom>
@@ -120,7 +121,15 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
                           {_.map(navItems, (link, index) => this.getNavItem(link, index))}
                         </StyledButtonWrap>
                     </Nav>
-                    <TradeButton href="#">Trade on 0x</TradeButton>
+
+                    <TradeButton
+                        bgColor={theme.headerButtonBg}
+                        color="#ffffff"
+                        href="#"
+                    >
+                        Trade on 0x
+                    </TradeButton>
+
                   </HeaderWrap>
               </StyledHeader>
             </Headroom>
@@ -128,6 +137,8 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
     }
 }
 
+export const Header = withTheme(HeaderBase);
+
 const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
     @media (max-width: ${BREAKPOINTS.mobile}) {
         min-height: ${props => props.isOpen ? '385px' : '70px'};
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index 395df68a9..5071b8ef4 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -31,6 +31,7 @@ const GLOBAL_THEMES: ThemeInterface = {
         dropdownBg: '#111A19',
         dropdownButtonBg: '#003831',
         dropdownColor: '#FFFFFF',
+        headerButtonBg: '#00AE99',
     },
     light: {
         bgColor: '#FFFFFF',
@@ -40,6 +41,7 @@ const GLOBAL_THEMES: ThemeInterface = {
         dropdownButtonBg: '#F3F6F4',
         dropdownColor: '#003831',
         dropdownBorderColor: '#E4E4E4',
+        headerButtonBg: '#003831',
     },
     gray: {
         bgColor: '#e0e0e0',
@@ -48,6 +50,7 @@ const GLOBAL_THEMES: ThemeInterface = {
         dropdownBg: '#FFFFFF',
         dropdownButtonBg: '#F3F6F4',
         dropdownColor: '#003831',
+        headerButtonBg: '#003831',
     },
 };