Refines footer, newsletterForm

1 files changed, 32 insertions, 21 deletions

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