diff options
author | Fred Carlsen <fred@sjelfull.no> | 2018-11-30 16:55:38 +0800 |
---|---|---|
committer | Fred Carlsen <fred@sjelfull.no> | 2018-11-30 16:58:20 +0800 |
commit | 189920eab99a731dd6b0880a99ec8cc911b64314 (patch) | |
tree | ec8a2892410732e6339bf4568be50c586a2e65bb /packages/website/ts/@next/components/newsletterForm.tsx | |
parent | 83499176d9b627d383a7edc17dd862861af05320 (diff) | |
download | dexon-sol-tools-189920eab99a731dd6b0880a99ec8cc911b64314.tar dexon-sol-tools-189920eab99a731dd6b0880a99ec8cc911b64314.tar.gz dexon-sol-tools-189920eab99a731dd6b0880a99ec8cc911b64314.tar.bz2 dexon-sol-tools-189920eab99a731dd6b0880a99ec8cc911b64314.tar.lz dexon-sol-tools-189920eab99a731dd6b0880a99ec8cc911b64314.tar.xz dexon-sol-tools-189920eab99a731dd6b0880a99ec8cc911b64314.tar.zst dexon-sol-tools-189920eab99a731dd6b0880a99ec8cc911b64314.zip |
Added newsletter form to footer
Diffstat (limited to 'packages/website/ts/@next/components/newsletterForm.tsx')
-rw-r--r-- | packages/website/ts/@next/components/newsletterForm.tsx | 76 |
1 files changed, 76 insertions, 0 deletions
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; +`; |