aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--packages/website/package.json1
-rw-r--r--packages/website/ts/@next/components/aboutPageLayout.tsx19
-rw-r--r--packages/website/ts/@next/components/banner.tsx6
-rw-r--r--packages/website/ts/@next/components/button.tsx2
-rw-r--r--packages/website/ts/@next/components/definition.tsx7
-rw-r--r--packages/website/ts/@next/components/footer.tsx30
-rw-r--r--packages/website/ts/@next/components/header.tsx35
-rw-r--r--packages/website/ts/@next/components/newLayout.tsx12
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx2
-rw-r--r--packages/website/ts/@next/pages/instant.tsx3
-rw-r--r--packages/website/tsconfig.json5
11 files changed, 63 insertions, 59 deletions
diff --git a/packages/website/package.json b/packages/website/package.json
index fc98a1a1b..b0b0c8340 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -66,6 +66,7 @@
"react-loadable": "^5.5.0",
"react-popper": "^1.0.0-beta.6",
"react-redux": "^5.0.3",
+ "react-responsive": "^6.0.1",
"react-scroll": "0xproject/react-scroll#pr-330-and-replace-state",
"react-syntax-highlighter": "^10.1.1",
"react-tooltip": "^3.2.7",
diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx
index a5e8df7e8..f562bcff5 100644
--- a/packages/website/ts/@next/components/aboutPageLayout.tsx
+++ b/packages/website/ts/@next/components/aboutPageLayout.tsx
@@ -11,9 +11,10 @@ import { addFadeInAnimation } from 'ts/@next/constants/animations';
interface Props {
title: string;
- description: React.Node;
+ description: Node;
linkLabel?: string;
linkUrl?: string;
+ children?: Node;
}
export const AboutPageLayout = (props: Props) => (
@@ -28,9 +29,9 @@ export const AboutPageLayout = (props: Props) => (
<Column width="70%" maxWidth="800px">
<Column width="100%" maxWidth="680px">
- <AnimatedHeading size="medium">
- {props.title}
- </AnimatedHeading>
+ <AnimatedHeading size="medium">
+ {props.title}
+ </AnimatedHeading>
<AnimatedParagraph size="medium" marginBottom="60px" isMuted={0.65}>
{props.description}
@@ -38,14 +39,14 @@ export const AboutPageLayout = (props: Props) => (
{(props.linkLabel && props.linkUrl) &&
<AnimatedLink
- to={props.linkUrl}
- isWithArrow={true}
+ to={props.linkUrl}
+ isWithArrow={true}
>
- {props.linkLabel}
+ {props.linkLabel}
</AnimatedLink>
}
- </Column>
- </Column>
+ </Column>
+ </Column>
</Section>
{props.children}
diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx
index 40fe13bc1..e3ab98dcf 100644
--- a/packages/website/ts/@next/components/banner.tsx
+++ b/packages/website/ts/@next/components/banner.tsx
@@ -43,8 +43,8 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
<Border/>
<Border isBottom={true} />
- <Column colWidth="1/2" isPadLarge={true}>
- <CustomHeading isNoMargin={true}>{heading}</CustomHeading>
+ <Column>
+ <CustomHeading>{heading}</CustomHeading>
{subline &&
<Paragraph isMuted={0.5} isNoMargin={true}>
@@ -52,7 +52,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
</Paragraph>
}
</Column>
- <Column colWidth="1/2" isPadLarge={true}>
+ <Column>
<ButtonWrap>
{mainCta &&
<Button
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index bdf673495..cca4d1382 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -15,8 +15,8 @@ interface ButtonInterface {
isAccentColor?: boolean;
hasIcon?: boolean | string;
isInline?: boolean;
- type?: string;
href?: string;
+ to?: string;
onClick?: () => any;
theme?: {
textColor: string;
diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx
index e19f041c7..7f326bc52 100644
--- a/packages/website/ts/@next/components/definition.tsx
+++ b/packages/website/ts/@next/components/definition.tsx
@@ -18,7 +18,7 @@ interface Props {
icon: string;
iconSize?: 'medium' | 'large' | number;
title: string;
- description: React.Node;
+ description: Node;
actions?: Action[];
}
@@ -43,6 +43,7 @@ export const Definition = (props: Props) => (
<LinkWrap>
{props.actions.map((item, index) => (
<Button
+ key={`dlink-${index}`}
href={item.url}
isWithArrow={true}
isAccentColor={true}
@@ -56,7 +57,7 @@ export const Definition = (props: Props) => (
</Wrap>
);
-const Wrap = styled.div`
+const Wrap = styled.div<Props>`
max-width: ${props => props.isInline && '354px'};
& + & {
@@ -81,7 +82,7 @@ const Wrap = styled.div`
}
`;
-const TextWrap = styled.div`
+const TextWrap = styled.div<Props>`
width: 100%;
max-width: 560px;
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index 11d18c7f7..897bd1d51 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -1,10 +1,11 @@
import * as _ from 'lodash';
import * as React from 'react';
+import MediaQuery from 'react-responsive';
import { Link as ReactRouterLink } from 'react-router-dom';
import styled from 'styled-components';
import { Logo } from 'ts/@next/components/logo';
-import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout';
+import { Column, ColumnProps, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout';
import { NewsletterForm } from 'ts/@next/components/newsletter_form';
interface LinkInterface {
@@ -15,6 +16,7 @@ interface LinkInterface {
interface LinkRows {
heading: string;
+ isOnMobile?: boolean;
links: LinkInterface[];
}
@@ -65,25 +67,22 @@ export const Footer: React.StatelessComponent = () => (
<FooterWrap>
<FlexWrap>
<FooterColumn width="35%">
- <Logo isLight={true} />
+ <Logo />
<NewsletterForm />
</FooterColumn>
<FooterColumn width="55%">
<WrapGrid isCentered={false} isWrapped={true}>
- {_.map(linkRows, (row, index) => (
- <FooterSectionWrap
- key={`fc-${index}`}
- colWidth="1/4"
- isNoPadding={true}
- isMobileHidden={!row.isOnMobile}
- >
- <RowHeading>
- {row.heading}
- </RowHeading>
-
- <LinkList links={row.links} />
- </FooterSectionWrap>
+ {_.map(linkRows, (row: LinkRows, index) => (
+ <MediaQuery minWidth={row.isOnMobile ? 0 : 768}>
+ <FooterSectionWrap key={`fc-${index}`}>
+ <RowHeading>
+ {row.heading}
+ </RowHeading>
+
+ <LinkList links={row.links} />
+ </FooterSectionWrap>
+ </MediaQuery>
))}
</WrapGrid>
</FooterColumn>
@@ -124,7 +123,6 @@ const FooterColumn = styled(Column)`
}
@media (max-width: 768px) {
- display: ${props => props.isMobileHidden && 'none'};
text-align: left;
}
`;
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index c5c67ac80..c16e2f7b4 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -1,5 +1,6 @@
import _ from 'lodash';
import * as React from 'react';
+import MediaQuery from 'react-responsive';
import { Link as ReactRouterLink } from 'react-router-dom';
import styled, { withTheme } from 'styled-components';
@@ -10,11 +11,15 @@ import { Hamburger } from 'ts/@next/components/hamburger';
import { Logo } from 'ts/@next/components/logo';
import { MobileNav } from 'ts/@next/components/mobileNav';
import { FlexWrap } from 'ts/@next/components/newLayout';
+import { ThemeInteface } from 'ts/@next/components/siteWrap';
import { Paragraph } from 'ts/@next/components/text';
interface HeaderProps {
- isOpen: boolean;
+ isOpen?: boolean;
location?: Location;
+ isNavToggled?: boolean;
+ toggleMobileNav: () => void;
+ theme: ThemeInterface;
}
interface HeaderState {
@@ -89,7 +94,7 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
<StyledHeader isOpen={isOpen}>
<HeaderWrap>
<ReactRouterLink to="/next">
- <Logo/>
+ <Logo />
</ReactRouterLink>
<NavLinks>
@@ -102,13 +107,15 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
))}
</NavLinks>
- <TradeButton
- bgColor={theme.headerButtonBg}
- color="#ffffff"
- href="https://0xproject.com/portal"
- >
- Trade on 0x
- </TradeButton>
+ <MediaQuery minWidth={990}>
+ <TradeButton
+ bgColor={theme.headerButtonBg}
+ color="#ffffff"
+ href="https://0xproject.com/portal"
+ >
+ Trade on 0x
+ </TradeButton>
+ </MediaQuery>
<Hamburger onClick={toggleMobileNav}/>
<MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
@@ -120,12 +127,12 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
export const Header = withTheme(HeaderBase);
-const NavItem = (props): React.ReactNode => {
- const { link, index } = props;
+const NavItem = (props: NavItem): React.ReactNode => {
+ const { link } = props;
const Subnav = link.dropdownComponent;
return (
- <LinkWrap key={`nav-${index}`}>
+ <LinkWrap>
<StyledNavLink
to={link.url}
isTransparent={true}
@@ -253,8 +260,4 @@ const DropdownWrap = styled.div<DropdownWrapInterface>`
const TradeButton = styled(Button)`
padding: 14px 22px !important;
-
- @media (max-width: 990px) {
- display: none !important;
- }
`;
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
index 3126db7ee..fe0a290c5 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -1,7 +1,8 @@
import * as React from 'react';
import styled from 'styled-components';
-interface WrapProps {
+export interface WrapProps {
+ bgColor?: string;
offsetTop?: string;
maxWidth?: string;
wrapWidth?: string;
@@ -11,7 +12,7 @@ interface WrapProps {
isWrapped?: boolean;
}
-interface WrapGridProps {
+export interface WrapGridProps {
isWrapped?: boolean;
isCentered?: boolean;
}
@@ -20,7 +21,7 @@ export interface WrapStickyProps {
offsetTop?: string;
}
-interface SectionProps extends WrapProps {
+export interface SectionProps extends WrapProps {
isPadded?: boolean;
isFullWidth?: boolean;
isFlex?: boolean;
@@ -28,15 +29,16 @@ interface SectionProps extends WrapProps {
flexBreakpoint?: string;
maxWidth?: string;
bgColor?: 'dark' | 'light' | string;
+ children: any;
}
-interface FlexProps {
+export interface FlexProps {
padding?: string;
isFlex?: boolean;
flexBreakpoint?: string;
}
-interface ColumnProps {
+export interface ColumnProps {
padding?: string;
width?: string;
maxWidth?: string;
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index 92ae76235..f2851d2d2 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -71,7 +71,7 @@ const GLOBAL_THEMES: ThemeInterface = {
},
};
-export class SiteWrap extends React.Component {
+export class SiteWrap extends React.Component<Props> {
public state = {
isMobileNavOpen: false,
};
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index 3608afebf..fbc56bff7 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -72,7 +72,7 @@ export const Next0xInstant = () => (
<MarqueeWrap>
<div>
{[...Array(12)].map((item, index) => (
- <Card index={index}>
+ <Card key={`card-${index}`} index={index}>
<img src={`/images/@next/0x-instant/widget-${(index % 6) + 1}.png`} />
</Card>
))}
@@ -83,6 +83,7 @@ export const Next0xInstant = () => (
<Section>
{_.map(featuresData, (item, index) => (
<Definition
+ key={`definition-${index}`}
icon={item.icon}
title={item.title}
description={item.description}
diff --git a/packages/website/tsconfig.json b/packages/website/tsconfig.json
index 1c0c35984..67573971f 100644
--- a/packages/website/tsconfig.json
+++ b/packages/website/tsconfig.json
@@ -28,8 +28,5 @@
]
},
- "include": ["./ts/**/*"],
- "reportFiles": [
- "./ts/@next/**/*"
- ],
+ "include": ["./ts/**/*"]
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-05 21:15:17 +0800