Removed developers dropdown. Renamed developers link to docs

packages/website/ts/components/dropdowns/dropdown_developers.tsx

@@ -1,186 +1,188 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import styled, { withTheme } from 'styled-components';
-import { Button } from 'ts/components/button';
-import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
- import { IThemeValuesInterface } from 'ts/style/theme';
-import { Heading } from 'ts/components/text';
-import { WebsitePaths } from 'ts/types';
-import { constants } from 'ts/utils/constants';
+// Note (Piotr): This component is not used anymore, leaving it for now if we cahnge our minds
 
-import { Link } from '../documentation/shared/link';
+// import { Link } from '@0x/react-shared';
+// import * as _ from 'lodash';
+// import * as React from 'react';
+// import styled, { withTheme } from 'styled-components';
 
-interface Props {
-    theme: IThemeValuesInterface;
-}
+// import { Button } from 'ts/components/button';
+// import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
+//  import { IThemeValuesInterface } from 'ts/style/theme';
+// import { Heading } from 'ts/components/text';
+// import { WebsitePaths } from 'ts/types';
+// import { constants } from 'ts/utils/constants';
 
-interface LinkConfig {
-    label: string;
-    url: string;
-    shouldOpenInNewTab?: boolean;
-}
+// interface Props {
+//     theme: IThemeValuesInterface;
+// }
 
-const introData: LinkConfig[] = [
-    {
-        label: 'Build a relayer',
-        url: `${WebsitePaths.Wiki}#Build-A-Relayer`,
-    },
-    {
-        label: 'Develop on Ethereum',
-        url: `${WebsitePaths.Wiki}#Ethereum-Development`,
-    },
-    {
-        label: 'Make & take orders',
-        url: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`,
-    },
-    {
-        label: 'Use networked liquidity',
-        url: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`,
-    },
-    {
-        label: 'Use 0x Instant',
-        url: `${WebsitePaths.Wiki}#Get-Started-With-Instant`,
-    },
-    {
-        label: '0x Code Sandbox',
-        url: constants.URL_SANDBOX,
-    },
-];
+// interface LinkConfig {
+//     label: string;
+//     url: string;
+//     shouldOpenInNewTab?: boolean;
+// }
 
-const docsData: LinkConfig[] = [
-    {
-        label: '0x.js',
-        url: WebsitePaths.ZeroExJs,
-    },
-    {
-        label: '0x Connect',
-        url: WebsitePaths.Connect,
-    },
-    {
-        label: 'Smart Contract',
-        url: WebsitePaths.SmartContracts,
-    },
-];
+// const introData: LinkConfig[] = [
+//     {
+//         label: 'Build a relayer',
+//         url: `${WebsitePaths.Wiki}#Build-A-Relayer`,
+//     },
+//     {
+//         label: 'Develop on Ethereum',
+//         url: `${WebsitePaths.Wiki}#Ethereum-Development`,
+//     },
+//     {
+//         label: 'Make & take orders',
+//         url: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`,
+//     },
+//     {
+//         label: 'Use networked liquidity',
+//         url: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`,
+//     },
+//     {
+//         label: 'Use 0x Instant',
+//         url: `${WebsitePaths.Wiki}#Get-Started-With-Instant`,
+//     },
+//     {
+//         label: '0x Code Sandbox',
+//         url: constants.URL_SANDBOX,
+//     },
+// ];
 
-const linksData: LinkConfig[] = [
-    {
-        label: 'Wiki',
-        url: WebsitePaths.Wiki,
-    },
-    {
-        label: 'Github',
-        url: constants.URL_GITHUB_ORG,
-        shouldOpenInNewTab: true,
-    },
-    {
-        label: 'Protocol specification',
-        url: constants.URL_PROTOCOL_SPECIFICATION,
-        shouldOpenInNewTab: true,
-    },
-];
+// const docsData: LinkConfig[] = [
+//     {
+//         label: '0x.js',
+//         url: WebsitePaths.ZeroExJs,
+//     },
+//     {
+//         label: '0x Connect',
+//         url: WebsitePaths.Connect,
+//     },
+//     {
+//         label: 'Smart Contract',
+//         url: WebsitePaths.SmartContracts,
+//     },
+// ];
 
