From 5df789bd0512b06d5a83476c7364aea05a1d1701 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Wed, 12 Dec 2018 15:45:38 +0100
Subject: Added contact modal

---
 .../website/ts/@next/components/modals/input.tsx   |  65 +++++++
 .../ts/@next/components/modals/modal_contact.tsx   | 198 +++++++++++++++++++++
 2 files changed, 263 insertions(+)
 create mode 100644 packages/website/ts/@next/components/modals/input.tsx
 create mode 100644 packages/website/ts/@next/components/modals/modal_contact.tsx

(limited to 'packages/website/ts/@next/components/modals')

diff --git a/packages/website/ts/@next/components/modals/input.tsx b/packages/website/ts/@next/components/modals/input.tsx
new file mode 100644
index 000000000..eee2d4102
--- /dev/null
+++ b/packages/website/ts/@next/components/modals/input.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors } from 'ts/style/colors';
+
+export enum InputWidth {
+    Half,
+    Full,
+}
+
+interface InputProps {
+    name: string;
+    width: InputWidth;
+    label: string;
+    type?: string;
+}
+
+interface LabelProps {
+    string: boolean;
+}
+
+export const Input = React.forwardRef((props: InputProps, ref) => {
+    const { name, label, type } = props;
+    const id = `input-${name}`;
+
+    return (
+        <InputWrapper {...props}>
+            <Label htmlFor={id}>{label}</Label>
+            <StyledInput ref={ref} id={id} placeholder={label} {...props} />
+        </InputWrapper>
+    );
+});
+
+Input.defaultProps = {
+    width: InputWidth.Full,
+};
+
+const StyledInput = styled.input`
+    appearance: none;
+    background-color: #fff;
+    border: 1px solid #D5D5D5;
+    color: #000;
+    font-size: 1.294117647rem;
+    padding: 16px 15px;
+    outline: none;
+    width: 100%;
+
+    &::placeholder {
+        color: #9D9D9D;
+    }
+`;
+
+const InputWrapper = styled.div<InputProps>`
+    position: relative;
+    flex-grow: ${props => props.width === InputWidth.Full && 1};
+    width: ${props => props.width === InputWidth.Half && `calc(50% - 15px)`};
+`;
+
+const Label = styled.label`
+    color: #000;
+    font-size: 1.111111111rem;
+    line-height: 1.4em;
+    margin-bottom: 10px;
+    display: inline-block;
+`;
diff --git a/packages/website/ts/@next/components/modals/modal_contact.tsx b/packages/website/ts/@next/components/modals/modal_contact.tsx
new file mode 100644
index 000000000..cd6335103
--- /dev/null
+++ b/packages/website/ts/@next/components/modals/modal_contact.tsx
@@ -0,0 +1,198 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import {Link as RouterLink} from 'react-router-dom';
+import styled, {withTheme} from 'styled-components';
+
+import { colors } from 'ts/style/colors';
+
+import {
+    Dialog,
+    DialogOverlay,
+    DialogContent
+  } from "@reach/dialog";
+import "@reach/dialog/styles.css";
+
+import {Button} from 'ts/@next/components/button';
+import {Column, Wrap, WrapGrid} from 'ts/@next/components/layout';
+import { Icon } from 'ts/@next/components/icon';
+import {Input, InputWidth} from 'ts/@next/components/modals/input';
+import {Heading, Paragraph} from 'ts/@next/components/text';
+import {GlobalStyle} from 'ts/@next/constants/globalStyle';
+
+interface Props {
+    theme?: GlobalStyle;
+    isOpen?: boolean;
+    onDismiss?: () => void;
+}
+
+interface FormProps {
+    isSuccessful?: boolean;
+    isSubmitting?: boolean;
+}
+
+export class ModalContact extends React.Component<Props> {
+    public state = {
+        isSubmitting: false,
+        isSuccessful: false,
+    };
+    public constructor(props: Props) {
+        super(props);
+    }
+    public render(): React.ReactNode {
+        const {isOpen, onDismiss} = this.props;
+        const {isSuccessful} = this.state;
+
+        return (
+            <>
+                <DialogOverlay
+                    style={{ background: 'rgba(0, 0, 0, 0.75)' }}
+                    isOpen={isOpen}
+                >
+                    <StyledDialogContent>
+                        <Form onSubmit={this._onSubmit.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>
+                                <Input
+                                    name="name"
+                                    label="Your name"
+                                    type="text"
+                                    width={InputWidth.Half}
+                                />
+                                <Input
+                                    name="email"
+                                    label="Your email"
+                                    type="email"
+                                    width={InputWidth.Half}
+                                />
+                            </InputRow>
+                            <InputRow>
+                                <Input
+                                    name="companyOrProject"
+                                    label="Name of your project / company"
+                                    type="text"
+                                />
+                            </InputRow>
+                            <InputRow>
+                                <Input
+                                    name="link"
+                                    label="Do you have any documentation or a website?"
+                                    type="text"
+                                />
+                            </InputRow>
+                            <InputRow>
+                                <Input
+                                    name="comments"
+                                    label="Anything else?"
+                                    type="text"
+                                />
+                            </InputRow>
+                            <InputRow>
+                                <Button
+                                    color="#5C5C5C"
+                                    isNoBorder={true}
+                                    isTransparent={true}
+                                    type="button"
+                                    onClick={this.props.onDismiss}
+                                >
+                                    Back
+                                </Button>
+                                <Button>Submit</Button>
+                            </InputRow>
+                        </Form>
+                        <Confirmation isSuccessful={isSuccessful}>
+                        <Icon name="checkmark" size="large" />
+                            <Heading color={colors.textDarkPrimary} size={34} asElement="h2">Thanks for contacting us.</Heading>
+                            <Paragraph isMuted={true} color={colors.textDarkPrimary}>We'll get back to you soon. If you need quick support in the meantime, reach out to the 0x team on Discord.</Paragraph>
+                            <Button onClick={this.props.onDismiss}>Done</Button>
+                        </Confirmation>
+                    </StyledDialogContent>
+                </DialogOverlay>
+            </>
+        );
+    }
+    private async _onSubmit(e): void {
+        e.preventDefault();
+
+        // const email = this.emailInput.current.value;
+        const email = 'fred@sjelfull.no';
+
+        this.setState({ ...this.state, isSubmitting: true });
+
+        try {
+            const response = await fetch('/email', {
+                method: 'post',
+                headers: {
+                    'content-type': 'application/json; charset=utf-8',
+                },
+                body: JSON.stringify({ email }),
+            });
+            const json = await response.json();
+
+            console.log(response.json());
+        } catch (e) {
+            console.log(e);
+        }
+
+        this.setState({ ...this.state, isSuccessful: true });
+    }
+    private async _onDone(e): void {
+        e.preventDefault();
+
+        this.props.onDismiss();
+    }
+};
+
+const StyledWrap = styled(Wrap)`
+    padding-top: 20px;
+    margin-top: 30px;
+    position: relative;
+
+    &:before {
+        content: '';
+        width: 100%;
+        height: 1px;
+        background-color: ${props => props.theme.dropdownColor};
+        opacity: 0.15;
+        position: absolute;
+        top: 0;
+        left:0;
+    }
+`;
+
+const InputRow = styled.div`
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 30px;
+    width: 100%;
+    flex: 0 0 auto;
+`;
+
+const StyledDialogContent = styled(DialogContent)`
+    position: relative;
+    max-width: 800px;
+    background-color: #F6F6F6 !important;
+    padding: 60px 60px !important;
+`;
+
+const Form = styled.form<FormProps>`
+    position: relative;
+    transition: opacity 0.30s ease-in-out, visibility 0.30s ease-in-out;
+
+    opacity: ${props => props.isSuccessful && `0`};
+    visibility: ${props => props.isSuccessful && `hidden`};
+`;
+
+const Confirmation = styled.div<FormProps>`
+    position: absolute;
+    top: 50%;
+    text-align: center;
+    width: 100%;
+    left: 0;
+    transition: opacity 0.30s ease-in-out, visibility 0.30s ease-in-out;
+    transition-delay: 0.40s;
+    padding: 60px 60px;
+    transform: translateY(-50%);
+    opacity: ${props => props.isSuccessful ? `1` : `0`};
+    visibility: ${props => props.isSuccessful ? 'visible' : `hidden`};
+`;
-- 
cgit v1.2.3


From 4b4db3802a93f0a8a5d0acc061af245be4498f46 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Wed, 12 Dec 2018 15:51:51 +0100
Subject: Add esc support

---
 packages/website/ts/@next/components/modals/modal_contact.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/modals')

diff --git a/packages/website/ts/@next/components/modals/modal_contact.tsx b/packages/website/ts/@next/components/modals/modal_contact.tsx
index cd6335103..a63ab50c0 100644
--- a/packages/website/ts/@next/components/modals/modal_contact.tsx
+++ b/packages/website/ts/@next/components/modals/modal_contact.tsx
@@ -47,6 +47,7 @@ export class ModalContact extends React.Component<Props> {
                 <DialogOverlay
                     style={{ background: 'rgba(0, 0, 0, 0.75)' }}
                     isOpen={isOpen}
+                    onDismiss={onDismiss}
                 >
                     <StyledDialogContent>
                         <Form onSubmit={this._onSubmit.bind(this)} isSuccessful={isSuccessful}>
@@ -101,7 +102,7 @@ export class ModalContact extends React.Component<Props> {
                             </InputRow>
                         </Form>
                         <Confirmation isSuccessful={isSuccessful}>
-                        <Icon name="checkmark" size="large" />
+                            <Icon name="checkmark" size="large" />
                             <Heading color={colors.textDarkPrimary} size={34} asElement="h2">Thanks for contacting us.</Heading>
                             <Paragraph isMuted={true} color={colors.textDarkPrimary}>We'll get back to you soon. If you need quick support in the meantime, reach out to the 0x team on Discord.</Paragraph>
                             <Button onClick={this.props.onDismiss}>Done</Button>
-- 
cgit v1.2.3


From 9fda63cf74ea77e01634d2a91e773d4fa3ed68b7 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Thu, 13 Dec 2018 13:35:48 +0100
Subject: Mobile tweaks to contactm modal

---
 .../website/ts/@next/components/modals/input.tsx   | 13 +++--
 .../ts/@next/components/modals/modal_contact.tsx   | 62 +++++++++++++++++-----
 2 files changed, 58 insertions(+), 17 deletions(-)

(limited to 'packages/website/ts/@next/components/modals')

diff --git a/packages/website/ts/@next/components/modals/input.tsx b/packages/website/ts/@next/components/modals/input.tsx
index eee2d4102..351df105b 100644
--- a/packages/website/ts/@next/components/modals/input.tsx
+++ b/packages/website/ts/@next/components/modals/input.tsx
@@ -22,11 +22,12 @@ interface LabelProps {
 export const Input = React.forwardRef((props: InputProps, ref) => {
     const { name, label, type } = props;
     const id = `input-${name}`;
+    const componentType = type === 'textarea' ? 'textarea' : 'input';
 
     return (
         <InputWrapper {...props}>
             <Label htmlFor={id}>{label}</Label>
-            <StyledInput ref={ref} id={id} placeholder={label} {...props} />
+            <StyledInput as={componentType} ref={ref} id={id} placeholder={label} {...props} />
         </InputWrapper>
     );
 });
@@ -41,12 +42,13 @@ const StyledInput = styled.input`
     border: 1px solid #D5D5D5;
     color: #000;
     font-size: 1.294117647rem;
-    padding: 16px 15px;
+    padding: 16px 15px 14px;
     outline: none;
     width: 100%;
+    min-height: ${props => props.type === 'textarea' && `120px`};
 
     &::placeholder {
-        color: #9D9D9D;
+        color: #C3C3C3;
     }
 `;
 
@@ -54,6 +56,11 @@ const InputWrapper = styled.div<InputProps>`
     position: relative;
     flex-grow: ${props => props.width === InputWidth.Full && 1};
     width: ${props => props.width === InputWidth.Half && `calc(50% - 15px)`};
+
+    @media (max-width: 768px) {
+        width: 100%;
+        margin-bottom: 30px;
+    }
 `;
 
 const Label = styled.label`
diff --git a/packages/website/ts/@next/components/modals/modal_contact.tsx b/packages/website/ts/@next/components/modals/modal_contact.tsx
index a63ab50c0..962a9ab19 100644
--- a/packages/website/ts/@next/components/modals/modal_contact.tsx
+++ b/packages/website/ts/@next/components/modals/modal_contact.tsx
@@ -34,6 +34,7 @@ export class ModalContact extends React.Component<Props> {
     public state = {
         isSubmitting: false,
         isSuccessful: false,
+        errors: {},
     };
     public constructor(props: Props) {
         super(props);
@@ -45,7 +46,7 @@ export class ModalContact extends React.Component<Props> {
         return (
             <>
                 <DialogOverlay
-                    style={{ background: 'rgba(0, 0, 0, 0.75)' }}
+                    style={{ background: 'rgba(0, 0, 0, 0.75)', zIndex: 2 }}
                     isOpen={isOpen}
                     onDismiss={onDismiss}
                 >
@@ -85,10 +86,10 @@ export class ModalContact extends React.Component<Props> {
                                 <Input
                                     name="comments"
                                     label="Anything else?"
-                                    type="text"
+                                    type="textarea"
                                 />
                             </InputRow>
-                            <InputRow>
+                            <ButtonRow>
                                 <Button
                                     color="#5C5C5C"
                                     isNoBorder={true}
@@ -99,7 +100,7 @@ export class ModalContact extends React.Component<Props> {
                                     Back
                                 </Button>
                                 <Button>Submit</Button>
-                            </InputRow>
+                            </ButtonRow>
                         </Form>
                         <Confirmation isSuccessful={isSuccessful}>
                             <Icon name="checkmark" size="large" />
@@ -116,33 +117,41 @@ export class ModalContact extends React.Component<Props> {
         e.preventDefault();
 
         // const email = this.emailInput.current.value;
-        const email = 'fred@sjelfull.no';
+        const email = '';
+        const name = '';
+        const projectOrCompany = '';
+        const link = '';
+        const comments = '';
 
         this.setState({ ...this.state, isSubmitting: true });
 
         try {
-            const response = await fetch('/email', {
+            const response = await fetch('https://website-api.0xproject.com/leads', {
                 method: 'post',
+                mode: 'cors',
+                credentials: 'same-origin',
                 headers: {
                     'content-type': 'application/json; charset=utf-8',
                 },
-                body: JSON.stringify({ email }),
+                body: JSON.stringify({ email, projectOrCompany, link, comments }),
             });
             const json = await response.json();
 
-            console.log(response.json());
+            this.setState({ ...this.state, isSuccessful: true });
+
+            console.log(response);
         } catch (e) {
+            this.setState({ ...this.state, errors: [] });
             console.log(e);
         }
-
-        this.setState({ ...this.state, isSuccessful: true });
     }
     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"}]}
 
 const StyledWrap = styled(Wrap)`
     padding-top: 20px;
@@ -162,11 +171,30 @@ const StyledWrap = styled(Wrap)`
 `;
 
 const InputRow = styled.div`
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 30px;
     width: 100%;
     flex: 0 0 auto;
+
+    @media (min-width: 768px) {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 30px;
+    }
+`;
+
+const ButtonRow = styled(InputRow)`
+    @media (max-width: 768px) {
+        display: flex;
+        flex-direction: column;
+
+        button:nth-child(1) {
+            order: 2;
+        }
+
+        button:nth-child(2) {
+            order: 1;
+            margin-bottom: 10px;
+        }
+    }
 `;
 
 const StyledDialogContent = styled(DialogContent)`
@@ -174,6 +202,12 @@ const StyledDialogContent = styled(DialogContent)`
     max-width: 800px;
     background-color: #F6F6F6 !important;
     padding: 60px 60px !important;
+
+    @media (max-width: 768px) {
+        width: calc(100vw - 40px) !important;
+        margin: 40px auto !important;
+        padding: 30px 30px !important;
+    }
 `;
 
 const Form = styled.form<FormProps>`
-- 
cgit v1.2.3


From 6f7e27bd7fbb0e28acb245bec3b18cf944e24523 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Thu, 13 Dec 2018 13:52:55 +0100
Subject: Tweak z-index

---
 packages/website/ts/@next/components/modals/modal_contact.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/modals')

diff --git a/packages/website/ts/@next/components/modals/modal_contact.tsx b/packages/website/ts/@next/components/modals/modal_contact.tsx
index 962a9ab19..7b976451d 100644
--- a/packages/website/ts/@next/components/modals/modal_contact.tsx
+++ b/packages/website/ts/@next/components/modals/modal_contact.tsx
@@ -46,7 +46,7 @@ export class ModalContact extends React.Component<Props> {
         return (
             <>
                 <DialogOverlay
-                    style={{ background: 'rgba(0, 0, 0, 0.75)', zIndex: 2 }}
+                    style={{ background: 'rgba(0, 0, 0, 0.75)', zIndex: 30 }}
                     isOpen={isOpen}
                     onDismiss={onDismiss}
                 >
-- 
cgit v1.2.3


From 66480ccb1e0dc72e6716060ab472b7584bfa910c Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 14 Dec 2018 11:26:59 +0100
Subject: Linting fixes

---
 packages/website/ts/@next/components/modals/input.tsx        |  2 +-
 .../website/ts/@next/components/modals/modal_contact.tsx     | 12 ++----------
 2 files changed, 3 insertions(+), 11 deletions(-)

(limited to 'packages/website/ts/@next/components/modals')

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"}]}
 
-- 
cgit v1.2.3


From 9fa9a30c4d51ebb106bd7f80c889d14337358fa4 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 14 Dec 2018 17:50:27 +0100
Subject: More lint cleanup

---
 packages/website/ts/@next/components/modals/input.tsx | 6 ------
 1 file changed, 6 deletions(-)

(limited to 'packages/website/ts/@next/components/modals')

diff --git a/packages/website/ts/@next/components/modals/input.tsx b/packages/website/ts/@next/components/modals/input.tsx
index c6f0f8c36..33dfb1146 100644
--- a/packages/website/ts/@next/components/modals/input.tsx
+++ b/packages/website/ts/@next/components/modals/input.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { colors } from 'ts/style/colors';
-
 export enum InputWidth {
     Half,
     Full,
@@ -15,10 +13,6 @@ interface InputProps {
     type?: string;
 }
 
-interface LabelProps {
-    string: boolean;
-}
-
 export const Input = React.forwardRef((props: InputProps, ref) => {
     const { name, label, type } = props;
     const id = `input-${name}`;
-- 
cgit v1.2.3


From 94c7bf47db166c8158536b54a00cb63ad8638f43 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 14 Dec 2018 18:47:09 +0100
Subject: More Cleanup

---
 .../ts/@next/components/modals/modal_contact.tsx   | 35 ++--------------------
 1 file changed, 2 insertions(+), 33 deletions(-)

(limited to 'packages/website/ts/@next/components/modals')

diff --git a/packages/website/ts/@next/components/modals/modal_contact.tsx b/packages/website/ts/@next/components/modals/modal_contact.tsx
index 4e024a1a0..f2b3a954b 100644
--- a/packages/website/ts/@next/components/modals/modal_contact.tsx
+++ b/packages/website/ts/@next/components/modals/modal_contact.tsx
@@ -1,19 +1,12 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {Link as RouterLink} from 'react-router-dom';
-import styled, {withTheme} from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-import {
-    Dialog,
-    DialogOverlay,
-    DialogContent
-  } from "@reach/dialog";
-import "@reach/dialog/styles.css";
+import { DialogContent, DialogOverlay } from '@reach/dialog';
+import '@reach/dialog/styles.css';
 
 import {Button} from 'ts/@next/components/button';
-import {Column, Wrap, WrapGrid} from 'ts/@next/components/layout';
 import { Icon } from 'ts/@next/components/icon';
 import {Input, InputWidth} from 'ts/@next/components/modals/input';
 import {Heading, Paragraph} from 'ts/@next/components/text';
@@ -25,11 +18,6 @@ interface Props {
     onDismiss?: () => void;
 }
 
-interface FormProps {
-    isSuccessful?: boolean;
-    isSubmitting?: boolean;
-}
-
 export class ModalContact extends React.Component<Props> {
     public state = {
         isSubmitting: false,
@@ -118,7 +106,6 @@ export class ModalContact extends React.Component<Props> {
 
         // const email = this.emailInput.current.value;
         const email = '';
-        const name = '';
         const projectOrCompany = '';
         const link = '';
         const comments = '';
@@ -135,7 +122,6 @@ export class ModalContact extends React.Component<Props> {
                 },
                 body: JSON.stringify({ email, projectOrCompany, link, comments }),
             });
-            const json = await response.json();
 
             this.setState({ ...this.state, isSuccessful: true });
         } catch (e) {
@@ -145,23 +131,6 @@ export class ModalContact extends React.Component<Props> {
 }
 // Handle errors: {"errors":[{"location":"body","param":"name","msg":"Invalid value"},{"location":"body","param":"email","msg":"Invalid value"}]}
 
-const StyledWrap = styled(Wrap)`
-    padding-top: 20px;
-    margin-top: 30px;
-    position: relative;
-
-    &:before {
-        content: '';
-        width: 100%;
-        height: 1px;
-        background-color: ${props => props.theme.dropdownColor};
-        opacity: 0.15;
-        position: absolute;
-        top: 0;
-        left:0;
-    }
-`;
-
 const InputRow = styled.div`
     width: 100%;
     flex: 0 0 auto;
-- 
cgit v1.2.3


From 1955c846f27ee5830bfbff201237dae6dcc99e5d Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 14 Dec 2018 19:51:39 +0100
Subject: Fixes

---
 packages/website/ts/@next/components/modals/modal_contact.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'packages/website/ts/@next/components/modals')

diff --git a/packages/website/ts/@next/components/modals/modal_contact.tsx b/packages/website/ts/@next/components/modals/modal_contact.tsx
index f2b3a954b..fb16423a4 100644
--- a/packages/website/ts/@next/components/modals/modal_contact.tsx
+++ b/packages/website/ts/@next/components/modals/modal_contact.tsx
@@ -1,5 +1,6 @@
 import * as _ from 'lodash';
 import * as React from 'react';
+import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
@@ -18,6 +19,11 @@ interface Props {
     onDismiss?: () => void;
 }
 
+interface FormProps {
+    isSuccessful?: boolean;
+    isSubmitting?: boolean;
+}
+
 export class ModalContact extends React.Component<Props> {
     public state = {
         isSubmitting: false,
-- 
cgit v1.2.3


From b07892bb48475e461e07926315a2e43ea5cfb46f Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 14 Dec 2018 21:33:08 +0100
Subject: Type fixes

---
 packages/website/ts/@next/components/modals/input.tsx         | 6 +++++-
 packages/website/ts/@next/components/modals/modal_contact.tsx | 2 ++
 2 files changed, 7 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/modals')

diff --git a/packages/website/ts/@next/components/modals/input.tsx b/packages/website/ts/@next/components/modals/input.tsx
index 33dfb1146..61663d906 100644
--- a/packages/website/ts/@next/components/modals/input.tsx
+++ b/packages/website/ts/@next/components/modals/input.tsx
@@ -13,7 +13,11 @@ interface InputProps {
     type?: string;
 }
 
-export const Input = React.forwardRef((props: InputProps, ref) => {
+interface LabelProps {
+    string: boolean;
+}
+
+export const Input = React.forwardRef((props: InputProps, ref?: React.Ref<HTMLInputElement>) => {
     const { name, label, type } = props;
     const id = `input-${name}`;
     const componentType = type === 'textarea' ? 'textarea' : 'input';
diff --git a/packages/website/ts/@next/components/modals/modal_contact.tsx b/packages/website/ts/@next/components/modals/modal_contact.tsx
index fb16423a4..64e08c967 100644
--- a/packages/website/ts/@next/components/modals/modal_contact.tsx
+++ b/packages/website/ts/@next/components/modals/modal_contact.tsx
@@ -30,6 +30,7 @@ export class ModalContact extends React.Component<Props> {
         isSuccessful: false,
         errors: {},
     };
+    public nameRef: React.RefObject<HTMLInputElement> = React.createRef();
     public constructor(props: Props) {
         super(props);
     }
@@ -54,6 +55,7 @@ export class ModalContact extends React.Component<Props> {
                                     label="Your name"
                                     type="text"
                                     width={InputWidth.Half}
+                                    ref={this.nameRef}
                                 />
                                 <Input
                                     name="email"
-- 
cgit v1.2.3


From dbdd2fb7d08de6b07cf8c25b26c72be5cb50635a Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 14 Dec 2018 21:42:25 +0100
Subject: Tweak modal confirmatino

---
 packages/website/ts/@next/components/modals/modal_contact.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/modals')

diff --git a/packages/website/ts/@next/components/modals/modal_contact.tsx b/packages/website/ts/@next/components/modals/modal_contact.tsx
index 64e08c967..a7ac469a7 100644
--- a/packages/website/ts/@next/components/modals/modal_contact.tsx
+++ b/packages/website/ts/@next/components/modals/modal_contact.tsx
@@ -99,7 +99,7 @@ export class ModalContact extends React.Component<Props> {
                             </ButtonRow>
                         </Form>
                         <Confirmation isSuccessful={isSuccessful}>
-                            <Icon name="checkmark" size="large" />
+                            <Icon name="rocketship" size="large" margin={[0, 0, 'default', 0]}  />
                             <Heading color={colors.textDarkPrimary} size={34} asElement="h2">Thanks for contacting us.</Heading>
                             <Paragraph isMuted={true} color={colors.textDarkPrimary}>We'll get back to you soon. If you need quick support in the meantime, reach out to the 0x team on Discord.</Paragraph>
                             <Button onClick={this.props.onDismiss}>Done</Button>
@@ -199,4 +199,10 @@ const Confirmation = styled.div<FormProps>`
     transform: translateY(-50%);
     opacity: ${props => props.isSuccessful ? `1` : `0`};
     visibility: ${props => props.isSuccessful ? 'visible' : `hidden`};
+
+    p {
+        max-width: 492px;
+        margin-left: auto;
+        margin-right: auto;
+    }
 `;
-- 
cgit v1.2.3


From 32eab3acff7d2cb334db9396a6182df9ba672390 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 14 Dec 2018 21:56:12 +0100
Subject: Fix modal submit

---
 .../ts/@next/components/modals/modal_contact.tsx   | 25 ++++++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

(limited to 'packages/website/ts/@next/components/modals')

diff --git a/packages/website/ts/@next/components/modals/modal_contact.tsx b/packages/website/ts/@next/components/modals/modal_contact.tsx
index a7ac469a7..1a78cb7ce 100644
--- a/packages/website/ts/@next/components/modals/modal_contact.tsx
+++ b/packages/website/ts/@next/components/modals/modal_contact.tsx
@@ -31,6 +31,10 @@ export class ModalContact extends React.Component<Props> {
         errors: {},
     };
     public nameRef: React.RefObject<HTMLInputElement> = React.createRef();
+    public emailRef: React.RefObject<HTMLInputElement> = React.createRef();
+    public companyProjectRef: React.RefObject<HTMLInputElement> = React.createRef();
+    public linkRef: React.RefObject<HTMLInputElement> = React.createRef();
+    public commentsRef: React.RefObject<HTMLInputElement> = React.createRef();
     public constructor(props: Props) {
         super(props);
     }
@@ -56,11 +60,14 @@ export class ModalContact extends React.Component<Props> {
                                     type="text"
                                     width={InputWidth.Half}
                                     ref={this.nameRef}
+                                    required={true}
                                 />
                                 <Input
                                     name="email"
                                     label="Your email"
                                     type="email"
+                                    ref={this.emailRef}
+                                    required={true}
                                     width={InputWidth.Half}
                                 />
                             </InputRow>
@@ -69,6 +76,8 @@ export class ModalContact extends React.Component<Props> {
                                     name="companyOrProject"
                                     label="Name of your project / company"
                                     type="text"
+                                    ref={this.companyProjectRef}
+                                    required={true}
                                 />
                             </InputRow>
                             <InputRow>
@@ -76,6 +85,7 @@ export class ModalContact extends React.Component<Props> {
                                     name="link"
                                     label="Do you have any documentation or a website?"
                                     type="text"
+                                    ref={this.linkRef}
                                 />
                             </InputRow>
                             <InputRow>
@@ -83,6 +93,7 @@ export class ModalContact extends React.Component<Props> {
                                     name="comments"
                                     label="Anything else?"
                                     type="textarea"
+                                    ref={this.commentsRef}
                                 />
                             </InputRow>
                             <ButtonRow>
@@ -112,23 +123,23 @@ export class ModalContact extends React.Component<Props> {
     private async _onSubmitAsync(e: Event): Promise<void> {
         e.preventDefault();
 
-        // const email = this.emailInput.current.value;
-        const email = '';
-        const projectOrCompany = '';
-        const link = '';
-        const comments = '';
+        const name = this.nameRef.current.value;
+        const email = this.emailRef.current.value;
+        const projectOrCompany = this.companyProjectRef.current.value;
+        const link = this.linkRef.current.value;
+        const comments = this.commentsRef.current.value;
 
         this.setState({ ...this.state, isSubmitting: true });
 
         try {
-            const response = await fetch('https://website-api.0xproject.com/leads', {
+            await fetch('https://website-api.0xproject.com/leads', {
                 method: 'post',
                 mode: 'cors',
                 credentials: 'same-origin',
                 headers: {
                     'content-type': 'application/json; charset=utf-8',
                 },
-                body: JSON.stringify({ email, projectOrCompany, link, comments }),
+                body: JSON.stringify({ name, email, projectOrCompany, link, comments }),
             });
 
             this.setState({ ...this.state, isSuccessful: true });
-- 
cgit v1.2.3


From 51b1cab72a80b8ef05038ecf392d9c72b8d4294e Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Fri, 14 Dec 2018 14:46:05 -0800
Subject: fix(website) replace 0xproject.com with 0x.org

---
 packages/website/ts/@next/components/modals/modal_contact.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/modals')

diff --git a/packages/website/ts/@next/components/modals/modal_contact.tsx b/packages/website/ts/@next/components/modals/modal_contact.tsx
index 1a78cb7ce..f107b9174 100644
--- a/packages/website/ts/@next/components/modals/modal_contact.tsx
+++ b/packages/website/ts/@next/components/modals/modal_contact.tsx
@@ -132,7 +132,7 @@ export class ModalContact extends React.Component<Props> {
         this.setState({ ...this.state, isSubmitting: true });
 
         try {
-            await fetch('https://website-api.0xproject.com/leads', {
+            await fetch('https://website-api.0x.org/leads', {
                 method: 'post',
                 mode: 'cors',
                 credentials: 'same-origin',
-- 
cgit v1.2.3


From 31bbb0696ccfe8f8b671ac2b2c3f18ec956cd46d Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Mon, 17 Dec 2018 19:25:51 +0100
Subject: Show errors from serverside

---
 .../website/ts/@next/components/modals/input.tsx   | 29 ++++++++++++-
 .../ts/@next/components/modals/modal_contact.tsx   | 47 +++++++++++++++++++---
 2 files changed, 69 insertions(+), 7 deletions(-)

(limited to 'packages/website/ts/@next/components/modals')

diff --git a/packages/website/ts/@next/components/modals/input.tsx b/packages/website/ts/@next/components/modals/input.tsx
index 61663d906..d4d9206a2 100644
--- a/packages/website/ts/@next/components/modals/input.tsx
+++ b/packages/website/ts/@next/components/modals/input.tsx
@@ -11,27 +11,37 @@ interface InputProps {
     width?: InputWidth;
     label: string;
     type?: string;
+    errors?: ErrorProps;
+    isErrors?: boolean;
 }
 
 interface LabelProps {
     string: boolean;
 }
 
+interface ErrorProps {
+    [key: string]: string;
+}
+
 export const Input = React.forwardRef((props: InputProps, ref?: React.Ref<HTMLInputElement>) => {
-    const { name, label, type } = props;
+    const { name, label, type, errors } = props;
     const id = `input-${name}`;
     const componentType = type === 'textarea' ? 'textarea' : 'input';
+    const isErrors = errors.hasOwnProperty(name) && errors[name] !== null;
+    const errorMessage = isErrors ? errors[name] : null;
 
     return (
         <InputWrapper {...props}>
             <Label htmlFor={id}>{label}</Label>
-            <StyledInput as={componentType} ref={ref} id={id} placeholder={label} {...props} />
+            <StyledInput as={componentType} ref={ref} id={id} placeholder={label} isErrors={isErrors} {...props} />
+            {isErrors && <Error>{errorMessage}</Error>}
         </InputWrapper>
     );
 });
 
 Input.defaultProps = {
     width: InputWidth.Full,
+    errors: {},
 };
 
 const StyledInput = styled.input`
@@ -45,6 +55,9 @@ const StyledInput = styled.input`
     width: 100%;
     min-height: ${props => props.type === 'textarea' && `120px`};
 
+    background-color: ${(props: InputProps) => props.isErrors && `#FDEDED`};
+    border-color: ${(props: InputProps) => props.isErrors && `#FD0000`};
+
     &::placeholder {
         color: #C3C3C3;
     }
@@ -68,3 +81,15 @@ const Label = styled.label`
     margin-bottom: 10px;
     display: inline-block;
 `;
+
+const Error = styled.span`
+    color: #FD0000;
+    font-size: .833333333rem;
+    line-height: 1em;
+    display: inline-block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    transform: translateY(24px);
+`;
diff --git a/packages/website/ts/@next/components/modals/modal_contact.tsx b/packages/website/ts/@next/components/modals/modal_contact.tsx
index f107b9174..b595c236d 100644
--- a/packages/website/ts/@next/components/modals/modal_contact.tsx
+++ b/packages/website/ts/@next/components/modals/modal_contact.tsx
@@ -24,6 +24,20 @@ interface FormProps {
     isSubmitting?: boolean;
 }
 
+interface ErrorResponseProps {
+    param: string;
+    location: string;
+    msg: string;
+}
+
+interface ErrorResponse {
+    errors: ErrorResponseProps[];
+}
+
+interface ErrorProps {
+    [key: string]: string;
+}
+
 export class ModalContact extends React.Component<Props> {
     public state = {
         isSubmitting: false,
@@ -40,7 +54,7 @@ export class ModalContact extends React.Component<Props> {
     }
     public render(): React.ReactNode {
         const {isOpen, onDismiss} = this.props;
-        const {isSuccessful} = this.state;
+        const {isSuccessful, errors} = this.state;
 
         return (
             <>
@@ -61,6 +75,7 @@ export class ModalContact extends React.Component<Props> {
                                     width={InputWidth.Half}
                                     ref={this.nameRef}
                                     required={true}
+                                    errors={errors}
                                 />
                                 <Input
                                     name="email"
@@ -68,6 +83,7 @@ export class ModalContact extends React.Component<Props> {
                                     type="email"
                                     ref={this.emailRef}
                                     required={true}
+                                    errors={errors}
                                     width={InputWidth.Half}
                                 />
                             </InputRow>
@@ -78,6 +94,7 @@ export class ModalContact extends React.Component<Props> {
                                     type="text"
                                     ref={this.companyProjectRef}
                                     required={true}
+                                    errors={errors}
                                 />
                             </InputRow>
                             <InputRow>
@@ -86,6 +103,7 @@ export class ModalContact extends React.Component<Props> {
                                     label="Do you have any documentation or a website?"
                                     type="text"
                                     ref={this.linkRef}
+                                    errors={errors}
                                 />
                             </InputRow>
                             <InputRow>
@@ -94,6 +112,7 @@ export class ModalContact extends React.Component<Props> {
                                     label="Anything else?"
                                     type="textarea"
                                     ref={this.commentsRef}
+                                    errors={errors}
                                 />
                             </InputRow>
                             <ButtonRow>
@@ -129,24 +148,42 @@ export class ModalContact extends React.Component<Props> {
         const link = this.linkRef.current.value;
         const comments = this.commentsRef.current.value;
 
-        this.setState({ ...this.state, isSubmitting: true });
+        this.setState({ ...this.state, errors: [], isSubmitting: true });
 
         try {
-            await fetch('https://website-api.0x.org/leads', {
+            const response = await fetch('https://website-api.0x.org/leads', {
                 method: 'post',
                 mode: 'cors',
                 credentials: 'same-origin',
                 headers: {
                     'content-type': 'application/json; charset=utf-8',
                 },
-                body: JSON.stringify({ name, email, projectOrCompany, link, comments }),
+                body: JSON.stringify(_.omitBy({ name, email, projectOrCompany, link, comments }, _.isEmpty)),
             });
 
+            if (!response.ok) {
+                const errorResponse: ErrorResponse = await response.json();
+                const errors = this._parseErrors(errorResponse.errors);
+                this.setState({ ...this.state, isSubmitting: false, errors });
+
+                throw new Error('Request failed');
+            }
+
             this.setState({ ...this.state, isSuccessful: true });
         } catch (e) {
-            this.setState({ ...this.state, errors: [] });
+            // Empty block
         }
     }
+    private _parseErrors(errors: ErrorResponseProps[]): ErrorProps  {
+        return _
+            .reduce(errors, (hash: ErrorProps, error: ErrorResponseProps) => {
+                const { param, msg } = error;
+                const key = param;
+                hash[key] = msg;
+
+                return hash;
+            }, {});
+    }
 }
 // Handle errors: {"errors":[{"location":"body","param":"name","msg":"Invalid value"},{"location":"body","param":"email","msg":"Invalid value"}]}
 
-- 
cgit v1.2.3


From 4c9bdcd787ec24ce87d6b06b7e6f6304021d2513 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Mon, 17 Dec 2018 17:47:59 -0800
Subject: fix(website): fix broken copper form post link

---
 .../ts/@next/components/modals/modal_contact.tsx   | 61 ++++++++++++++--------
 1 file changed, 40 insertions(+), 21 deletions(-)

(limited to 'packages/website/ts/@next/components/modals')

diff --git a/packages/website/ts/@next/components/modals/modal_contact.tsx b/packages/website/ts/@next/components/modals/modal_contact.tsx
index b595c236d..69250fad1 100644
--- a/packages/website/ts/@next/components/modals/modal_contact.tsx
+++ b/packages/website/ts/@next/components/modals/modal_contact.tsx
@@ -7,11 +7,11 @@ import { colors } from 'ts/style/colors';
 import { DialogContent, DialogOverlay } from '@reach/dialog';
 import '@reach/dialog/styles.css';
 
-import {Button} from 'ts/@next/components/button';
+import { Button } from 'ts/@next/components/button';
 import { Icon } from 'ts/@next/components/icon';
-import {Input, InputWidth} from 'ts/@next/components/modals/input';
-import {Heading, Paragraph} from 'ts/@next/components/text';
-import {GlobalStyle} from 'ts/@next/constants/globalStyle';
+import { Input, InputWidth } from 'ts/@next/components/modals/input';
+import { Heading, Paragraph } from 'ts/@next/components/text';
+import { GlobalStyle } from 'ts/@next/constants/globalStyle';
 
 interface Props {
     theme?: GlobalStyle;
@@ -53,8 +53,8 @@ export class ModalContact extends React.Component<Props> {
         super(props);
     }
     public render(): React.ReactNode {
-        const {isOpen, onDismiss} = this.props;
-        const {isSuccessful, errors} = this.state;
+        const { isOpen, onDismiss } = this.props;
+        const { isSuccessful, errors } = this.state;
 
         return (
             <>
@@ -65,8 +65,13 @@ export class ModalContact extends React.Component<Props> {
                 >
                     <StyledDialogContent>
                         <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>
+                            <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>
                                 <Input
                                     name="name"
@@ -129,9 +134,14 @@ export class ModalContact extends React.Component<Props> {
                             </ButtonRow>
                         </Form>
                         <Confirmation isSuccessful={isSuccessful}>
-                            <Icon name="rocketship" size="large" margin={[0, 0, 'default', 0]}  />
-                            <Heading color={colors.textDarkPrimary} size={34} asElement="h2">Thanks for contacting us.</Heading>
-                            <Paragraph isMuted={true} color={colors.textDarkPrimary}>We'll get back to you soon. If you need quick support in the meantime, reach out to the 0x team on Discord.</Paragraph>
+                            <Icon name="rocketship" size="large" margin={[0, 0, 'default', 0]} />
+                            <Heading color={colors.textDarkPrimary} size={34} asElement="h2">
+                                Thanks for contacting us.
+                            </Heading>
+                            <Paragraph isMuted={true} color={colors.textDarkPrimary}>
+                                We'll get back to you soon. If you need quick support in the meantime, reach out to the
+                                0x team on Discord.
+                            </Paragraph>
                             <Button onClick={this.props.onDismiss}>Done</Button>
                         </Confirmation>
                     </StyledDialogContent>
@@ -151,7 +161,7 @@ export class ModalContact extends React.Component<Props> {
         this.setState({ ...this.state, errors: [], isSubmitting: true });
 
         try {
-            const response = await fetch('https://website-api.0x.org/leads', {
+            const response = await fetch('https://website-api.0xproject.com/leads', {
                 method: 'post',
                 mode: 'cors',
                 credentials: 'same-origin',
@@ -174,15 +184,18 @@ export class ModalContact extends React.Component<Props> {
             // Empty block
         }
     }
-    private _parseErrors(errors: ErrorResponseProps[]): ErrorProps  {
-        return _
-            .reduce(errors, (hash: ErrorProps, error: ErrorResponseProps) => {
+    private _parseErrors(errors: ErrorResponseProps[]): ErrorProps {
+        return _.reduce(
+            errors,
+            (hash: ErrorProps, error: ErrorResponseProps) => {
                 const { param, msg } = error;
                 const key = param;
                 hash[key] = msg;
 
                 return hash;
-            }, {});
+            },
+            {},
+        );
     }
 }
 // Handle errors: {"errors":[{"location":"body","param":"name","msg":"Invalid value"},{"location":"body","param":"email","msg":"Invalid value"}]}
@@ -217,7 +230,7 @@ const ButtonRow = styled(InputRow)`
 const StyledDialogContent = styled(DialogContent)`
     position: relative;
     max-width: 800px;
-    background-color: #F6F6F6 !important;
+    background-color: #f6f6f6 !important;
     padding: 60px 60px !important;
 
     @media (max-width: 768px) {
@@ -227,7 +240,10 @@ const StyledDialogContent = styled(DialogContent)`
     }
 `;
 
-const Form = styled.form<FormProps>`
+const Form =
+    styled.form <
+    FormProps >
+    `
     position: relative;
     transition: opacity 0.30s ease-in-out, visibility 0.30s ease-in-out;
 
@@ -235,7 +251,10 @@ const Form = styled.form<FormProps>`
     visibility: ${props => props.isSuccessful && `hidden`};
 `;
 
-const Confirmation = styled.div<FormProps>`
+const Confirmation =
+    styled.div <
+    FormProps >
+    `
     position: absolute;
     top: 50%;
     text-align: center;
@@ -245,8 +264,8 @@ const Confirmation = styled.div<FormProps>`
     transition-delay: 0.40s;
     padding: 60px 60px;
     transform: translateY(-50%);
-    opacity: ${props => props.isSuccessful ? `1` : `0`};
-    visibility: ${props => props.isSuccessful ? 'visible' : `hidden`};
+    opacity: ${props => (props.isSuccessful ? `1` : `0`)};
+    visibility: ${props => (props.isSuccessful ? 'visible' : `hidden`)};
 
     p {
         max-width: 492px;
-- 
cgit v1.2.3


From 9bd71aeeffbadebb41756a605ef6a0aacbfd47c4 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 18 Dec 2018 13:24:53 -0800
Subject: run prettier on website

---
 packages/website/ts/@next/components/modals/input.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

(limited to 'packages/website/ts/@next/components/modals')

diff --git a/packages/website/ts/@next/components/modals/input.tsx b/packages/website/ts/@next/components/modals/input.tsx
index d4d9206a2..5b5eac51c 100644
--- a/packages/website/ts/@next/components/modals/input.tsx
+++ b/packages/website/ts/@next/components/modals/input.tsx
@@ -47,7 +47,7 @@ Input.defaultProps = {
 const StyledInput = styled.input`
     appearance: none;
     background-color: #fff;
-    border: 1px solid #D5D5D5;
+    border: 1px solid #d5d5d5;
     color: #000;
     font-size: 1.294117647rem;
     padding: 16px 15px 14px;
@@ -59,11 +59,14 @@ const StyledInput = styled.input`
     border-color: ${(props: InputProps) => props.isErrors && `#FD0000`};
 
     &::placeholder {
-        color: #C3C3C3;
+        color: #c3c3c3;
     }
 `;
 
-const InputWrapper = styled.div<InputProps>`
+const InputWrapper =
+    styled.div <
+    InputProps >
+    `
     position: relative;
     flex-grow: ${props => props.width === InputWidth.Full && 1};
     width: ${props => props.width === InputWidth.Half && `calc(50% - 15px)`};
@@ -83,8 +86,8 @@ const Label = styled.label`
 `;
 
 const Error = styled.span`
-    color: #FD0000;
-    font-size: .833333333rem;
+    color: #fd0000;
+    font-size: 0.833333333rem;
     line-height: 1em;
     display: inline-block;
     position: absolute;
-- 
cgit v1.2.3


From 9728267eac56f3d811d70bb794ffa98ebc832267 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 18 Dec 2018 13:57:03 -0800
Subject: Removing unused interface

---
 packages/website/ts/@next/components/modals/input.tsx | 4 ----
 1 file changed, 4 deletions(-)

(limited to 'packages/website/ts/@next/components/modals')

diff --git a/packages/website/ts/@next/components/modals/input.tsx b/packages/website/ts/@next/components/modals/input.tsx
index 5b5eac51c..d4d53402a 100644
--- a/packages/website/ts/@next/components/modals/input.tsx
+++ b/packages/website/ts/@next/components/modals/input.tsx
@@ -15,10 +15,6 @@ interface InputProps {
     isErrors?: boolean;
 }
 
-interface LabelProps {
-    string: boolean;
-}
-
 interface ErrorProps {
     [key: string]: string;
 }
-- 
cgit v1.2.3


From fa612fe173d855dbba4111a38dbf071be23b715f Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 18 Dec 2018 14:19:28 -0800
Subject: Linting

---
 packages/website/ts/@next/components/modals/modal_contact.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/@next/components/modals')

diff --git a/packages/website/ts/@next/components/modals/modal_contact.tsx b/packages/website/ts/@next/components/modals/modal_contact.tsx
index 69250fad1..b97baf5e7 100644
--- a/packages/website/ts/@next/components/modals/modal_contact.tsx
+++ b/packages/website/ts/@next/components/modals/modal_contact.tsx
@@ -161,6 +161,8 @@ export class ModalContact extends React.Component<Props> {
         this.setState({ ...this.state, errors: [], isSubmitting: true });
 
         try {
+            // Disabling no-unbound method b/c no reason for _.isEmpty to be bound
+            // tslint:disable:no-unbound-method
             const response = await fetch('https://website-api.0xproject.com/leads', {
                 method: 'post',
                 mode: 'cors',
@@ -185,6 +187,7 @@ export class ModalContact extends React.Component<Props> {
         }
     }
     private _parseErrors(errors: ErrorResponseProps[]): ErrorProps {
+        const initialValue: {} = {};
         return _.reduce(
             errors,
             (hash: ErrorProps, error: ErrorResponseProps) => {
@@ -194,7 +197,7 @@ export class ModalContact extends React.Component<Props> {
 
                 return hash;
             },
-            {},
+            initialValue,
         );
     }
 }
-- 
cgit v1.2.3