diff --git a/packages/website/ts/components/aboutPageLayout.tsx b/packages/website/ts/components/aboutPageLayout.tsx index 51c1a661eb..ef08614dad 100644 --- a/packages/website/ts/components/aboutPageLayout.tsx +++ b/packages/website/ts/components/aboutPageLayout.tsx @@ -34,9 +34,9 @@ export const AboutPageLayout = (props: Props) => ( {props.title} - + {props.description} - + {props.linkLabel && (props.href || props.to) && ( any; + onClick?: (e: any) => any; theme?: ThemeInterface; shouldUseAnchorTag?: boolean; } export const Button: React.StatelessComponent = (props: ButtonInterface) => { - const { children, href, isWithArrow, to, shouldUseAnchorTag, target } = props; + const { children, href, isWithArrow, to, shouldUseAnchorTag, target, isDisabled, className } = props; + const isButton = !href && !to; let linkElem; if (href || shouldUseAnchorTag) { linkElem = 'a'; } if (to) { - linkElem = ReactRouterLink; + linkElem = withFilteredProps(ReactRouterLink, ['className', 'href', 'to', 'onClick', 'target']); } const Component = linkElem ? ButtonBase.withComponent(linkElem) : ButtonBase; const targetProp = href && target ? { target } : {}; + const buttonProps = isButton ? { disabled: isDisabled } : {}; return ( - + {children} {isWithArrow && ( diff --git a/packages/website/ts/components/image.tsx b/packages/website/ts/components/image.tsx index 0137cfc97f..ac73646b7d 100644 --- a/packages/website/ts/components/image.tsx +++ b/packages/website/ts/components/image.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; +import { withFilteredProps } from 'ts/utils/filter_props'; interface Props { alt?: string; @@ -12,6 +13,6 @@ const ImageClass: React.FunctionComponent = (props: Props) => { return ; }; -export const Image = styled(ImageClass)` +export const Image = styled(withFilteredProps(ImageClass, ['alt', 'src']))` margin: ${props => props.isCentered && `0 auto`}; `; diff --git a/packages/website/ts/pages/about/jobs.tsx b/packages/website/ts/pages/about/jobs.tsx index ad46d29649..184b917cfc 100644 --- a/packages/website/ts/pages/about/jobs.tsx +++ b/packages/website/ts/pages/about/jobs.tsx @@ -92,10 +92,10 @@ export class NextAboutJobs extends React.Component - + To create a tokenized world where all value can flow freely. - + We are growing an ecosystem of businesses and projects by solving difficult challenges to make our technology intuitive, flexible, and accessible to all. Join us in building infrastructure upon which the exchange of all assets will take place. diff --git a/packages/website/ts/pages/about/mission.tsx b/packages/website/ts/pages/about/mission.tsx index 69fe07f15b..5e035e9db3 100644 --- a/packages/website/ts/pages/about/mission.tsx +++ b/packages/website/ts/pages/about/mission.tsx @@ -7,7 +7,7 @@ import { Definition } from 'ts/components/definition'; import { DocumentTitle } from 'ts/components/document_title'; import { Image } from 'ts/components/image'; import { Column, Section } from 'ts/components/newLayout'; -import { Heading } from 'ts/components/text'; +import { Heading, Paragraph } from 'ts/components/text'; import { constants } from 'ts/utils/constants'; import { documentConstants } from 'ts/utils/document_meta_constants'; @@ -35,7 +35,13 @@ const values = [ export const NextAboutMission = () => ( + + 0x is important infrastructure for the emerging crypto economy and enables markets to be created that couldn't have existed before. As more assets become tokenized, public blockchains provide the opportunity to establish a new financial stack that is more efficient, transparent, and equitable than any system in the past. + + + } linkLabel="Our mission and values" href={constants.URL_MISSION_AND_VALUES_BLOG_POST} > @@ -57,6 +63,7 @@ export const NextAboutMission = () => ( {_.map(values, (item, index) => ( ( title="Press Highlights" description={ <> - + Want to write about 0x? Get in touch. diff --git a/packages/website/ts/pages/about/team.tsx b/packages/website/ts/pages/about/team.tsx index 82506a3cf0..a6e379edc6 100644 --- a/packages/website/ts/pages/about/team.tsx +++ b/packages/website/ts/pages/about/team.tsx @@ -191,7 +191,13 @@ const advisors: TeamMember[] = [ export const NextAboutTeam = () => ( + + We are a distributed team with backgrounds in engineering, academic research, business, and design. The 0x Core Team is passionate about accelerating the adoption decentralized technology and believe in its potential to be an equalizing force in the world. Join us and do the most impactful work of your life. + + + } linkLabel="Join the team" to={WebsitePaths.AboutJobs} > diff --git a/packages/website/ts/pages/instant/select.tsx b/packages/website/ts/pages/instant/select.tsx index d4146cfb03..07ae8b21ad 100644 --- a/packages/website/ts/pages/instant/select.tsx +++ b/packages/website/ts/pages/instant/select.tsx @@ -26,13 +26,12 @@ export const Select: React.FunctionComponent = ({ }) => { return ( - + {shouldIncludeEmpty && } {items.map((item, index) => ( - + ); diff --git a/packages/website/ts/utils/filter_props.tsx b/packages/website/ts/utils/filter_props.tsx new file mode 100644 index 0000000000..3ecb83c402 --- /dev/null +++ b/packages/website/ts/utils/filter_props.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; + +interface FilteredPropsInterface { + [key: string]: any; +} + +export const withFilteredProps = (Component: React.ComponentType, allowedProps: string[]) => + class WithFilteredProps extends React.Component { + constructor(props: FilteredPropsInterface) { + super(props); + } + public filterProps(): any { + const props = this.props; + /* tslint:disable:no-any */ + const filteredProps: FilteredPropsInterface = {}; + let key; + + for (key in this.props) { + if (allowedProps.includes(key)) { + /* tslint:disable:no-any */ + filteredProps[key] = props[key]; + } + } + + /* tslint:disable:no-any */ + return filteredProps; + } + public render(): React.ReactNode { + const filteredProps = this.filterProps(); + return {this.props.children}; + } + };