-export const DropdownDevelopers: React.FunctionComponent<Props> = withTheme((props: Props) => (
-    <>
-        <DropdownWrap>
-            <div>
-                <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}>
-                    Getting Started
-                </Heading>
+// const linksData: LinkConfig[] = [
+//     {
+//         label: 'Wiki',
+//         url: WebsitePaths.Wiki,
+//     },
+//     {
+//         label: 'Github',
+//         url: constants.URL_GITHUB_ORG,
+//         shouldOpenInNewTab: true,
+//     },
+//     {
+//         label: 'Protocol specification',
+//         url: constants.URL_PROTOCOL_SPECIFICATION,
+//         shouldOpenInNewTab: true,
+//     },
+// ];
 
-                <StyledGrid isCentered={false} isWrapped={true}>
-                    {_.map(introData, (item, index) => (
-                        <li key={`introLink-${index}`}>
-                            <Link to={item.url}>{item.label}</Link>
-                        </li>
-                    ))}
-                </StyledGrid>
-            </div>
+// export const DropdownDevelopers: React.FunctionComponent<Props> = withTheme((props: Props) => (
+//     <>
+//         <DropdownWrap>
+//             <div>
+//                 <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}>
+//                     Getting Started
+//                 </Heading>
 
-            <StyledWrap>
-                <Column width="calc(100% - 15px)">
-                    <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}>
-                        Popular Docs
-                    </Heading>
+//                 <StyledGrid isCentered={false} isWrapped={true}>
+//                     {_.map(introData, (item, index) => (
+//                         <li key={`introLink-${index}`}>
+//                             <Link to={item.url}>{item.label}</Link>
+//                         </li>
+//                     ))}
+//                 </StyledGrid>
+//             </div>
 
-                    <ul>
-                        {_.map(docsData, (item, index) => (
-                            <li key={`docsLink-${index}`}>
-                                <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}>
-                                    {item.label}
-                                </Link>
-                            </li>
-                        ))}
-                    </ul>
-                </Column>
+//             <StyledWrap>
+//                 <Column width="calc(100% - 15px)">
+//                     <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}>
+//                         Popular Docs
+//                     </Heading>
 
-                <Column width="calc(100% - 15px)">
-                    <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}>
-                        Useful Links
-                    </Heading>
+//                     <ul>
+//                         {_.map(docsData, (item, index) => (
+//                             <li key={`docsLink-${index}`}>
+//                                 <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}>
+//                                     {item.label}
+//                                 </Link>
+//                             </li>
+//                         ))}
+//                     </ul>
+//                 </Column>
 
-                    <ul>
-                        {_.map(linksData, (item, index) => (
-                            <li key={`usefulLink-${index}`}>
-                                <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}>
-                                    {item.label}
-                                </Link>
-                            </li>
-                        ))}
-                    </ul>
-                </Column>
-            </StyledWrap>
+//                 <Column width="calc(100% - 15px)">
+//                     <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}>
+//                         Useful Links
+//                     </Heading>
 
-            <StyledLink
-                to={WebsitePaths.Docs}
-                bgColor={props.theme.dropdownButtonBg}
-                isAccentColor={true}
-                isNoBorder={true}
-            >
-                View All Documentation
-            </StyledLink>
-        </DropdownWrap>
-    </>
-));
+//                     <ul>
+//                         {_.map(linksData, (item, index) => (
+//                             <li key={`usefulLink-${index}`}>
+//                                 <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}>
+//                                     {item.label}
+//                                 </Link>
+//                             </li>
+//                         ))}
+//                     </ul>
+//                 </Column>
+//             </StyledWrap>
 
