diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-10 22:00:19 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-10 22:00:35 +0800 |
commit | 93d1f2255e1bf1e81ecd336145c8e4f24b1baff8 (patch) | |
tree | 2a713fd48270a09b6e35352ca5ea07c53e96a4e6 /packages/website/ts/@next/components/newsletterForm.tsx | |
parent | 727ced0684244342f616455bb33ea5df5c061aa2 (diff) | |
download | dexon-0x-contracts-93d1f2255e1bf1e81ecd336145c8e4f24b1baff8.tar dexon-0x-contracts-93d1f2255e1bf1e81ecd336145c8e4f24b1baff8.tar.gz dexon-0x-contracts-93d1f2255e1bf1e81ecd336145c8e4f24b1baff8.tar.bz2 dexon-0x-contracts-93d1f2255e1bf1e81ecd336145c8e4f24b1baff8.tar.lz dexon-0x-contracts-93d1f2255e1bf1e81ecd336145c8e4f24b1baff8.tar.xz dexon-0x-contracts-93d1f2255e1bf1e81ecd336145c8e4f24b1baff8.tar.zst dexon-0x-contracts-93d1f2255e1bf1e81ecd336145c8e4f24b1baff8.zip |
Refines footer, newsletterForm
Diffstat (limited to 'packages/website/ts/@next/components/newsletterForm.tsx')
-rw-r--r-- | packages/website/ts/@next/components/newsletterForm.tsx | 53 |
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; `; |