Mobile tweaks to contactm modal

2 files changed, 58 insertions, 17 deletions

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