aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-11 22:16:59 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-11 22:16:59 +0800
commit1d6e66d93708e5fcab392137a95ca40a31ad6881 (patch)
tree4054d19bef6fc6be7dc9981c36c46c75e2d2aa3b /packages
parent79d31895fb634c87a11fbe7250035a4bdc24acc2 (diff)
downloaddexon-sol-tools-1d6e66d93708e5fcab392137a95ca40a31ad6881.tar
dexon-sol-tools-1d6e66d93708e5fcab392137a95ca40a31ad6881.tar.gz
dexon-sol-tools-1d6e66d93708e5fcab392137a95ca40a31ad6881.tar.bz2
dexon-sol-tools-1d6e66d93708e5fcab392137a95ca40a31ad6881.tar.lz
dexon-sol-tools-1d6e66d93708e5fcab392137a95ca40a31ad6881.tar.xz
dexon-sol-tools-1d6e66d93708e5fcab392137a95ca40a31ad6881.tar.zst
dexon-sol-tools-1d6e66d93708e5fcab392137a95ca40a31ad6881.zip
Change header button color based on theme
Diffstat (limited to 'packages')
-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',
},
};