-const DropdownWrap = styled.div`
-    padding: 15px 30px 75px 30px;
+//             <StyledLink
+//                 to={WebsitePaths.Docs}
+//                 bgColor={props.theme.dropdownButtonBg}
+//                 isAccentColor={true}
+//                 isNoBorder={true}
+//             >
+//                 View All Documentation
+//             </StyledLink>
+//         </DropdownWrap>
+//     </>
+// ));
 
-    a {
-        color: inherit;
-    }
+// const DropdownWrap = styled.div`
+//     padding: 15px 30px 75px 30px;
 
-    li {
-        margin: 8px 0;
-    }
-`;
+//     a {
+//         color: inherit;
+//     }
 
-const StyledGrid = styled(WrapGrid.withComponent('ul'))`
-    li {
-        width: 50%;
-        flex-shrink: 0;
-    }
-`;
+//     li {
+//         margin: 8px 0;
+//     }
+// `;
 
-const StyledWrap = styled(FlexWrap)`
-    padding-top: 20px;
-    margin-top: 30px;
-    position: relative;
+// const StyledGrid = styled(WrapGrid.withComponent('ul'))`
+//     li {
+//         width: 50%;
+//         flex-shrink: 0;
+//     }
+// `;
 
-    &:before {
-        content: '';
-        width: 100%;
-        height: 1px;
-        background-color: ${props => props.theme.dropdownColor};
-        opacity: 0.15;
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-`;
+// const StyledWrap = styled(FlexWrap)`
+//     padding-top: 20px;
+//     margin-top: 30px;
+//     position: relative;
 
-const StyledLink = styled(Button)`
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-`;
+//     &:before {
+//         content: '';
+//         width: 100%;
+//         height: 1px;
+//         background-color: ${props => props.theme.dropdownColor};
+//         opacity: 0.15;
+//         position: absolute;
+//         top: 0;
+//         left: 0;
+//     }
+// `;
+
+// const StyledLink = styled(Button)`
+//     width: 100%;
+//     position: absolute;
+//     bottom: 0;
+//     left: 0;
+// `;

packages/website/ts/components/header.tsx

@@ -7,15 +7,14 @@ import { Link } from 'ts/components/documentation/shared/link';
 import { Link } from '@0x/react-shared';
 
 import { Button } from 'ts/components/button';
-import { DropdownDevelopers } from 'ts/components/dropdowns/dropdown_developers';
 import { DropdownProducts } from 'ts/components/dropdowns/dropdown_products';
 import { DropdownResources } from 'ts/components/dropdowns/dropdown_resources';
 import { Hamburger } from 'ts/components/hamburger';
 import { Logo } from 'ts/components/logo';
 import { MobileNav } from 'ts/components/mobileNav';
 import { FlexWrap } from 'ts/components/newLayout';
- import { IThemeValuesInterface } from 'ts/style/theme';
 
+import { IThemeValuesInterface } from 'ts/style/theme';
 import { zIndex } from 'ts/style/z_index';
 
 import { WebsitePaths } from 'ts/types';
@@ -42,8 +41,8 @@ interface DropdownWrapInterface {
 const navItems: NavItemProps[] = [
     {
         id: 'why',
-        url: WebsitePaths.Why,
         text: 'Why 0x',
+        url: WebsitePaths.Why,
     },
     {
         id: 'products',
@@ -52,10 +51,9 @@ const navItems: NavItemProps[] = [
         dropdownWidth: 280,
     },
     {
-        id: 'developers',
-        text: 'Developers',
-        dropdownComponent: DropdownDevelopers,
-        dropdownWidth: 480,
+        id: 'docs',
+        text: 'Docs',
+        url: WebsitePaths.Docs,
     },
     {
         id: 'resources',
@@ -65,8 +63,8 @@ const navItems: NavItemProps[] = [
     },
     {
         id: 'about',
-        url: WebsitePaths.AboutMission,
         text: 'About',
+        url: WebsitePaths.AboutMission,
     },
 ];