diff options
| -rw-r--r-- | packages/website/ts/@next/components/button.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/footer.tsx | 14 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/header.tsx | 5 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/logo.tsx | 11 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/siteWrap.tsx | 4 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/about/mission.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/why.tsx | 2 |
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> |