diff options
5 files changed, 72 insertions, 17 deletions
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx index 532aa7314..8f5f988d5 100644 --- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx +++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx @@ -65,22 +65,39 @@ export const DropdownDevelopers = withTheme((props: Props) => ( <> <DropdownWrap> <div> - <Heading asElement="h4" size={14} color="inherit" isMuted={0.35}> + <Heading + asElement="h4" + size={14} + color="inherit" + marginBottom="15px" + isMuted={0.35} + > Getting Started </Heading> - <WrapGrid isCentered={false} isWrapped={true}> + <StyledGrid isCentered={false} isWrapped={true}> {_.map(introData, (item, index) => ( - <RouterLink key={`introLink-${index}`} to={item.url}> - {item.label} - </RouterLink> + <li> + <RouterLink + key={`introLink-${index}`} + to={item.url} + > + {item.label} + </RouterLink> + </li> ))} - </WrapGrid> + </StyledGrid> </div> <StyledWrap> <Column colWidth="1/2" isNoPadding={true}> - <Heading asElement="h4" size={14} color="inherit" isMuted={0.35}> + <Heading + asElement="h4" + size={14} + color="inherit" + marginBottom="15px" + isMuted={0.35} + > Popular Docs </Heading> @@ -125,6 +142,17 @@ const DropdownWrap = styled.div` a { color: inherit; } + + li { + margin: 8px 0; + } +`; + +const StyledGrid = styled(WrapGrid.withComponent('ul'))` + li { + width: 50%; + flex-shrink: 0; + } `; const StyledWrap = styled(Wrap)` diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index b0dabf98d..73f615643 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -36,7 +36,11 @@ const mobileProductLinks = [ ]; const navItems: NavItem[] = [ - { id: 'why', url: '/next/why', text: 'Why 0x' }, + { + id: 'why', + url: '/next/why', + text: 'Why 0x', + }, { id: 'products', url: '/next/0x-instant', @@ -49,10 +53,18 @@ const navItems: NavItem[] = [ url: '#', text: 'Developers', dropdownComponent: DropdownDevelopers, - dropdownWidth: 450, + dropdownWidth: 480, + }, + { + id: 'about', + url: '/next/about/mission', + text: 'About', + }, + { + id: 'blog', + url: '#', + text: 'Blog', }, - { id: 'about', url: '/next/about/mission', text: 'About' }, - { id: 'blog', url: '#', text: 'Blog' }, ]; class HeaderBase extends React.Component<HeaderProps, HeaderState> { @@ -72,13 +84,13 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> { return ( <Wrapper key={`nav-${index}`}> - <Link + <NavLink href={link.url} isTransparent={true} isNoBorder={true} > {link.text} - </Link> + </NavLink> {link.dropdownComponent && <DropdownWrap width={link.dropdownWidth}> @@ -118,7 +130,9 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> { </MobileProductLinksWrap> <StyledButtonWrap> - {_.map(navItems, (link, index) => this.getNavItem(link, index))} + {_.map(navItems, (link, index) => ( + this.getNavItem(link, index) + ))} </StyledButtonWrap> </Nav> @@ -152,6 +166,17 @@ const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>` } `; +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; diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 682ffbc5a..bba21d593 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -35,6 +35,7 @@ interface ColumnProps { isNoPadding?: boolean; isPadLarge?: boolean; isFlexGrow?: boolean; + isMobileCentered?: boolean; bgColor?: string; } @@ -97,7 +98,7 @@ export const Section = styled.section<SectionProps>` @media (max-width: ${BREAKPOINTS.mobile}) { margin-bottom: ${props => !props.isNoMargin && `${GUTTER / 2}px`}; - padding: ${PADDING_SIZES.default}; + padding: ${props => props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default}; } `; @@ -148,6 +149,7 @@ export const Column = styled.div<ColumnProps>` @media (max-width: ${BREAKPOINTS.mobile}) { padding: ${props => !props.isNoPadding && (props.isPadLarge ? '40px 30px' : '15px')}; margin-bottom: 20px; + text-align: ${props => props.isMobileCentered && 'center'}; } `; diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx index d94da18ec..9e7ed7402 100644 --- a/packages/website/ts/@next/components/sections/landing/hero.tsx +++ b/packages/website/ts/@next/components/sections/landing/hero.tsx @@ -14,7 +14,7 @@ export const SectionLandingHero = () => ( </WrapCentered> </Column> - <Column colWidth="1/2"> + <Column colWidth="1/2" isMobileCentered={true}> <Heading size="large"> Powering Decentralized Exchange </Heading> diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index 34b7031b3..28d8e4b5e 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -72,7 +72,7 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> ` --defaultParagraph: 16px; // TO DO --mediumParagraph: 16px; // TO DO --largeParagraph: 18px; // TO DO - --smallIcon: 45px; + --smallIcon: 55px; --mediumIcon: 55px; --largeIcon: 115px; } |