From 56ca19dc9bc5342ac5e97ad06c20a6083c2f3c2a Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Wed, 28 Nov 2018 16:26:56 +0100 Subject: Add ehader --- packages/website/ts/@next/components/header.tsx | 54 +++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 packages/website/ts/@next/components/header.tsx (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx new file mode 100644 index 000000000..615cf53d5 --- /dev/null +++ b/packages/website/ts/@next/components/header.tsx @@ -0,0 +1,54 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import styled from 'styled-components'; + +import { Button } from './button'; +import { Container } from './container'; +import { Logo } from './logo'; + +export interface HeaderInterface { +} + +const StyledHeader = styled.header` + display: flex; + text-align: center; + align-items: center; + justify-content: space-between; + padding: 1.764705882rem 0; +`; + +const Text = styled.span` + font-size: 1rem; + line-height: 1.375rem; +`; + +const Links = styled.div` + display: flex; + justify-content: space-around; +`; + +const Link = styled.a` + color: rgba(255, 255, 255, 0.5); + font-size: 18px; + margin: 0 1.764705882rem; +`; + +const links = [ + { url: '', text: 'Why 0x' }, + { url: '', text: 'Products' }, + { url: '', text: 'Developers' }, + { url: '', text: 'About' }, + { url: '', text: 'Blog' }, +]; + +export const Header: React.StatelessComponent = ({}) => ( + + + + + {_.map(links, link => {link.text})} + + ); -- cgit From 83499176d9b627d383a7edc17dd862861af05320 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Thu, 29 Nov 2018 17:43:17 +0100 Subject: Adjust global font size --- packages/website/ts/@next/components/header.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index ac37e3ab2..0d4679df6 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -15,11 +15,12 @@ const StyledHeader = styled.header` align-items: center; justify-content: space-between; padding: 1.764705882rem 0; + padding: 1.666666667rem 0; `; const Text = styled.span` font-size: 1rem; - line-height: 1.375rem; + line-height: 1.222222222em; `; const Links = styled.div` @@ -29,8 +30,8 @@ const Links = styled.div` const Link = styled.a` color: rgba(255, 255, 255, 0.5); - font-size: 18px; - margin: 0 1.764705882rem; + font-size: 1rem; + margin: 0 1.666666667em; transition: color 0.25s ease-in-out; text-decoration: none; -- cgit From ab24dcc29098c7b0c65c0e19be89a15bec3426af Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 09:56:01 +0100 Subject: Hide trade button on mobile --- packages/website/ts/@next/components/header.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 0d4679df6..9b80ec167 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -11,10 +11,10 @@ interface HeaderInterface { const StyledHeader = styled.header` display: flex; + flex-wrap: wrap; text-align: center; align-items: center; justify-content: space-between; - padding: 1.764705882rem 0; padding: 1.666666667rem 0; `; @@ -40,6 +40,12 @@ const Link = styled.a` } `; +const TradeButton = styled(Button)` + @media (max-width: 999px) { + display: none; + } +`; + const links = [ { url: '#', text: 'Why 0x' }, { url: '#', text: 'Products' }, @@ -55,7 +61,7 @@ export const Header: React.StatelessComponent = ({}) => ( {_.map(links, (link, index) => {link.text})} - + Trade on 0x ); -- cgit From e78226257265d938e1c3830c8a93199011fa085a Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 14:15:23 +0100 Subject: Add route links to header --- packages/website/ts/@next/components/header.tsx | 75 +++++++++++++++---------- 1 file changed, 44 insertions(+), 31 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 9b80ec167..b09a7ed89 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -2,13 +2,51 @@ import * as _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; +import { Link as ReactRouterLink } from 'react-router-dom'; + import { Button } from './button'; import { Container } from './container'; import { Logo } from './logo'; -interface HeaderInterface { +interface HeaderProps { +} + +interface LinkProps { + href: string; } +const links = [ + { url: '/next/why', text: 'Why 0x' }, + { url: '#', text: 'Products' }, + { url: '#', text: 'Developers' }, + { url: '#', text: 'About' }, + { url: '#', text: 'Blog' }, +]; + +const Link: React.StatelessComponent = props => { + const { children, href } = props; + + return ( + + {children} + + ); +}; + +export const Header: React.StatelessComponent = ({}) => ( + + + + + {_.map(links, (link, index) => {link.text})} + + Trade on 0x + + +); + const StyledHeader = styled.header` display: flex; flex-wrap: wrap; @@ -18,9 +56,10 @@ const StyledHeader = styled.header` padding: 1.666666667rem 0; `; -const Text = styled.span` - font-size: 1rem; - line-height: 1.222222222em; +const TradeButton = styled(Button)` + @media (max-width: 999px) { + display: none; + } `; const Links = styled.div` @@ -28,7 +67,7 @@ const Links = styled.div` justify-content: space-around; `; -const Link = styled.a` +const StyledRouterLink = styled(ReactRouterLink)` color: rgba(255, 255, 255, 0.5); font-size: 1rem; margin: 0 1.666666667em; @@ -39,29 +78,3 @@ const Link = styled.a` color: rgba(255, 255, 255, 1); } `; - -const TradeButton = styled(Button)` - @media (max-width: 999px) { - display: none; - } -`; - -const links = [ - { url: '#', text: 'Why 0x' }, - { url: '#', text: 'Products' }, - { url: '#', text: 'Developers' }, - { url: '#', text: 'About' }, - { url: '#', text: 'Blog' }, -]; - -export const Header: React.StatelessComponent = ({}) => ( - - - - - {_.map(links, (link, index) => {link.text})} - - Trade on 0x - - -); -- cgit From 7314fd72529a0aa4186e5724c48e5776e424c99d Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 14:55:28 +0100 Subject: Link products to 0x instant for now --- packages/website/ts/@next/components/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index b09a7ed89..357056c04 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -17,7 +17,7 @@ interface LinkProps { const links = [ { url: '/next/why', text: 'Why 0x' }, - { url: '#', text: 'Products' }, + { url: '/next/0x-instant', text: 'Products' }, { url: '#', text: 'Developers' }, { url: '#', text: 'About' }, { url: '#', text: 'Blog' }, -- cgit From 3a13286585eb1399247b808c6d45849db9d94a2d Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 16:03:49 +0100 Subject: Added about / mission --- packages/website/ts/@next/components/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 357056c04..0f47588bd 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -19,7 +19,7 @@ const links = [ { url: '/next/why', text: 'Why 0x' }, { url: '/next/0x-instant', text: 'Products' }, { url: '#', text: 'Developers' }, - { url: '#', text: 'About' }, + { url: '/next/about/mission', text: 'About' }, { url: '#', text: 'Blog' }, ]; -- cgit From 435d9e47e330822a4df2f8e1787e98b60df3bc0f Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 30 Nov 2018 17:07:51 +0100 Subject: ThemeProvider --- packages/website/ts/@next/components/header.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/header.tsx') 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 = props => { export const Header: React.StatelessComponent = ({}) => ( - + + + + {_.map(links, (link, index) => {link.text})} -- cgit From 62eba1e8202925b88932bf10b65c4239131185e5 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Mon, 3 Dec 2018 11:10:33 +0100 Subject: Uses layout elems in header --- packages/website/ts/@next/components/header.tsx | 35 +++++++++++-------------- 1 file changed, 16 insertions(+), 19 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 0e7d8f5cd..b9b04a8c0 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -4,8 +4,8 @@ import styled from 'styled-components'; import { Link as ReactRouterLink } from 'react-router-dom'; +import { Section, Wrap } from './layout'; import { Button } from './button'; -import { Container } from './container'; import { Logo } from './logo'; interface HeaderProps { @@ -36,27 +36,24 @@ const Link: React.StatelessComponent = props => { }; export const Header: React.StatelessComponent = ({}) => ( - - - - - + + + + + - - {_.map(links, (link, index) => {link.text})} - - Trade on 0x - - + + {_.map(links, (link, index) => {link.text})} + + Trade on 0x + + ); -const StyledHeader = styled.header` - display: flex; - flex-wrap: wrap; - text-align: center; - align-items: center; - justify-content: space-between; - padding: 1.666666667rem 0; +const StyledHeader = Section.withComponent('header'); +const HeaderWrap = styled(Wrap)` + justify-content: space-between; + align-items: center; `; const TradeButton = styled(Button)` -- cgit From 1fab30ef80b58435405bce8cddaf375f4c5a9047 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Mon, 3 Dec 2018 11:15:34 +0100 Subject: A bit of formatting, centeres instant text --- packages/website/ts/@next/components/header.tsx | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index b9b04a8c0..c934b29ac 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -23,18 +23,6 @@ const links = [ { url: '#', text: 'Blog' }, ]; -const Link: React.StatelessComponent = props => { - const { children, href } = props; - - return ( - - {children} - - ); -}; - export const Header: React.StatelessComponent = ({}) => ( @@ -50,6 +38,16 @@ export const Header: React.StatelessComponent = ({}) => ( ); +const Link: React.StatelessComponent = props => { + const { children, href } = props; + + return ( + + {children} + + ); +}; + const StyledHeader = Section.withComponent('header'); const HeaderWrap = styled(Wrap)` justify-content: space-between; -- cgit From 4da419cf7591a8beb32fb5e41e31b129c5fbb99f Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Tue, 4 Dec 2018 14:58:37 +0100 Subject: Fixes all lint issues, cleanup --- packages/website/ts/@next/components/header.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index c934b29ac..dfe9028c3 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -1,12 +1,12 @@ -import * as _ from 'lodash'; +import _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; import { Link as ReactRouterLink } from 'react-router-dom'; -import { Section, Wrap } from './layout'; -import { Button } from './button'; -import { Logo } from './logo'; +import { Button } from 'ts/@next/components/button'; +import { Section, Wrap } from 'ts/@next/components/layout'; +import { Logo } from 'ts/@next/components/logo'; interface HeaderProps { } -- cgit From 8acb25f577feaea910ef0c1121aaba2ea177e718 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Tue, 4 Dec 2018 15:45:04 +0100 Subject: Refactors buttons/links/header --- packages/website/ts/@next/components/header.tsx | 66 +++++++------------------ 1 file changed, 19 insertions(+), 47 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index dfe9028c3..a6bbe4d65 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -1,20 +1,15 @@ import _ from 'lodash'; import * as React from 'react'; -import styled from 'styled-components'; - import { Link as ReactRouterLink } from 'react-router-dom'; +import styled from 'styled-components'; -import { Button } from 'ts/@next/components/button'; +import { Button, ButtonWrap, Link } from 'ts/@next/components/button'; import { Section, Wrap } from 'ts/@next/components/layout'; import { Logo } from 'ts/@next/components/logo'; interface HeaderProps { } -interface LinkProps { - href: string; -} - const links = [ { url: '/next/why', text: 'Why 0x' }, { url: '/next/0x-instant', text: 'Products' }, @@ -26,53 +21,30 @@ const links = [ export const Header: React.StatelessComponent = ({}) => ( - + - - - - {_.map(links, (link, index) => {link.text})} - - Trade on 0x + + + + {_.map(links, (link, index) => ( + + {link.text} + + ))} + + + ); -const Link: React.StatelessComponent = props => { - const { children, href } = props; - - return ( - - {children} - - ); -}; - const StyledHeader = Section.withComponent('header'); const HeaderWrap = styled(Wrap)` justify-content: space-between; align-items: center; `; - -const TradeButton = styled(Button)` - @media (max-width: 999px) { - display: none; - } -`; - -const Links = styled.div` - display: flex; - justify-content: space-around; -`; - -const StyledRouterLink = styled(ReactRouterLink)` - color: rgba(255, 255, 255, 0.5); - font-size: 1rem; - margin: 0 1.666666667em; - transition: color 0.25s ease-in-out; - text-decoration: none; - - &:hover { - color: rgba(255, 255, 255, 1); - } -`; -- cgit From c99558606347682c6c5c9bb20d37aa4fbe8ab6be Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Mon, 10 Dec 2018 11:19:20 +0100 Subject: WIP mobile header + developer dropdown --- packages/website/ts/@next/components/header.tsx | 222 ++++++++++++++++++++---- 1 file changed, 190 insertions(+), 32 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index a6bbe4d65..e4add9ecf 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -3,48 +3,206 @@ import * as React from 'react'; import { Link as ReactRouterLink } from 'react-router-dom'; import styled from 'styled-components'; +import { colors } from 'ts/style/colors'; + import { Button, ButtonWrap, Link } from 'ts/@next/components/button'; +import { DevelopersDropDown } from 'ts/@next/components/dropdowns/developers_drop_down'; +import { Hamburger } from 'ts/@next/components/hamburger'; import { Section, Wrap } from 'ts/@next/components/layout'; import { Logo } from 'ts/@next/components/logo'; +import { Paragraph } from 'ts/@next/components/text'; interface HeaderProps { + isOpen: boolean; + location?: Location; +} + +interface HeaderState { + isOpen: boolean; +} + +interface HeaderState { + isOpen: boolean; +} + +interface NavItem { + url?: string; + id?: string; + text?: string; } -const links = [ - { url: '/next/why', text: 'Why 0x' }, - { url: '/next/0x-instant', text: 'Products' }, - { url: '#', text: 'Developers' }, - { url: '/next/about/mission', text: 'About' }, - { url: '#', text: 'Blog' }, +const mobileProductLinks = [ + { url: '/next/0x-instant', text: '0x Instant' }, + { url: '/next/launch-kit', text: '0x Launch Kit' }, +]; + +const navItems: NavItem[] = [ + { id: 'why', url: '/next/why', text: 'Why 0x' }, + { id: 'products', url: '/next/0x-instant', text: 'Products' }, + { id: 'developers', url: '#', text: 'Developers' }, + { id: 'about', url: '/next/about/mission', text: 'About' }, + { id: 'blog', url: '#', text: 'Blog' }, ]; -export const Header: React.StatelessComponent = ({}) => ( - - - - - - - - {_.map(links, (link, index) => ( - - {link.text} - - ))} - - - - - -); - -const StyledHeader = Section.withComponent('header'); +export class Header extends React.Component { + constructor(props: HeaderProps) { + super(props); + this.state = { + isOpen: false, + }; + } + public render(): React.ReactNode { + return ( + + + + + + + + Trade on 0x + + + ); + } + private _onMenuButtonClick(): void { + this.setState({ + isOpen: !this.state.isOpen, + }); + } + private _getNavItem(link: NavItem, index: number): React.ReactNode { + if (link.id === 'developers') { + return ( + + ); + } + + return ( + + {link.text} + + ) + } +} + +const StyledHeader = styled(Section.withComponent('header'))` + @media (max-width: 768px) { + overflow: hidden; + min-height: ${props => props.isOpen ? '385px' : '70px'}; + position: relative; + transition: min-height 0.25s ease-in-out; + :root & { + padding: 20px 20px 0 !important; + } + } +`; + const HeaderWrap = styled(Wrap)` justify-content: space-between; align-items: center; + + @media (max-width: 768px) { + padding-top: 0; + display: flex; + padding-bottom: 0; + } +`; + +const StyledButtonWrap = styled(ButtonWrap)` + display: flex; + @media (max-width: 768px) { + background-color: #022924; + display: flex; + flex-wrap: wrap; + padding: 20px 20px; + + a { + text-align: left; + padding-left: 0; + } + } + + button + button, + a + a, + a + button, + button + a { + margin-left: 0; + + @media (min-width: 768px) { + margin-left: 10px; + } + } +`; + +const MobileProductLinksWrap = styled(StyledButtonWrap)` + display: none; + + @media (max-width: 768px) { + display: block; + background-color: transparent; + flex-direction: column; + + a { + display: block; + width: 100%; + } + } +`; + +const StyledLink = styled(Link)` + width: 50%; + text-align: left; + @media (max-width: 768px) { + } + + @media (min-width: 768px) { + width: auto; + text-align: center; + } +`; + +const Nav = styled.div` + @media (max-width: 768px) { + background-color: ${colors.brandDark}; + position: absolute; + top: 0; + left: 0; + right: 0; + padding-top: 65px; + } + + @media (min-width: 768px) { + width: auto; + text-align: center; + } +`; + +const TradeButton = styled(Button)` + @media (max-width: 768px) { + display: none; + } `; -- cgit From 7aee687e6bd585e473f3f677b383db3d636bd129 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Mon, 10 Dec 2018 17:55:51 +0100 Subject: Updates margins in why, change link component --- packages/website/ts/@next/components/header.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index e4add9ecf..144eb5eb2 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -58,7 +58,9 @@ export class Header extends React.Component { + + Trade on 0x -- cgit From beffcd990cb73655ea97cc61727a9c1bde359b97 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Mon, 10 Dec 2018 19:13:52 +0100 Subject: WIP Updates dropdown menus --- packages/website/ts/@next/components/header.tsx | 109 +++++++++++++++++------- 1 file changed, 78 insertions(+), 31 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 144eb5eb2..99e634e18 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -7,6 +7,7 @@ import { colors } from 'ts/style/colors'; import { Button, ButtonWrap, Link } from 'ts/@next/components/button'; import { DevelopersDropDown } from 'ts/@next/components/dropdowns/developers_drop_down'; +import { Dropdown } from 'ts/@next/components/dropdowns/mock'; import { Hamburger } from 'ts/@next/components/hamburger'; import { Section, Wrap } from 'ts/@next/components/layout'; import { Logo } from 'ts/@next/components/logo'; @@ -38,8 +39,18 @@ const mobileProductLinks = [ const navItems: NavItem[] = [ { id: 'why', url: '/next/why', text: 'Why 0x' }, - { id: 'products', url: '/next/0x-instant', text: 'Products' }, - { id: 'developers', url: '#', text: 'Developers' }, + { + id: 'products', + url: '/next/0x-instant', + text: 'Products', + dropdownComponent: Dropdown, + }, + { + id: 'developers', + url: '#', + text: 'Developers', + dropdownComponent: Dropdown, + }, { id: 'about', url: '/next/about/mission', text: 'About' }, { id: 'blog', url: '#', text: 'Blog' }, ]; @@ -63,7 +74,6 @@ export class Header extends React.Component { @@ -152,6 +166,17 @@ const StyledHeader = styled(Section.withComponent('header'))` } `; +const NavLink = styled(Link).attrs({ + activeStyle: { opacity: 1 }, +})` + opacity: 0.5; + transition: opacity 0.35s; + + &:hover { + opacity: 1; + } +`; + const HeaderWrap = styled(Wrap)` justify-content: space-between; align-items: center; -- cgit From 25f66f96b6635fcca27fc90fcded8449615d731e Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Tue, 11 Dec 2018 17:00:44 +0100 Subject: Removes headroom --- packages/website/ts/@next/components/header.tsx | 81 ++++++++++++------------- 1 file changed, 39 insertions(+), 42 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 73f615643..33129ce48 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -1,6 +1,5 @@ import _ from 'lodash'; import * as React from 'react'; -import Headroom from 'react-headroom'; import { Link as ReactRouterLink } from 'react-router-dom'; import styled, { withTheme } from 'styled-components'; @@ -106,47 +105,45 @@ class HeaderBase extends React.Component { const { theme } = this.props; return ( - - - - - - - - - - - - - Trade on 0x - - - - - + + + + + + + + + + + + Trade on 0x + + + + ); } } -- cgit From 26c9cd3cb2dcc21763977543e83c54f4bc32d679 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Tue, 11 Dec 2018 17:02:29 +0100 Subject: dropdown z-index --- packages/website/ts/@next/components/header.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 33129ce48..c4f30b7b3 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -254,6 +254,7 @@ const DropdownWrap = styled.div` opacity: 0; transform: translate3d(0, -10px, 0); transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s; + z-index: 9999; &:after, &:before { bottom: 100%; -- cgit From 088ca6ce7cb36b26981c719460f01f3da6e00198 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Wed, 12 Dec 2018 13:08:52 +0100 Subject: Added a bunch of types --- packages/website/ts/@next/components/header.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index c4f30b7b3..3d9f2055c 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -27,6 +27,12 @@ interface NavItem { url?: string; id?: string; text?: string; + dropdownWidth?: number; + dropdownComponent?: React.ReactNode; +} + +interface DropdownWrapInterface { + width?: number; } const mobileProductLinks = [ @@ -240,7 +246,7 @@ const LinkWrap = styled.div` } `; -const DropdownWrap = styled.div` +const DropdownWrap = styled.div` width: ${props => props.width || 280}px; padding: 15px 0; border: 1px solid transparent; -- cgit From 6d2da94f8a1bd2b80b548f6484e94173c4627adb Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Wed, 12 Dec 2018 16:06:31 +0100 Subject: Fix header link active state --- packages/website/ts/@next/components/header.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 3d9f2055c..6e9616e21 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -5,7 +5,7 @@ import styled, { withTheme } from 'styled-components'; import { colors } from 'ts/style/colors'; -import { Button, Link } from 'ts/@next/components/button'; +import { Button, Link, NavLink } from 'ts/@next/components/button'; import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers'; import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products'; import { Dropdown } from 'ts/@next/components/dropdowns/mock'; @@ -89,13 +89,13 @@ class HeaderBase extends React.Component { return ( - {link.text} - + {link.dropdownComponent && @@ -169,7 +169,7 @@ const StyledHeader = styled(Section.withComponent('header'))` } `; -const NavLink = styled(Link).attrs({ +const StyledNavLink = styled(NavLink).attrs({ activeStyle: { opacity: 1 }, })` opacity: 0.5; -- cgit From bf56a2c7c49ec2817adedea359b7750a8ced15d7 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Wed, 12 Dec 2018 16:47:12 +0100 Subject: Header mobile styling --- packages/website/ts/@next/components/header.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 6e9616e21..7660c0d40 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -157,14 +157,14 @@ class HeaderBase extends React.Component { export const Header = withTheme(HeaderBase); const StyledHeader = styled(Section.withComponent('header'))` - @media (max-width: ${BREAKPOINTS.mobile}) { + @media (max-width: 800px) { min-height: ${props => props.isOpen ? '385px' : '70px'}; overflow: hidden; position: relative; transition: min-height 0.25s ease-in-out; } - @media (max-width: ${BREAKPOINTS.mobile}) { + @media (max-width: 800px) { background-color: ${props => props.theme.bgColor}; } `; @@ -184,7 +184,7 @@ const HeaderWrap = styled(Wrap)` justify-content: space-between; align-items: center; - @media (max-width: 768px) { + @media (max-width: 800px) { padding-top: 0; display: flex; padding-bottom: 0; @@ -196,7 +196,7 @@ const StyledButtonWrap = styled.div` align-items: center; justify-content: space-between; - @media (max-width: ${BREAKPOINTS.mobile}) { + @media (max-width: 800px) { background-color: #022924; display: flex; flex-wrap: wrap; @@ -216,7 +216,7 @@ const StyledButtonWrap = styled.div` const MobileProductLinksWrap = styled(StyledButtonWrap)` display: none; - @media (max-width: ${BREAKPOINTS.mobile}) { + @media (max-width: 800px) { display: block; background-color: transparent; flex-direction: column; @@ -235,7 +235,7 @@ const LinkWrap = styled.div` display: block; } - @media (min-width: ${BREAKPOINTS.mobile}) { + @media (min-width: 800px) { &:hover > div { display: block; visibility: visible; @@ -291,7 +291,7 @@ const DropdownWrap = styled.div` `; const Nav = styled.div` - @media (max-width: ${BREAKPOINTS.mobile}) { + @media (max-width: 800px) { background-color: ${colors.brandDark}; position: absolute; top: 0; @@ -304,7 +304,7 @@ const Nav = styled.div` const TradeButton = styled(Button)` padding: 14px 22px; - @media (max-width: ${BREAKPOINTS.mobile}) { + @media (max-width: 928px) { display: none; } `; -- cgit From 5bd185e8319f654d1691b021d38c934983a1f107 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 13 Dec 2018 10:54:18 +0100 Subject: Adds images in instant page --- packages/website/ts/@next/components/header.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 7660c0d40..44686686f 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -67,7 +67,7 @@ const navItems: NavItem[] = [ }, { id: 'blog', - url: '#', + url: 'https://blog.0xproject.com/latest', text: 'Blog', }, ]; @@ -143,7 +143,7 @@ class HeaderBase extends React.Component { Trade on 0x -- cgit From b4b1d54e49ff3d6c146b257ddb918fca5ddb1329 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 13 Dec 2018 12:33:45 +0100 Subject: WIP refactor mobileNavMenu --- packages/website/ts/@next/components/header.tsx | 62 +++++++++++-------------- 1 file changed, 27 insertions(+), 35 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 44686686f..d596d43ca 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -14,6 +14,8 @@ import { BREAKPOINTS, Section, Wrap } from 'ts/@next/components/layout'; import { Logo } from 'ts/@next/components/logo'; import { Paragraph } from 'ts/@next/components/text'; +import { MobileNav } from 'ts/@next/components/mobileNav'; + interface HeaderProps { isOpen: boolean; location?: Location; @@ -108,47 +110,32 @@ class HeaderBase extends React.Component { public render(): React.ReactNode { const { isOpen } = this.state; - const { theme } = this.props; + const { isNavToggled, toggleMobileNav, theme } = this.props; return ( - - - - - - - - - - Trade on 0x - - - + + Trade on 0x + + + + + ); } @@ -196,6 +183,11 @@ const StyledButtonWrap = styled.div` align-items: center; justify-content: space-between; + @media (max-width: 800px) { + display: none; + } + +/* @media (max-width: 800px) { background-color: #022924; display: flex; @@ -210,7 +202,7 @@ const StyledButtonWrap = styled.div` a + a { margin-left: 0; } - } + } */ `; const MobileProductLinksWrap = styled(StyledButtonWrap)` @@ -292,7 +284,7 @@ const DropdownWrap = styled.div` const Nav = styled.div` @media (max-width: 800px) { - background-color: ${colors.brandDark}; + background-color: ${props => props.theme.bgColor}; position: absolute; top: 0; left: 0; -- cgit From 6f7e27bd7fbb0e28acb245bec3b18cf944e24523 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Thu, 13 Dec 2018 13:52:55 +0100 Subject: Tweak z-index --- packages/website/ts/@next/components/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index d596d43ca..72082ce9f 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -252,7 +252,7 @@ const DropdownWrap = styled.div` opacity: 0; transform: translate3d(0, -10px, 0); transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s; - z-index: 9999; + z-index: 20; &:after, &:before { bottom: 100%; -- cgit From 81690d1ce508fc40ab90aff3539359efe7a93dba Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 13 Dec 2018 16:39:03 +0100 Subject: Removes component, clean up Button.tsx --- packages/website/ts/@next/components/header.tsx | 135 +++++++++--------------- 1 file changed, 48 insertions(+), 87 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 72082ce9f..35d53d21f 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -5,7 +5,7 @@ import styled, { withTheme } from 'styled-components'; import { colors } from 'ts/style/colors'; -import { Button, Link, NavLink } from 'ts/@next/components/button'; +import { Button } from 'ts/@next/components/button'; import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers'; import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products'; import { Dropdown } from 'ts/@next/components/dropdowns/mock'; @@ -85,29 +85,6 @@ class HeaderBase extends React.Component { }); } - public getNavItem = (link: NavItem, index: number): React.ReactNode => { - const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment; - const Subnav = link.dropdownComponent; - - return ( - - - {link.text} - - - {link.dropdownComponent && - - - - } - - ); - } - public render(): React.ReactNode { const { isOpen } = this.state; const { isNavToggled, toggleMobileNav, theme } = this.props; @@ -121,7 +98,7 @@ class HeaderBase extends React.Component { {_.map(navItems, (link, index) => ( - this.getNavItem(link, index) + ))} @@ -143,6 +120,30 @@ class HeaderBase extends React.Component { export const Header = withTheme(HeaderBase); +const NavItem = (props): React.ReactNode => { + const { link, index } = props; + const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment; + const Subnav = link.dropdownComponent; + + return ( + + + {link.text} + + + {link.dropdownComponent && + + + + } + + ); +}; + const StyledHeader = styled(Section.withComponent('header'))` @media (max-width: 800px) { min-height: ${props => props.isOpen ? '385px' : '70px'}; @@ -156,11 +157,32 @@ const StyledHeader = styled(Section.withComponent('header'))` } `; -const StyledNavLink = styled(NavLink).attrs({ +const LinkWrap = styled.div` + position: relative; + + a { + display: block; + } + + @media (min-width: 800px) { + &:hover > div { + display: block; + visibility: visible; + opacity: 1; + transform: translate3d(0, 0, 0); + transition: opacity 0.35s, transform 0.35s, visibility 0s; + } + } +`; + +const StyledNavLink = styled(ReactRouterLink).attrs({ activeStyle: { opacity: 1 }, })` + color: ${props => props.theme.textColor}; opacity: 0.5; transition: opacity 0.35s; + padding: 15px 0; + margin: 0 30px; &:hover { opacity: 1; @@ -186,56 +208,6 @@ const StyledButtonWrap = styled.div` @media (max-width: 800px) { display: none; } - -/* - @media (max-width: 800px) { - background-color: #022924; - display: flex; - flex-wrap: wrap; - padding: 20px 20px; - - a { - text-align: left; - padding-left: 0; - } - - a + a { - margin-left: 0; - } - } */ -`; - -const MobileProductLinksWrap = styled(StyledButtonWrap)` - display: none; - - @media (max-width: 800px) { - display: block; - background-color: transparent; - flex-direction: column; - - a { - display: block; - width: 100%; - } - } -`; - -const LinkWrap = styled.div` - position: relative; - - a { - display: block; - } - - @media (min-width: 800px) { - &:hover > div { - display: block; - visibility: visible; - opacity: 1; - transform: translate3d(0, 0, 0); - transition: opacity 0.35s, transform 0.35s, visibility 0s; - } - } `; const DropdownWrap = styled.div` @@ -282,17 +254,6 @@ const DropdownWrap = styled.div` } `; -const Nav = styled.div` - @media (max-width: 800px) { - background-color: ${props => props.theme.bgColor}; - position: absolute; - top: 0; - left: 0; - right: 0; - padding-top: 65px; - } -`; - const TradeButton = styled(Button)` padding: 14px 22px; -- cgit From 1647400a497d52478514920208723c0121d2f842 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 13 Dec 2018 16:50:19 +0100 Subject: Just forces that header button to behave --- packages/website/ts/@next/components/header.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 35d53d21f..d7046ec7a 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -255,9 +255,9 @@ const DropdownWrap = styled.div` `; const TradeButton = styled(Button)` - padding: 14px 22px; + padding: 14px 22px !important; - @media (max-width: 928px) { - display: none; + @media (max-width: 990px) { + display: none !important; } `; -- cgit From 803086da5769c7cad2b4bbb80496ea58b353e5b8 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 13 Dec 2018 17:27:40 +0100 Subject: Cleans up as much as old layout --- packages/website/ts/@next/components/header.tsx | 43 ++++++++++++------------- 1 file changed, 20 insertions(+), 23 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index d7046ec7a..c5c67ac80 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -3,18 +3,14 @@ import * as React from 'react'; import { Link as ReactRouterLink } from 'react-router-dom'; import styled, { withTheme } from 'styled-components'; -import { colors } from 'ts/style/colors'; - import { Button } from 'ts/@next/components/button'; import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers'; import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products'; -import { Dropdown } from 'ts/@next/components/dropdowns/mock'; import { Hamburger } from 'ts/@next/components/hamburger'; -import { BREAKPOINTS, Section, Wrap } from 'ts/@next/components/layout'; import { Logo } from 'ts/@next/components/logo'; -import { Paragraph } from 'ts/@next/components/text'; - import { MobileNav } from 'ts/@next/components/mobileNav'; +import { FlexWrap } from 'ts/@next/components/newLayout'; +import { Paragraph } from 'ts/@next/components/text'; interface HeaderProps { isOpen: boolean; @@ -96,11 +92,15 @@ class HeaderBase extends React.Component { - + {_.map(navItems, (link, index) => ( - + ))} - + { - - ); + + ); } } @@ -122,11 +122,10 @@ export const Header = withTheme(HeaderBase); const NavItem = (props): React.ReactNode => { const { link, index } = props; - const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment; const Subnav = link.dropdownComponent; return ( - + { } - + ); }; -const StyledHeader = styled(Section.withComponent('header'))` +const StyledHeader = styled.header` + padding: 30px; + @media (max-width: 800px) { min-height: ${props => props.isOpen ? '385px' : '70px'}; overflow: hidden; position: relative; transition: min-height 0.25s ease-in-out; } - - @media (max-width: 800px) { - background-color: ${props => props.theme.bgColor}; - } `; -const LinkWrap = styled.div` +const LinkWrap = styled.li` position: relative; a { @@ -189,7 +186,7 @@ const StyledNavLink = styled(ReactRouterLink).attrs({ } `; -const HeaderWrap = styled(Wrap)` +const HeaderWrap = styled(FlexWrap)` justify-content: space-between; align-items: center; @@ -200,7 +197,7 @@ const HeaderWrap = styled(Wrap)` } `; -const StyledButtonWrap = styled.div` +const NavLinks = styled.ul` display: flex; align-items: center; justify-content: space-between; @@ -249,7 +246,7 @@ const DropdownWrap = styled.div` margin-left: -11px; } - @media (max-width: ${BREAKPOINTS.mobile}) { + @media (max-width: 768px) { display: none; } `; -- cgit From f4a95c295c427c00a5cb2df83ad145886a9d1bf4 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 13 Dec 2018 18:22:36 +0100 Subject: WIP Begin cleanup, adds mediaquery component --- packages/website/ts/@next/components/header.tsx | 35 ++++++++++++++----------- 1 file changed, 19 insertions(+), 16 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index c5c67ac80..c16e2f7b4 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -1,5 +1,6 @@ import _ from 'lodash'; import * as React from 'react'; +import MediaQuery from 'react-responsive'; import { Link as ReactRouterLink } from 'react-router-dom'; import styled, { withTheme } from 'styled-components'; @@ -10,11 +11,15 @@ import { Hamburger } from 'ts/@next/components/hamburger'; import { Logo } from 'ts/@next/components/logo'; import { MobileNav } from 'ts/@next/components/mobileNav'; import { FlexWrap } from 'ts/@next/components/newLayout'; +import { ThemeInteface } from 'ts/@next/components/siteWrap'; import { Paragraph } from 'ts/@next/components/text'; interface HeaderProps { - isOpen: boolean; + isOpen?: boolean; location?: Location; + isNavToggled?: boolean; + toggleMobileNav: () => void; + theme: ThemeInterface; } interface HeaderState { @@ -89,7 +94,7 @@ class HeaderBase extends React.Component { - + @@ -102,13 +107,15 @@ class HeaderBase extends React.Component { ))} - - Trade on 0x - + + + Trade on 0x + + @@ -120,12 +127,12 @@ class HeaderBase extends React.Component { export const Header = withTheme(HeaderBase); -const NavItem = (props): React.ReactNode => { - const { link, index } = props; +const NavItem = (props: NavItem): React.ReactNode => { + const { link } = props; const Subnav = link.dropdownComponent; return ( - + ` const TradeButton = styled(Button)` padding: 14px 22px !important; - - @media (max-width: 990px) { - display: none !important; - } `; -- cgit From ac1786585e24528e34f61a3edc63ad4605cf015a Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 13 Dec 2018 18:44:18 +0100 Subject: [WIP] cleanup, typing --- packages/website/ts/@next/components/header.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index c16e2f7b4..b982538da 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -11,14 +11,14 @@ import { Hamburger } from 'ts/@next/components/hamburger'; import { Logo } from 'ts/@next/components/logo'; import { MobileNav } from 'ts/@next/components/mobileNav'; import { FlexWrap } from 'ts/@next/components/newLayout'; -import { ThemeInteface } from 'ts/@next/components/siteWrap'; +import { ThemeInterface } from 'ts/@next/components/siteWrap'; import { Paragraph } from 'ts/@next/components/text'; interface HeaderProps { isOpen?: boolean; location?: Location; isNavToggled?: boolean; - toggleMobileNav: () => void; + toggleMobileNav?: () => void; theme: ThemeInterface; } @@ -117,7 +117,7 @@ class HeaderBase extends React.Component { - + @@ -127,17 +127,13 @@ class HeaderBase extends React.Component { export const Header = withTheme(HeaderBase); -const NavItem = (props: NavItem): React.ReactNode => { +const NavItem = (props: { link: NavItem }): React.ReactNode => { const { link } = props; const Subnav = link.dropdownComponent; return ( - + {link.text} -- cgit From 66480ccb1e0dc72e6716060ab472b7584bfa910c Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 14 Dec 2018 11:26:59 +0100 Subject: Linting fixes --- packages/website/ts/@next/components/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index b982538da..437f9f19e 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -127,7 +127,7 @@ class HeaderBase extends React.Component { export const Header = withTheme(HeaderBase); -const NavItem = (props: { link: NavItem }): React.ReactNode => { +const NavItem = (props: { link: NavItem; key: string }): React.ReactNode => { const { link } = props; const Subnav = link.dropdownComponent; -- cgit From 106df4cdaf002d949a2ba1aa73a5cdbb5f443f03 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 14 Dec 2018 11:41:05 +0100 Subject: Linting fix --- packages/website/ts/@next/components/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 437f9f19e..881ec799e 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -127,7 +127,7 @@ class HeaderBase extends React.Component { export const Header = withTheme(HeaderBase); -const NavItem = (props: { link: NavItem; key: string }): React.ReactNode => { +const NavItem = (props: { link: NavItem; key: string }) => { const { link } = props; const Subnav = link.dropdownComponent; -- cgit From fab3a90d5add060f2bfeb1dc470373af03fd6d83 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 14 Dec 2018 12:55:06 +0100 Subject: Adds mission office photo --- packages/website/ts/@next/components/header.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 881ec799e..fc754af7e 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -102,7 +102,6 @@ class HeaderBase extends React.Component { ))} -- cgit From 8948029dd78cad2a984853a1123ecd7416b5459d Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 14 Dec 2018 13:32:18 +0100 Subject: REplaces links as navlinks in header --- packages/website/ts/@next/components/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index fc754af7e..97356f4b2 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -1,7 +1,7 @@ import _ from 'lodash'; import * as React from 'react'; import MediaQuery from 'react-responsive'; -import { Link as ReactRouterLink } from 'react-router-dom'; +import { NavLink as ReactRouterLink } from 'react-router-dom'; import styled, { withTheme } from 'styled-components'; import { Button } from 'ts/@next/components/button'; -- cgit From 6db28c530066454e84738451dc66bbdf29243b2d Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 14 Dec 2018 16:06:06 +0100 Subject: Fix mobile nav hamburger open state --- packages/website/ts/@next/components/header.tsx | 29 +++---------------------- 1 file changed, 3 insertions(+), 26 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 97356f4b2..ced2aee76 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -15,17 +15,12 @@ import { ThemeInterface } from 'ts/@next/components/siteWrap'; import { Paragraph } from 'ts/@next/components/text'; interface HeaderProps { - isOpen?: boolean; location?: Location; isNavToggled?: boolean; toggleMobileNav?: () => void; theme: ThemeInterface; } -interface HeaderState { - isOpen: boolean; -} - interface NavItem { url?: string; id?: string; @@ -75,23 +70,12 @@ const navItems: NavItem[] = [ }, ]; -class HeaderBase extends React.Component { - public state = { - isOpen: false, - }; - - public onMenuButtonClick = (): void => { - this.setState({ - isOpen: !this.state.isOpen, - }); - } - +class HeaderBase extends React.Component { public render(): React.ReactNode { - const { isOpen } = this.state; const { isNavToggled, toggleMobileNav, theme } = this.props; return ( - + @@ -116,7 +100,7 @@ class HeaderBase extends React.Component { - + @@ -147,13 +131,6 @@ const NavItem = (props: { link: NavItem; key: string }) => { const StyledHeader = styled.header` padding: 30px; - - @media (max-width: 800px) { - min-height: ${props => props.isOpen ? '385px' : '70px'}; - overflow: hidden; - position: relative; - transition: min-height 0.25s ease-in-out; - } `; const LinkWrap = styled.li` -- cgit From bdc8f9aa2ad0e75fe7530a1f81da21e66cd99c4e Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 14 Dec 2018 17:43:56 +0100 Subject: Cleanup --- packages/website/ts/@next/components/header.tsx | 6 ------ 1 file changed, 6 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index ced2aee76..368b1e665 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -12,7 +12,6 @@ import { Logo } from 'ts/@next/components/logo'; import { MobileNav } from 'ts/@next/components/mobileNav'; import { FlexWrap } from 'ts/@next/components/newLayout'; import { ThemeInterface } from 'ts/@next/components/siteWrap'; -import { Paragraph } from 'ts/@next/components/text'; interface HeaderProps { location?: Location; @@ -33,11 +32,6 @@ interface DropdownWrapInterface { width?: number; } -const mobileProductLinks = [ - { url: '/next/0x-instant', text: '0x Instant' }, - { url: '/next/launch-kit', text: '0x Launch Kit' }, -]; - const navItems: NavItem[] = [ { id: 'why', -- cgit From f0581285d0580062b29af3e0d5bc3af9d9e57d0d Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 14 Dec 2018 20:53:29 +0100 Subject: Type fixes --- packages/website/ts/@next/components/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 368b1e665..dae2741e4 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -116,7 +116,7 @@ const NavItem = (props: { link: NavItem; key: string }) => { {link.dropdownComponent && - + {Subnav} } -- cgit From b07892bb48475e461e07926315a2e43ea5cfb46f Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 14 Dec 2018 21:33:08 +0100 Subject: Type fixes --- packages/website/ts/@next/components/header.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index dae2741e4..047f759c9 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -11,16 +11,16 @@ import { Hamburger } from 'ts/@next/components/hamburger'; import { Logo } from 'ts/@next/components/logo'; import { MobileNav } from 'ts/@next/components/mobileNav'; import { FlexWrap } from 'ts/@next/components/newLayout'; -import { ThemeInterface } from 'ts/@next/components/siteWrap'; +import { ThemeValuesInterface } from 'ts/@next/components/siteWrap'; interface HeaderProps { location?: Location; isNavToggled?: boolean; toggleMobileNav?: () => void; - theme: ThemeInterface; + theme: ThemeValuesInterface; } -interface NavItem { +interface NavItemProps { url?: string; id?: string; text?: string; @@ -32,7 +32,7 @@ interface DropdownWrapInterface { width?: number; } -const navItems: NavItem[] = [ +const navItems: NavItemProps[] = [ { id: 'why', url: '/next/why', @@ -104,7 +104,7 @@ class HeaderBase extends React.Component { export const Header = withTheme(HeaderBase); -const NavItem = (props: { link: NavItem; key: string }) => { +const NavItem = (props: { link: NavItemProps; key: string }) => { const { link } = props; const Subnav = link.dropdownComponent; @@ -116,7 +116,7 @@ const NavItem = (props: { link: NavItem; key: string }) => { {link.dropdownComponent && - {Subnav} + } -- cgit From 8570616d9765584e91c2fcfced398a6289536464 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 14 Dec 2018 22:39:04 +0100 Subject: Update links --- packages/website/ts/@next/components/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 047f759c9..b31d34765 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -40,7 +40,7 @@ const navItems: NavItemProps[] = [ }, { id: 'products', - url: '/next/0x-instant', + url: '/next/instant', text: 'Products', dropdownComponent: DropdownProducts, dropdownWidth: 280, -- cgit From b9fa158092c0179d41f5cf7b4f62eec95dd7f4f6 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 14 Dec 2018 23:03:45 +0100 Subject: Update links and routes --- packages/website/ts/@next/components/header.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index b31d34765..c5615e61f 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -12,6 +12,7 @@ import { Logo } from 'ts/@next/components/logo'; import { MobileNav } from 'ts/@next/components/mobileNav'; import { FlexWrap } from 'ts/@next/components/newLayout'; import { ThemeValuesInterface } from 'ts/@next/components/siteWrap'; +import { WebsitePaths } from 'ts/types'; interface HeaderProps { location?: Location; @@ -35,12 +36,12 @@ interface DropdownWrapInterface { const navItems: NavItemProps[] = [ { id: 'why', - url: '/next/why', + url: WebsitePaths.Why, text: 'Why 0x', }, { id: 'products', - url: '/next/instant', + url: '#', text: 'Products', dropdownComponent: DropdownProducts, dropdownWidth: 280, @@ -54,7 +55,7 @@ const navItems: NavItemProps[] = [ }, { id: 'about', - url: '/next/about/mission', + url: WebsitePaths.AboutMission, text: 'About', }, { -- cgit From f7ceb4cf582debf2521ef4797674e31a86ff6a38 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 14 Dec 2018 23:38:21 +0100 Subject: Fix logo link --- packages/website/ts/@next/components/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index c5615e61f..568c279bd 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -72,7 +72,7 @@ class HeaderBase extends React.Component { return ( - + -- cgit From 51b1cab72a80b8ef05038ecf392d9c72b8d4294e Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 14 Dec 2018 14:46:05 -0800 Subject: fix(website) replace 0xproject.com with 0x.org --- packages/website/ts/@next/components/header.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 568c279bd..fde549642 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -60,7 +60,7 @@ const navItems: NavItemProps[] = [ }, { id: 'blog', - url: 'https://blog.0xproject.com/latest', + url: 'https://blog.0x.org/latest', text: 'Blog', }, ]; @@ -89,7 +89,7 @@ class HeaderBase extends React.Component { Trade on 0x -- cgit From 96d89ddade8c993dd0977c37a58eac60e9db383b Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Mon, 17 Dec 2018 11:07:00 +0100 Subject: Fix portal link --- packages/website/ts/@next/components/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index fde549642..d5894f65a 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -89,7 +89,7 @@ class HeaderBase extends React.Component { Trade on 0x -- cgit From 312d864936a0f930a09dcb0739f0e498ea42feac Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Mon, 17 Dec 2018 17:31:06 +0100 Subject: Fixes mobile nav overflow on mobile --- packages/website/ts/@next/components/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index d5894f65a..f6895d242 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -70,7 +70,7 @@ class HeaderBase extends React.Component { const { isNavToggled, toggleMobileNav, theme } = this.props; return ( - + -- cgit From 5e4defefb06ed886573abeb61ac5036836150f34 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Mon, 17 Dec 2018 18:06:30 +0100 Subject: Adds headroom instead for toggling nav visibility --- packages/website/ts/@next/components/header.tsx | 63 +++++++++++++------------ 1 file changed, 34 insertions(+), 29 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index f6895d242..035eebe53 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -4,6 +4,8 @@ import MediaQuery from 'react-responsive'; import { NavLink as ReactRouterLink } from 'react-router-dom'; import styled, { withTheme } from 'styled-components'; +import Headroom from 'react-headroom'; + import { Button } from 'ts/@next/components/button'; import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers'; import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products'; @@ -70,35 +72,37 @@ class HeaderBase extends React.Component { const { isNavToggled, toggleMobileNav, theme } = this.props; return ( - - - - - - - - {_.map(navItems, (link, index) => ( - - ))} - - - - - Trade on 0x - - - - - - - + + + + + + + + + {_.map(navItems, (link, index) => ( + + ))} + + + + + Trade on 0x + + + + + + + + ); } } @@ -126,6 +130,7 @@ const NavItem = (props: { link: NavItemProps; key: string }) => { const StyledHeader = styled.header` padding: 30px; + background-color: ${props => props.theme.bgColor}; `; const LinkWrap = styled.li` -- cgit From fb623cf63b3c7474f4bfb4bc37dd4afa9ec51e89 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Mon, 17 Dec 2018 18:23:40 +0100 Subject: Untoggles nav on headroom unpin --- packages/website/ts/@next/components/header.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 035eebe53..cc68739ed 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -68,11 +68,17 @@ const navItems: NavItemProps[] = [ ]; class HeaderBase extends React.Component { + public onUnpin = () => { + if (this.props.isNavToggled) { + this.props.toggleMobileNav(); + } + } + public render(): React.ReactNode { const { isNavToggled, toggleMobileNav, theme } = this.props; return ( - + -- cgit From 5209729eb1e3a0d0fef18bd2d03207cc2544c87d Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Mon, 17 Dec 2018 19:39:37 +0100 Subject: Increase header tolerances --- packages/website/ts/@next/components/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index cc68739ed..544a7daf1 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -78,7 +78,7 @@ class HeaderBase extends React.Component { const { isNavToggled, toggleMobileNav, theme } = this.props; return ( - + -- cgit From a77e5a1a127e7e25281ff94c88b7a1a0034613b6 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 17 Dec 2018 14:37:34 -0800 Subject: feat: fix links in navbar and dropdown --- packages/website/ts/@next/components/header.tsx | 85 ++++++++++++++----------- 1 file changed, 47 insertions(+), 38 deletions(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 544a7daf1..00d45f123 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -1,8 +1,8 @@ +import { Link } from '@0x/react-shared'; import _ from 'lodash'; import * as React from 'react'; import MediaQuery from 'react-responsive'; -import { NavLink as ReactRouterLink } from 'react-router-dom'; -import styled, { withTheme } from 'styled-components'; +import styled, { css, withTheme } from 'styled-components'; import Headroom from 'react-headroom'; @@ -29,6 +29,7 @@ interface NavItemProps { text?: string; dropdownWidth?: number; dropdownComponent?: React.ReactNode; + shouldOpenInNewTab?: boolean; } interface DropdownWrapInterface { @@ -43,14 +44,12 @@ const navItems: NavItemProps[] = [ }, { id: 'products', - url: '#', text: 'Products', dropdownComponent: DropdownProducts, dropdownWidth: 280, }, { id: 'developers', - url: '#', text: 'Developers', dropdownComponent: DropdownDevelopers, dropdownWidth: 480, @@ -62,7 +61,8 @@ const navItems: NavItemProps[] = [ }, { id: 'blog', - url: 'https://blog.0x.org/latest', + url: 'https://blog.0xproject.com/latest', + shouldOpenInNewTab: true, text: 'Blog', }, ]; @@ -72,7 +72,7 @@ class HeaderBase extends React.Component { if (this.props.isNavToggled) { this.props.toggleMobileNav(); } - } + }; public render(): React.ReactNode { const { isNavToggled, toggleMobileNav, theme } = this.props; @@ -81,25 +81,16 @@ class HeaderBase extends React.Component { - + - + - {_.map(navItems, (link, index) => ( - - ))} + {_.map(navItems, (link, index) => )} - + Trade on 0x @@ -118,23 +109,30 @@ export const Header = withTheme(HeaderBase); const NavItem = (props: { link: NavItemProps; key: string }) => { const { link } = props; const Subnav = link.dropdownComponent; - + const linkElement = _.isUndefined(link.url) ? ( + {link.text} + ) : ( + + {link.text} + + ); return ( - - {link.text} - + {linkElement} - {link.dropdownComponent && + {link.dropdownComponent && ( - } + )} ); }; -const StyledHeader = styled.header` +const StyledHeader = + styled.header < + HeaderProps > + ` padding: 30px; background-color: ${props => props.theme.bgColor}; `; @@ -157,9 +155,7 @@ const LinkWrap = styled.li` } `; -const StyledNavLink = styled(ReactRouterLink).attrs({ - activeStyle: { opacity: 1 }, -})` +const linkStyles = css` color: ${props => props.theme.textColor}; opacity: 0.5; transition: opacity 0.35s; @@ -171,15 +167,25 @@ const StyledNavLink = styled(ReactRouterLink).attrs({ } `; +const StyledNavLink = styled(Link).attrs({ + activeStyle: { opacity: 1 }, +})` + ${linkStyles}; +`; + +const StyledAnchor = styled.a` + ${linkStyles}; +`; + const HeaderWrap = styled(FlexWrap)` - justify-content: space-between; - align-items: center; - - @media (max-width: 800px) { - padding-top: 0; - display: flex; - padding-bottom: 0; - } + justify-content: space-between; + align-items: center; + + @media (max-width: 800px) { + padding-top: 0; + display: flex; + padding-bottom: 0; + } `; const NavLinks = styled.ul` @@ -192,7 +198,10 @@ const NavLinks = styled.ul` } `; -const DropdownWrap = styled.div` +const DropdownWrap = + styled.div < + DropdownWrapInterface > + ` width: ${props => props.width || 280}px; padding: 15px 0; border: 1px solid transparent; -- cgit From 64e84a35106717e569a8268494af83732eda7fd3 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 17 Dec 2018 15:39:22 -0800 Subject: feat: fix blog link --- packages/website/ts/@next/components/header.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 00d45f123..e6b49e395 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -15,6 +15,7 @@ import { MobileNav } from 'ts/@next/components/mobileNav'; import { FlexWrap } from 'ts/@next/components/newLayout'; import { ThemeValuesInterface } from 'ts/@next/components/siteWrap'; import { WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; interface HeaderProps { location?: Location; @@ -61,7 +62,7 @@ const navItems: NavItemProps[] = [ }, { id: 'blog', - url: 'https://blog.0xproject.com/latest', + url: constants.URL_BLOG, shouldOpenInNewTab: true, text: 'Blog', }, -- cgit From b40551e2dfdae276850be1f38bd0eaeaafe02749 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Tue, 18 Dec 2018 14:08:35 +0100 Subject: Change cursor on dropdown triggers --- packages/website/ts/@next/components/header.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index e6b49e395..24bfa28ba 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -176,6 +176,7 @@ const StyledNavLink = styled(Link).attrs({ const StyledAnchor = styled.a` ${linkStyles}; + cursor: default; `; const HeaderWrap = styled(FlexWrap)` -- cgit From 521679c87c612d9f6b9a760edc4db44d17118a62 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 20 Dec 2018 09:56:48 -0800 Subject: Fix types --- packages/website/ts/@next/components/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/header.tsx') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 24bfa28ba..e886923df 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -29,7 +29,7 @@ interface NavItemProps { id?: string; text?: string; dropdownWidth?: number; - dropdownComponent?: React.ReactNode; + dropdownComponent?: React.FunctionComponent; shouldOpenInNewTab?: boolean; } -- cgit