Added newsletter form to footer

4 files changed, 104 insertions, 3 deletions

diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index b962b8f34..0aff4e840 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -4,9 +4,10 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-import { Button } from './button';
-import { Column, Section, Wrap } from './layout';
-import { Logo } from './logo';
+import { Button } from 'ts/@next/components/button';
+import { Column, Section, Wrap } from 'ts/@next/components/layout';
+import { Logo } from 'ts/@next/components/logo';
+import { NewsletterForm } from 'ts/@next/components/newsletterForm';
 
 interface FooterInterface {
 }
@@ -61,6 +62,7 @@ export const Footer: React.StatelessComponent<FooterInterface> = ({}) => (
     <Wrap>
       <Column colWidth="1/2" noPadding>
         <Logo />
+        <NewsletterForm />
       </Column>
 
       <Column colWidth="1/2" noPadding>
diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx
new file mode 100644
index 000000000..10916f28e
--- /dev/null
+++ b/packages/website/ts/@next/components/icon.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+interface Props {
+    icon: any;
+    size?: any;
+}
+
+const StyledIcon = styled.div`
+    margin: auto;
+    flex-shrink: 0;
+
+    ${(props: Props) => props.size && `
+    width: ${props.size}; height: auto;
+    `}
+`;
+
+export const Icon: React.StatelessComponent = ({ icon, ...props }) => (
+    <>
+        <StyledIcon as={icon as 'svg'} {...props} />
+    </>
+);
diff --git a/packages/website/ts/@next/components/newsletterForm.tsx b/packages/website/ts/@next/components/newsletterForm.tsx
new file mode 100644
index 000000000..6a82acbff
--- /dev/null
+++ b/packages/website/ts/@next/components/newsletterForm.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors } from 'ts/style/colors';
+
+import formArrow from 'ts/@next/icons/form-arrow.svg';
+
+import {Button} from 'ts/@next/components/button';
+import {Icon} from 'ts/@next/components/icon';
+
+interface InputProps {
+    name: string;
+    label: string;
+}
+
+interface Props {
+}
+
+const Input = ({ ...props }) => {
+    const { name, label } = props;
+    const id = 'input-' + name;
+
+    return (
+        <>
+            <label className="visuallyHidden" htmlFor={id}>{label}</label>
+            <StyledInput id={id} placeholder={label} {...props} />
+        </>
+    )
+};
+
+export const NewsletterForm: React.StatelessComponent = (props: Props) => (
+    <StyledForm>
+        <InputWrapper>
+            <Input name="email" type="email" label="Email Address" />
+            <Icon icon={formArrow} />
+        </InputWrapper>
+        <Text>Subscribe to our newsletter for updates in the 0x ecosystem</Text>
+    </StyledForm>
+);
+
+const StyledForm = styled.form`
+    appearance: none;
+    border: 0;
+    color: ${colors.white};
+    padding: 13px 0 14px;
+    margin-top: 27px;
+`;
+
+const StyledInput = styled.input`
+    appearance: none;
+    background-color: transparent;
+    border: 0;
+    border-bottom: 1px solid #393939;
+    color: ${colors.textDarkSecondary};
+    font-size: 1.294117647rem;
+    padding: 0 0 16px;
+    width: 100%;
+    margin-bottom: 13px;
+`;
+
+const InputWrapper = styled.div`
+    position: relative;
+`;
+
+const ButtonWrapper = styled(Button)`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
+const Text = styled.span`
+    color: #656565;
+    font-size: 0.833333333rem;
+    font-weight: 300;
+    line-height: 1.2em;
+`;
diff --git a/packages/website/ts/@next/icons/form-arrow.svg b/packages/website/ts/@next/icons/form-arrow.svg
new file mode 100644
index 000000000..2070a6d48
--- /dev/null
+++ b/packages/website/ts/@next/icons/form-arrow.svg
@@ -0,0 +1 @@
+<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>
\ No newline at end of file