aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-11 00:38:23 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-11 00:38:23 +0800
commit8d0b6702c0bd1e6e42a847ada731d1857aedcc62 (patch)
treec958d3367c1bbc212dea431cee5189007a7e5b98 /packages/website/ts/@next
parent9abd1b79e1a1889e7ce5a1655810ac844109b613 (diff)
downloaddexon-sol-tools-8d0b6702c0bd1e6e42a847ada731d1857aedcc62.tar
dexon-sol-tools-8d0b6702c0bd1e6e42a847ada731d1857aedcc62.tar.gz
dexon-sol-tools-8d0b6702c0bd1e6e42a847ada731d1857aedcc62.tar.bz2
dexon-sol-tools-8d0b6702c0bd1e6e42a847ada731d1857aedcc62.tar.lz
dexon-sol-tools-8d0b6702c0bd1e6e42a847ada731d1857aedcc62.tar.xz
dexon-sol-tools-8d0b6702c0bd1e6e42a847ada731d1857aedcc62.tar.zst
dexon-sol-tools-8d0b6702c0bd1e6e42a847ada731d1857aedcc62.zip
Edits why page, removes zenscroll
Diffstat (limited to 'packages/website/ts/@next')
-rw-r--r--packages/website/ts/@next/constants/globalStyle.tsx1
-rw-r--r--packages/website/ts/@next/pages/about/mission.tsx2
-rw-r--r--packages/website/ts/@next/pages/why.tsx60
3 files changed, 22 insertions, 41 deletions
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;