Edits why page, removes zenscroll

5 files changed, 29 insertions, 48 deletions

diff --git a/packages/website/package.json b/packages/website/package.json
index e5e07c8ec..7bb850bb5 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -51,6 +51,7 @@
         "query-string": "^6.0.0",
         "rc-slider": "^8.6.3",
         "react": "^16.4.2",
+        "react-anchor-link-smooth-scroll": "^1.0.11",
         "react-copy-to-clipboard": "^5.0.0",
         "react-document-title": "^2.0.3",
         "react-dom": "^16.4.2",
@@ -70,8 +71,7 @@
         "thenby": "^1.2.3",
         "truffle-contract": "2.0.1",
         "web3-provider-engine": "14.0.6",
-        "xml-js": "^1.6.4",
-        "zenscroll": "^4.0.2"
+        "xml-js": "^1.6.4"
     },
     "devDependencies": {
         "@types/accounting": "^0.4.1",
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
index 160c46ad5..c7c90c0ba 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -76,6 +76,7 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
         -webkit-font-smoothing: antialiased;
         color: ${props => props.theme.textColor};
         font-feature-settings: "zero";
+        scroll-behavior: smooth;
     }
 
     .visuallyHidden {
diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx
index cbc113888..11177d462 100644
--- a/packages/website/ts/@next/pages/about/mission.tsx
+++ b/packages/website/ts/@next/pages/about/mission.tsx
@@ -78,4 +78,4 @@ export const NextAboutMission = () => (
       </Wrap>
     </Section>
   </SiteWrap>
-);
\ No newline at end of file
+);
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index 028f211da..88c0ca69b 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/@next/pages/why.tsx
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
+import AnchorLink from 'react-anchor-link-smooth-scroll';
 import styled from 'styled-components';
-import zenscroll from 'zenscroll';
 
 import { colors } from 'ts/style/colors';
 
@@ -63,28 +63,6 @@ const functionalityData = [
 ];
 
 export class NextWhy extends React.PureComponent {
-    public benefitsRef = React.createRef();
-    public casesRef = React.createRef();
-    public functionalityRef = React.createRef();
-
-    public scrollToSection = (sectionName: 'benefits' | 'cases' | 'features') => {
-        zenscroll.to(this[`${sectionName}Ref`]);
-    }
-
-    public scrollToBenefits = () => {
-        // was going to onClick={() => this.scrollToSection('name')} but ts/linting
-        // doesnt like it, lets do this for now
-        this.scrollToSection('benefits');
-    }
-
-    public scrollToCases = () => {
-        this.scrollToSection('cases');
-    }
-
-    public scrollToFunctionality = () => {
-        this.scrollToSection('functionality');
-    }
-
     public render(): React.ReactNode {
         return (
             <SiteWrap theme="dark">
@@ -138,25 +116,22 @@ export class NextWhy extends React.PureComponent {
               <Section>
                 <Wrap>
                   <Column colWidth="1/3">
-                      <WrapSticky>
-                          <ChapterLink href="#" onClick={this.scrollToBenefits}>Benefits</ChapterLink>
-                          <ChapterLink href="#" onClick={this.scrollToBenefits}>Use Cases</ChapterLink>
-                          <ChapterLink href="#" onClick={this.scrollToBenefits}>Features</ChapterLink>
-                      </WrapSticky>
+                      <NavStickyWrap>
+                          <ChapterLink offset="60" href="#benefits">Benefits</ChapterLink>
+                          <ChapterLink offset="60" href="#cases">Use Cases</ChapterLink>
+                          <ChapterLink offset="60" href="#functionality">Features</ChapterLink>
+                      </NavStickyWrap>
                   </Column>
 
                   <Column colWidth="2/3">
-                        <SectionWrap ref={this.benefitsRef}>
+                        <SectionWrap id="benefits">
                             <Heading size="medium">What 0x offers</Heading>
 
                             {_.map(offersData, (item, index) => (
                                 <ChapterItemWrap>
                                     <Icon name={item.icon} size="medium" margin={[0, 0, 22, 0]} />
 
-                                    <Heading
-                                        marginBottom="15px"
-                                        isNoPadding={true}
-                                    >
+                                    <Heading marginBottom="15px">
                                         {item.title}
                                     </Heading>
 
@@ -167,22 +142,19 @@ export class NextWhy extends React.PureComponent {
                             ))}
                         </SectionWrap>
 
-                        <SectionWrap ref={this.casesRef}>
+                        <SectionWrap id="cases">
                             <Heading size="medium">Use Cases</Heading>
                             <Paragraph isMuted={true}>slider</Paragraph>
                         </SectionWrap>
 
-                        <SectionWrap ref={this.functionalityRef}>
+                        <SectionWrap id="functionality">
                             <Heading size="medium">Exchange Functionality</Heading>
 
                             {_.map(functionalityData, (item, index) => (
                                 <ChapterItemWrap>
                                     <Icon name={item.icon} size="medium" margin={[0, 0, 22, 0]} />
 
-                                    <Heading
-                                        marginBottom="15px"
-                                        isNoPadding={true}
-                                    >
+                                    <Heading marginBottom="15px">
                                         {item.title}
                                     </Heading>
 
@@ -231,13 +203,21 @@ const SectionWrap = styled.div`
     }
 
     @media (max-width: ${BREAKPOINTS.mobile}) {
+        text-align: left;
+
         & + &:before {
             width: 100%;
         }
     }
 `;
 
-const ChapterLink = styled.a`
+const NavStickyWrap = styled(WrapSticky)`
+    @media (max-width: ${BREAKPOINTS.mobile}) {
+        display: none;
+    }
+`;
+
+const ChapterLink = styled(AnchorLink)`
     color: ${props => props.theme.textColor};
     font-size: 22px;
     margin-bottom: 15px;
diff --git a/yarn.lock b/yarn.lock
index 4cbd1eefd..9678533aa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12909,6 +12909,11 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-anchor-link-smooth-scroll@^1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/react-anchor-link-smooth-scroll/-/react-anchor-link-smooth-scroll-1.0.11.tgz#e53f55b89382df0d85470ebd20e6b349d62eb19d"
+  integrity sha512-PaAFtqs00eXbbYPTaiG7sEL2EkVfs+PiarzMnMN66JQWamORiNOzyhumW2tImKeKFUZeFdifqz9iJy/2e4RLnw==
+
 react-copy-to-clipboard@^5.0.0:
   version "5.0.1"
   resolved "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz#8eae107bb400be73132ed3b6a7b4fb156090208e"
@@ -17484,11 +17489,6 @@ z-schema@^3.19.1:
   optionalDependencies:
     commander "^2.7.1"
 
-zenscroll@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/zenscroll/-/zenscroll-4.0.2.tgz#e8d5774d1c0738a47bcfa8729f3712e2deddeb25"
-  integrity sha1-6NV3TRwHOKR7z6hynzcS4t7d6yU=
-
 zeppelin-solidity@1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/zeppelin-solidity/-/zeppelin-solidity-1.8.0.tgz#049fcde7daea9fc85210f8c6db9f8cd1ab8a853a"