aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-01 00:07:51 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-01 00:07:51 +0800
commit435d9e47e330822a4df2f8e1787e98b60df3bc0f (patch)
tree7c029652c6dea4de11eff4636e0d03a0489e3f6d
parent5c12e664a96296dae720433deb8bf98b10a5fbcb (diff)
downloaddexon-sol-tools-435d9e47e330822a4df2f8e1787e98b60df3bc0f.tar
dexon-sol-tools-435d9e47e330822a4df2f8e1787e98b60df3bc0f.tar.gz
dexon-sol-tools-435d9e47e330822a4df2f8e1787e98b60df3bc0f.tar.bz2
dexon-sol-tools-435d9e47e330822a4df2f8e1787e98b60df3bc0f.tar.lz
dexon-sol-tools-435d9e47e330822a4df2f8e1787e98b60df3bc0f.tar.xz
dexon-sol-tools-435d9e47e330822a4df2f8e1787e98b60df3bc0f.tar.zst
dexon-sol-tools-435d9e47e330822a4df2f8e1787e98b60df3bc0f.zip
ThemeProvider
-rw-r--r--packages/website/ts/@next/components/button.tsx2
-rw-r--r--packages/website/ts/@next/components/footer.tsx14
-rw-r--r--packages/website/ts/@next/components/header.tsx5
-rw-r--r--packages/website/ts/@next/components/logo.tsx11
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx4
-rw-r--r--packages/website/ts/@next/pages/about/mission.tsx2
-rw-r--r--packages/website/ts/@next/pages/why.tsx2
7 files changed, 27 insertions, 13 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 422c44126..2569c39c5 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -34,7 +34,7 @@ const StyledButton = styled.button<ButtonInterface>`
display: ${props => props.inline && 'inline-block'};
background-color: ${props => !props.transparent && colors.brandLight};
border-color: ${props => props.transparent && '#6a6a6a'};
- color: ${colors.white};
+ color: ${props => props.color || props.theme.textColor};
text-align: center;
padding: 14px 22px;
text-decoration: none;
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index 0aff4e840..b431ba9e5 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -1,6 +1,7 @@
import * as _ from 'lodash';
import * as React from 'react';
import styled from 'styled-components';
+import { Link as ReactRouterLink } from 'react-router-dom';
import { colors } from 'ts/style/colors';
@@ -31,7 +32,7 @@ const linkRows: LinkRows[] = [
{
heading: 'Products',
links: [
- { url: '#', text: '0x Instant' },
+ { url: '/next/0x-instant', text: '0x Instant' },
{ url: '#', text: '0x Launch Kit' },
],
},
@@ -61,7 +62,7 @@ export const Footer: React.StatelessComponent<FooterInterface> = ({}) => (
noMargin>
<Wrap>
<Column colWidth="1/2" noPadding>
- <Logo />
+ <Logo light />
<NewsletterForm />
</Column>
@@ -89,7 +90,7 @@ const LinkList = (props: LinkListProps) => (
<ul>
{_.map(props.links, (link, index) => (
<li key={`fl-${index}`}>
- <Link href={link.url}>
+ <Link to={link.url}>
{link.text}
</Link>
</li>
@@ -97,7 +98,10 @@ const LinkList = (props: LinkListProps) => (
</ul>
);
-const FooterWrap = Section.withComponent('footer');
+const FooterSection = Section.withComponent('footer');
+const FooterWrap = styled(FooterSection)`
+ color: ${colors.white};
+`;
const RowHeading = styled.h3`
color: ${colors.white};
@@ -107,7 +111,7 @@ const RowHeading = styled.h3`
margin-bottom: 1.25em;
`;
-const Link = styled.a`
+const Link = styled(ReactRouterLink)`
color: rgba(255, 255, 255, 0.5);
display: block;
font-size: 16px;
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 0f47588bd..0e7d8f5cd 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -38,7 +38,10 @@ const Link: React.StatelessComponent<LinkProps> = props => {
export const Header: React.StatelessComponent<HeaderProps> = ({}) => (
<Container>
<StyledHeader>
- <Logo/>
+ <Link href="/next">
+ <Logo/>
+ </Link>
+
<Links>
{_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)}
</Links>
diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx
index 1a02e211e..eade90c68 100644
--- a/packages/website/ts/@next/components/logo.tsx
+++ b/packages/website/ts/@next/components/logo.tsx
@@ -5,18 +5,25 @@ import LogoIcon from '../icons/logo-with-type.svg';
interface LogoInterface {
// showType: boolean;
+ light?: any;
}
+
+// Note let's refactor this
const StyledLogo = styled.div`
text-align: left;
`;
const Icon = styled(LogoIcon)`
flex-shrink: 0;
+
+ path {
+ fill: ${props => props.light ? '#fff' : props.theme.textColor};
+ }
`;
-export const Logo: React.StatelessComponent<LogoInterface> = ({}) => (
+export const Logo: React.StatelessComponent<LogoInterface> = (props) => (
<StyledLogo>
- <Icon />
+ <Icon {...props} />
</StyledLogo>
);
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index 6c29b3c43..7529e90c9 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -27,11 +27,11 @@ const GLOBAL_THEMES: GlobalThemes = {
},
light: {
bgColor: '#FFFFFF',
- textColor: '#FFFFFF',
+ textColor: '#000000',
},
gray: {
bgColor: '#e0e0e0',
- textColor: '#FFFFFF',
+ textColor: '#000000',
},
}
diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx
index 8870a1afa..902612703 100644
--- a/packages/website/ts/@next/pages/about/mission.tsx
+++ b/packages/website/ts/@next/pages/about/mission.tsx
@@ -14,7 +14,7 @@ import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg';
import LongTermImpactIcon from 'ts/@next/icons/illustrations/long-term-impact.svg';
export const NextAboutMission = () => (
- <SiteWrap>
+ <SiteWrap theme="light">
<Section>
<Wrap>
<Column colWidth="1/3">
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index 081cf8315..f9dff725b 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/@next/pages/why.tsx
@@ -33,7 +33,7 @@ export const NextWhy = () => (
</Column>
<Column colWidth="1/3">
- <LogoOutlined width="150" />
+ <ProtocolIcon width="150" />
<Heading>Shared Networked Liquidity</Heading>
<Paragraph>0x is building a layer of networked liquidity that will lower the barriers to entry. By enabling businesses to tap into a shared pool of digital assets, it will create a more stable financial system.</Paragraph>
</Column>