diff options
| -rw-r--r-- | packages/website/ts/@next/components/footer.tsx | 55 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/newsletterForm.tsx | 53 |
2 files changed, 78 insertions, 30 deletions
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx index 13b681572..28af394b5 100644 --- a/packages/website/ts/@next/components/footer.tsx +++ b/packages/website/ts/@next/components/footer.tsx @@ -5,7 +5,7 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; -import { Column, Section, Wrap } from 'ts/@next/components/layout'; +import { BREAKPOINTS, Column, Section, Wrap, WrapGrid } from 'ts/@next/components/layout'; import { Logo } from 'ts/@next/components/logo'; import { NewsletterForm } from 'ts/@next/components/newsletterForm'; @@ -30,13 +30,23 @@ interface LinkListProps { const linkRows: LinkRows[] = [ { heading: 'Products', + isOnMobile: true, links: [ { url: '/next/0x-instant', text: '0x Instant' }, { url: '#', text: '0x Launch Kit' }, ], }, { + heading: 'Developers', + links: [ + { url: '#', text: 'Documentation' }, + { url: '#', text: 'GitHub' }, + { url: '#', text: 'Whitepaper' }, + ], + }, + { heading: 'About', + isOnMobile: true, links: [ { url: '#', text: 'Mission' }, { url: '#', text: 'Team' }, @@ -46,6 +56,7 @@ const linkRows: LinkRows[] = [ }, { heading: 'Community', + isOnMobile: true, links: [ { url: '#', text: 'Twitter' }, { url: '#', text: 'Rocket Chat' }, @@ -58,24 +69,29 @@ const linkRows: LinkRows[] = [ export const Footer: React.StatelessComponent<FooterInterface> = ({}) => ( <FooterWrap bgColor="#181818" isNoMargin={true}> <Wrap> - <Column colWidth="1/2" isNoPadding={true}> + <FooterColumn width="35%" isNoPadding={true}> <Logo isLight={true} /> <NewsletterForm /> - </Column> + </FooterColumn> - <Column colWidth="1/2" isNoPadding={true}> - <Wrap> + <FooterColumn width="55%" isNoPadding={true}> + <WrapGrid isCentered={false} isWrapped={true}> {_.map(linkRows, (row, index) => ( - <Column key={`fc-${index}`} colWidth="1/3" isNoPadding={true}> + <FooterSectionWrap + key={`fc-${index}`} + colWidth="1/4" + isNoPadding={true} + isMobileHidden={!row.isOnMobile} + > <RowHeading> {row.heading} </RowHeading> <LinkList links={row.links} /> - </Column> + </FooterSectionWrap> ))} - </Wrap> - </Column> + </WrapGrid> + </FooterColumn> </Wrap> </FooterWrap> ); @@ -95,6 +111,27 @@ const LinkList = (props: LinkListProps) => ( const FooterSection = Section.withComponent('footer'); const FooterWrap = styled(FooterSection)` color: ${colors.white}; + + @media (min-width: ${BREAKPOINTS.mobile}) { + height: 350px; + } +`; + +const FooterColumn = styled(Column)` + @media (min-width: ${BREAKPOINTS.mobile}) { + width: ${props => props.width}; + } + + @media (max-width: ${BREAKPOINTS.mobile}) { + display: ${props => props.isMobileHidden && 'none'}; + text-align: left; + } +`; + +const FooterSectionWrap = styled(FooterColumn)` + @media (max-width: ${BREAKPOINTS.mobile}) { + width: 50%; + } `; const RowHeading = styled.h3` 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; `; |