aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/website/ts/@next/components/footer.tsx8
-rw-r--r--packages/website/ts/@next/components/icon.tsx22
-rw-r--r--packages/website/ts/@next/components/newsletterForm.tsx76
-rw-r--r--packages/website/ts/@next/icons/form-arrow.svg1
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