aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/components/header.tsx17
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx3
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',
},
};