Refines footer, newsletterForm

2 files changed, 78 insertions, 30 deletions

diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index 13b681572..28af394b5 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-import { Column, Section, Wrap } from 'ts/@next/components/layout';
+import { BREAKPOINTS, Column, Section, Wrap, WrapGrid } from 'ts/@next/components/layout';
 import { Logo } from 'ts/@next/components/logo';
 import { NewsletterForm } from 'ts/@next/components/newsletterForm';
 
@@ -30,13 +30,23 @@ interface LinkListProps {
 const linkRows: LinkRows[] = [
     {
         heading: 'Products',
+        isOnMobile: true,
         links: [
             { url: '/next/0x-instant', text: '0x Instant' },
             { url: '#', text: '0x Launch Kit' },
         ],
     },
     {
+        heading: 'Developers',
+        links: [
+            { url: '#', text: 'Documentation' },
+            { url: '#', text: 'GitHub' },
+            { url: '#', text: 'Whitepaper' },
+        ],
+    },
+    {
         heading: 'About',
+        isOnMobile: true,
         links: [
             { url: '#', text: 'Mission' },
             { url: '#', text: 'Team' },
@@ -46,6 +56,7 @@ const linkRows: LinkRows[] = [
     },
     {
         heading: 'Community',
+        isOnMobile: true,
         links: [
             { url: '#', text: 'Twitter' },
             { url: '#', text: 'Rocket Chat' },
@@ -58,24 +69,29 @@ const linkRows: LinkRows[] = [
 export const Footer: React.StatelessComponent<FooterInterface> = ({}) => (
     <FooterWrap bgColor="#181818" isNoMargin={true}>
         <Wrap>
-            <Column colWidth="1/2" isNoPadding={true}>
+            <FooterColumn width="35%" isNoPadding={true}>
                 <Logo isLight={true} />
                 <NewsletterForm />
-            </Column>
+            </FooterColumn>
 
-            <Column colWidth="1/2" isNoPadding={true}>
-                <Wrap>
+            <FooterColumn width="55%" isNoPadding={true}>
+                <WrapGrid isCentered={false} isWrapped={true}>
                     {_.map(linkRows, (row, index) => (
-                        <Column key={`fc-${index}`} colWidth="1/3" isNoPadding={true}>
+                        <FooterSectionWrap
+                            key={`fc-${index}`}
+                            colWidth="1/4"
+                            isNoPadding={true}
+                            isMobileHidden={!row.isOnMobile}
+                        >
                             <RowHeading>
                                 {row.heading}
                             </RowHeading>
 
                             <LinkList links={row.links} />
-                        </Column>
+                        </FooterSectionWrap>
                     ))}
-                </Wrap>
-            </Column>
+                </WrapGrid>
+            </FooterColumn>
         </Wrap>
     </FooterWrap>
 );
@@ -95,6 +111,27 @@ const LinkList = (props: LinkListProps) => (
 const FooterSection = Section.withComponent('footer');
 const FooterWrap = styled(FooterSection)`
     color: ${colors.white};
+
+    @media (min-width: ${BREAKPOINTS.mobile}) {
+        height: 350px;
+    }
+`;
+
+const FooterColumn = styled(Column)`
+    @media (min-width: ${BREAKPOINTS.mobile}) {
+        width: ${props => props.width};
+    }
+
+    @media (max-width: ${BREAKPOINTS.mobile}) {
+        display: ${props => props.isMobileHidden && 'none'};
+        text-align: left;
+    }
+`;
+
+const FooterSectionWrap = styled(FooterColumn)`
+    @media (max-width: ${BREAKPOINTS.mobile}) {
+        width: 50%;
+    }
 `;
 
 const RowHeading = styled.h3`
diff --git a/packages/website/ts/@next/components/newsletterForm.tsx b/packages/website/ts/@next/components/newsletterForm.tsx
index 9e82975f4..972183b00 100644
--- a/packages/website/ts/@next/components/newsletterForm.tsx
+++ b/packages/website/ts/@next/components/newsletterForm.tsx
@@ -3,8 +3,6 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-import {Button} from 'ts/@next/components/button';
-
 interface InputProps {
     name: string;
     label: string;
@@ -26,17 +24,28 @@ const Input = (props: InputProps) => {
     );
 };
 
-export const NewsletterForm: React.StatelessComponent = (props: Props) => (
-    <StyledForm>
-        <InputWrapper>
-            <Input name="email" type="email" label="Email Address" />
-            <SubmitButton hasIcon={true}>
-                Submit
-            </SubmitButton>
-        </InputWrapper>
-        <Text>Subscribe to our newsletter for updates in the 0x ecosystem</Text>
-    </StyledForm>
-);
+export class NewsletterForm extends React.Component {
+    public submit = () => {
+        // submit this form
+    }
+
+    public render(): React.ReactNode {
+        return (
+            <StyledForm>
+                <InputWrapper>
+                    <Input name="email" type="email" label="Email Address" />
+
+                    <SubmitButton onClick={this.submit}>
+                        <svg width="22" height="17" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z" fill="#CBCBCB"/>
+                        </svg>
+                    </SubmitButton>
+                </InputWrapper>
+                <Text>Subscribe to our newsletter for updates in the 0x ecosystem</Text>
+            </StyledForm>
+        )
+    }
+}
 
 const StyledForm = styled.form`
     appearance: none;
@@ -53,27 +62,29 @@ const StyledInput = styled.input`
     border-bottom: 1px solid #393939;
     color: ${colors.textDarkSecondary};
     font-size: 1.294117647rem;
-    padding: 0 0 16px;
+    padding: 15px 0;
+    outline: none;
     width: 100%;
-    margin-bottom: 13px;
 `;
 
 const InputWrapper = styled.div`
     position: relative;
 `;
 
-const SubmitButton = styled(Button)`
-    display: flex;
-    justify-content: center;
-    align-items: center;
+const SubmitButton = styled.button`
+    width: 44px;
+    height: 44px;
+    background-color: transparent;
+    border: 0;
     position: absolute;
     right: 0;
-    top: calc(50% - 29px);
+    top: calc(50% - 22px);
 `;
 
-const Text = styled.span`
+const Text = styled.p`
     color: #656565;
     font-size: 0.833333333rem;
     font-weight: 300;
     line-height: 1.2em;
+    margin-top: 15px;
 `;