aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-13 20:18:51 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-13 20:18:51 +0800
commitd2e29fb081ca4b55912cfb2c004c441acda75ea0 (patch)
treeac1655952314c08b4767ef18c2d10213d5a71344 /packages/website/ts/@next
parentb4b1d54e49ff3d6c146b257ddb918fca5ddb1329 (diff)
downloaddexon-0x-contracts-d2e29fb081ca4b55912cfb2c004c441acda75ea0.tar.gz
dexon-0x-contracts-d2e29fb081ca4b55912cfb2c004c441acda75ea0.tar.zst
dexon-0x-contracts-d2e29fb081ca4b55912cfb2c004c441acda75ea0.zip
Refactors mobile nav, theming
Diffstat (limited to 'packages/website/ts/@next')
-rw-r--r--packages/website/ts/@next/components/hamburger.tsx2
-rw-r--r--packages/website/ts/@next/components/logo.tsx7
-rw-r--r--packages/website/ts/@next/components/mobileNav.tsx72
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx3
-rw-r--r--packages/website/ts/@next/constants/globalStyle.tsx5
5 files changed, 71 insertions, 18 deletions
diff --git a/packages/website/ts/@next/components/hamburger.tsx b/packages/website/ts/@next/components/hamburger.tsx
index 97c9ba26d..28d58ab82 100644
--- a/packages/website/ts/@next/components/hamburger.tsx
+++ b/packages/website/ts/@next/components/hamburger.tsx
@@ -33,7 +33,7 @@ const StyledHamburger = styled.button<Props>`
span {
display: block;
- background-color: #fff;
+ background-color: ${props => props.theme.textColor};
width: 100%;
height: 2px;
margin-bottom: 5px;
diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx
index 06742664e..02e6e65f5 100644
--- a/packages/website/ts/@next/components/logo.tsx
+++ b/packages/website/ts/@next/components/logo.tsx
@@ -5,7 +5,6 @@ import { ThemeInterface } from 'ts/@next/components/siteWrap';
import LogoIcon from 'ts/@next/icons/logo-with-type.svg';
interface LogoInterface {
- isLight?: boolean;
theme?: ThemeInterface;
}
@@ -28,11 +27,7 @@ const Icon = styled(LogoIcon)<LogoInterface>`
flex-shrink: 0;
path {
- fill: ${(props: LogoInterface) => props.isLight ? '#fff' : props.theme.textColor};
-
- @media (max-width: 768px) {
- fill: #fff;
- }
+ fill: ${(props => props.theme.textColor};
}
`;
diff --git a/packages/website/ts/@next/components/mobileNav.tsx b/packages/website/ts/@next/components/mobileNav.tsx
index f6f32ee7a..fcdeb2d3f 100644
--- a/packages/website/ts/@next/components/mobileNav.tsx
+++ b/packages/website/ts/@next/components/mobileNav.tsx
@@ -1,6 +1,10 @@
import * as React from 'react';
import styled from 'styled-components';
+import {Link} from 'react-router-dom';
+
+import {WrapGrid} from 'ts/@next/components/newLayout';
+
export class MobileNav extends React.PureComponent {
public render(): React.Node {
const { isToggled, toggleMobileNav } = this.props;
@@ -8,14 +12,45 @@ export class MobileNav extends React.PureComponent {
return (
<Wrap isToggled={isToggled}>
<Section>
- <ul>
- <li>0x instant</li>
- <li>0x Launch Kit</li>
- </ul>
+ <h4>Products</h4>
+
+ <List>
+ <li>
+ <Link to="#">
+ 0x instant
+ </Link>
+ </li>
+ <li>
+ <Link to="#">
+ 0x Launch Kit
+ </Link>
+ </li>
+ </List>
</Section>
<Section isDark={true}>
- a
+ <Grid as="ul" isWrapped={true}>
+ <li>
+ <Link to="#">
+ Why 0x
+ </Link>
+ </li>
+ <li>
+ <Link to="#">
+ About
+ </Link>
+ </li>
+ <li>
+ <Link to="#">
+ Products
+ </Link>
+ </li>
+ <li>
+ <Link to="#">
+ Blog
+ </Link>
+ </li>
+ </Grid>
</Section>
{isToggled &&
@@ -40,6 +75,18 @@ const Wrap = styled.nav`
z-index: 999;
top: 0;
left: 0;
+ font-size: 20px;
+
+ a {
+ padding: 15px 0;
+ display: block;
+ color: inherit;
+ }
+
+ h4 {
+ font-size: 14px;
+ opacity: 0.5;
+ }
`;
const Overlay = styled.div`
@@ -53,6 +100,19 @@ const Overlay = styled.div`
const Section = styled.div`
width: 100%;
- padding: 30px;
+ padding: 15px 30px;
background-color: ${props => props.isDark && props.theme.mobileNavBgLower};
`;
+
+const List = styled.ul`
+ li {
+ float: ${props => props.inline && 'left'}''
+ }
+`;
+
+const Grid = styled(WrapGrid)`
+ li {
+ width: 50%;
+ flex-shrink: 0;
+ }
+`;
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index 7bb9d27ab..93869f16c 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -46,6 +46,9 @@ const GLOBAL_THEMES: ThemeInterface = {
textColor: '#000000',
paragraphColor: '#474747',
linkColor: colors.brandDark,
+ mobileNavBgUpper: '#FFFFFF',
+ mobileNavBgLower: '#F3F6F4',
+ mobileNavColor: '#000000',
dropdownBg: '#FBFBFB',
dropdownButtonBg: '#F3F6F4',
dropdownColor: '#003831',
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
index 86b9e16c5..cc53a296d 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -102,11 +102,6 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
object-fit: contain;
}
- p, li {
- font-size: 1rem;
- line-height: 1.444444444em; // 26px
- }
-
a, button {
text-decoration: none;
font-family: inherit;