diff options
Diffstat (limited to 'packages/website/ts/@next')
18 files changed, 39 insertions, 34 deletions
diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx index f562bcff5..71cb7ef85 100644 --- a/packages/website/ts/@next/components/aboutPageLayout.tsx +++ b/packages/website/ts/@next/components/aboutPageLayout.tsx @@ -11,7 +11,7 @@ import { addFadeInAnimation } from 'ts/@next/constants/animations'; interface Props { title: string; - description: Node; + description: React.ReactNode | string; linkLabel?: string; linkUrl?: string; children?: Node; diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx index 7033ec88d..0e97aed1a 100644 --- a/packages/website/ts/@next/components/blockIconLink.tsx +++ b/packages/website/ts/@next/components/blockIconLink.tsx @@ -8,8 +8,8 @@ interface Props { icon: string; title: string; linkLabel: string; - linkUrl: string; - linkAction: () => void; + linkUrl?: string; + linkAction?: () => void; } export const BlockIconLink = (props: Props) => ( diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index cca4d1382..4c646e199 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -16,6 +16,7 @@ interface ButtonInterface { hasIcon?: boolean | string; isInline?: boolean; href?: string; + type?: string; to?: string; onClick?: () => any; theme?: { @@ -57,7 +58,7 @@ const ButtonBase = styled.button<ButtonInterface>` border: 1px solid transparent; display: inline-block; background-color: ${props => props.bgColor || colors.brandLight}; - background-color: ${props => (props.isTransparent || props.isWithArrow) && 'transparent'} + background-color: ${props => (props.isTransparent || props.isWithArrow) && 'transparent'}; border-color: ${props => (props.isTransparent && !props.isWithArrow) && 'rgba(255, 255, 255, .4)'}; color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)}; padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'}; diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx index 7f326bc52..982fbfe72 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: Node; + description: Node | string; actions?: Action[]; } diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx index 317302d44..82e79a23b 100644 --- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx +++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx @@ -113,7 +113,13 @@ export const DropdownDevelopers = withTheme((props: Props) => ( </Column> <Column width="calc(100% - 15px)"> - <Heading asElement="h4" size={14} color="inherit" isMuted={0.35}> + <Heading + asElement="h4" + size={14} + color="inherit" + marginBottom="15px" + isMuted={0.35} + > Useful Links </Heading> diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index b982538da..437f9f19e 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -127,7 +127,7 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> { export const Header = withTheme(HeaderBase); -const NavItem = (props: { link: NavItem }): React.ReactNode => { +const NavItem = (props: { link: NavItem; key: string }): React.ReactNode => { const { link } = props; const Subnav = link.dropdownComponent; diff --git a/packages/website/ts/@next/components/heroImage.tsx b/packages/website/ts/@next/components/heroImage.tsx index e16e29199..33195f42b 100644 --- a/packages/website/ts/@next/components/heroImage.tsx +++ b/packages/website/ts/@next/components/heroImage.tsx @@ -4,7 +4,7 @@ import styled from 'styled-components'; import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; interface Props { - image: React.Node; + image: React.ReactNode; } export const LandingAnimation = (props: Props) => ( diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx index 89d954cb5..2423f07b5 100644 --- a/packages/website/ts/@next/components/logo.tsx +++ b/packages/website/ts/@next/components/logo.tsx @@ -27,7 +27,7 @@ const Icon = styled(LogoIcon)<LogoInterface>` flex-shrink: 0; path { - fill: ${(props => props.theme.textColor}; + fill: ${props => props.theme.textColor}; } `; diff --git a/packages/website/ts/@next/components/modals/input.tsx b/packages/website/ts/@next/components/modals/input.tsx index 351df105b..c6f0f8c36 100644 --- a/packages/website/ts/@next/components/modals/input.tsx +++ b/packages/website/ts/@next/components/modals/input.tsx @@ -10,7 +10,7 @@ export enum InputWidth { interface InputProps { name: string; - width: InputWidth; + width?: InputWidth; label: string; type?: string; } diff --git a/packages/website/ts/@next/components/modals/modal_contact.tsx b/packages/website/ts/@next/components/modals/modal_contact.tsx index 7b976451d..4e024a1a0 100644 --- a/packages/website/ts/@next/components/modals/modal_contact.tsx +++ b/packages/website/ts/@next/components/modals/modal_contact.tsx @@ -51,7 +51,7 @@ export class ModalContact extends React.Component<Props> { onDismiss={onDismiss} > <StyledDialogContent> - <Form onSubmit={this._onSubmit.bind(this)} isSuccessful={isSuccessful}> + <Form onSubmit={this._onSubmitAsync.bind(this)} isSuccessful={isSuccessful}> <Heading color={colors.textDarkPrimary} size={34} asElement="h2">Contact the 0x Core Team</Heading> <Paragraph isMuted={true} color={colors.textDarkPrimary}>If you're considering building on 0x, we're happy to answer your questions. Fill out the form so we can connect you with the right person to help you get started.</Paragraph> <InputRow> @@ -113,7 +113,7 @@ export class ModalContact extends React.Component<Props> { </> ); } - private async _onSubmit(e): void { + private async _onSubmitAsync(e: Event): Promise<void> { e.preventDefault(); // const email = this.emailInput.current.value; @@ -138,18 +138,10 @@ export class ModalContact extends React.Component<Props> { const json = await response.json(); this.setState({ ...this.state, isSuccessful: true }); - - console.log(response); } catch (e) { this.setState({ ...this.state, errors: [] }); - console.log(e); } } - private async _onDone(e): void { - e.preventDefault(); - - this.props.onDismiss(); - } } // Handle errors: {"errors":[{"location":"body","param":"name","msg":"Invalid value"},{"location":"body","param":"email","msg":"Invalid value"}]} diff --git a/packages/website/ts/@next/components/newsletter_form.tsx b/packages/website/ts/@next/components/newsletter_form.tsx index 455e7b54c..381dca53b 100644 --- a/packages/website/ts/@next/components/newsletter_form.tsx +++ b/packages/website/ts/@next/components/newsletter_form.tsx @@ -27,7 +27,7 @@ const Input: React.ReactNode = React.forwardRef((props: InputProps, ref) => { <StyledInput ref={ref} id={id} placeholder={label} {...props} /> </InnerInputWrapper> ); -}; +}); export class NewsletterForm extends React.Component { public emailInput = React.createRef(); @@ -38,7 +38,7 @@ export class NewsletterForm extends React.Component { const {isSubmitted} = this.state; return ( - <StyledForm onSubmit={this._onSubmit.bind(this)}> + <StyledForm onSubmit={this._onSubmitAsync.bind(this)}> <InputWrapper> <Input isSubmitted={isSubmitted} name="email" type="email" label="Email Address" ref={this.emailInput} required /> @@ -54,7 +54,7 @@ export class NewsletterForm extends React.Component { ); } - private async _onSubmit(e) { + private async _onSubmitAsync(e: Event): Promise<void> { e.preventDefault(); const email = this.emailInput.current.value; diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index cf99867be..1047a5cb8 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -6,6 +6,7 @@ export interface GlobalStyle { bgColor: string; textColor: string; linkColor: string; + dropdownButtonBg: string; }; } diff --git a/packages/website/ts/@next/constants/utilities.tsx b/packages/website/ts/@next/constants/utilities.tsx index ab703c8f7..685b9e6f9 100644 --- a/packages/website/ts/@next/constants/utilities.tsx +++ b/packages/website/ts/@next/constants/utilities.tsx @@ -1,6 +1,6 @@ export interface PaddingInterface { - padding?: number | Array<'large' | 'default', 'small' | number>; - margin?: number | Array<'large' | 'default', 'small' | number>; + padding?: number | Array<'large' | 'default' | 'small' | number>; + margin?: number | Array<'large' | 'default' | 'small' | number>; } interface PaddingSizes { diff --git a/packages/website/ts/@next/pages/about/jobs.tsx b/packages/website/ts/@next/pages/about/jobs.tsx index 71192d884..9b0b74a90 100644 --- a/packages/website/ts/@next/pages/about/jobs.tsx +++ b/packages/website/ts/@next/pages/about/jobs.tsx @@ -106,9 +106,9 @@ const Position = ({ position }) => ( <StyledColumn width="50%"> <Paragraph isMuted={true}>{position.location}</Paragraph> - </Column> + </StyledColumn> - <Column colWidth="1/3"> + <Column width="20%"> <Paragraph><Link href={position.href}>Apply</Link></Paragraph> </Column> </FlexWrap> diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx index 2038ce160..86a2485ce 100644 --- a/packages/website/ts/@next/pages/instant.tsx +++ b/packages/website/ts/@next/pages/instant.tsx @@ -9,7 +9,7 @@ import {Hero} from 'ts/@next/components/hero'; import {Button} from 'ts/@next/components/button'; import {Definition} from 'ts/@next/components/definition'; -import {Section} from 'ts/@next/components/newLayout'; +import {Section, SectionProps} from 'ts/@next/components/newLayout'; import {SiteWrap} from 'ts/@next/components/siteWrap'; import {Heading, Paragraph} from 'ts/@next/components/text'; import { Configurator } from 'ts/@next/pages/instant/configurator'; @@ -135,7 +135,7 @@ const fadeUp = keyframes` } `; -const ConfiguratorSection = styled(Section)` +const ConfiguratorSection = styled(Section)<SectionProps>` @media (max-width: 1050px) { display: none; } @@ -168,7 +168,7 @@ const MarqueeWrap = styled.div` } `; -const Card = styled.div` +const Card = styled.div<{index: number}>` opacity: 0; flex-shrink: 0; transform: translateY(10px); diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx index d63ea118b..c71d2b238 100644 --- a/packages/website/ts/@next/pages/instant/config_generator.tsx +++ b/packages/website/ts/@next/pages/instant/config_generator.tsx @@ -6,13 +6,13 @@ import * as _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; +import { ConfigGeneratorAddressInput } from 'ts/@next/pages/instant/config_generator_address_input'; +import { FeePercentageSlider } from 'ts/@next/pages/instant/fee_percentage_slider'; import { CheckMark } from 'ts/components/ui/check_mark'; import { Container } from 'ts/components/ui/container'; import { MultiSelect } from 'ts/components/ui/multi_select'; import { Spinner } from 'ts/components/ui/spinner'; import { Text } from 'ts/components/ui/text'; -import { ConfigGeneratorAddressInput } from 'ts/@next/pages/instant/config_generator_address_input'; -import { FeePercentageSlider } from 'ts/@next/pages/instant/fee_percentage_slider'; import { colors } from 'ts/style/colors'; import { WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; @@ -314,7 +314,11 @@ const OptionalText = styled.span` flex-shrink: 0; `; -const CheckboxText = styled.span` +interface CheckboxTextProps { + isSelected?: boolean; +} + +const CheckboxText = styled.span<CheckboxTextProps>` font-size: 14px; line-height: 18px; color: ${props => props.isSelected ? colors.brandDark : '#666666'} diff --git a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx index 47b8d2b8f..512ae06b4 100644 --- a/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx +++ b/packages/website/ts/@next/pages/instant/fee_percentage_slider.tsx @@ -10,6 +10,7 @@ const SliderWithTooltip = (Slider as any).createSliderWithTooltip(Slider); export interface FeePercentageSliderProps { value: number; + isDisabled?: boolean; onChange: (value: number) => void; } diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index f0190ede5..aa3e829b5 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -35,7 +35,7 @@ export class NextLanding extends React.Component<Props> { ); } - private _onOpenContactModal(e): void { + private _onOpenContactModal(e: Event): void { e.preventDefault(); this.setState({ isContactModalOpen: true }); } |