Linting fixes

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;

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) => (

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'};

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[];
 }
 

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>
 

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;
 

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) => (

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};
     }
 `;
 

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;
 }

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"}]}
 

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;

packages/website/ts/@next/constants/globalStyle.tsx

@@ -6,6 +6,7 @@ export interface GlobalStyle {
         bgColor: string;
         textColor: string;
         linkColor: string;
+        dropdownButtonBg: string;
     };
 }
 

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 {

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>

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);

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'}

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;
 }
 

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 });
     }