Header changes, mobile alignments

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)`

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;

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'};
     }
 `;
 

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>

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;
         }