aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-10 22:00:19 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-10 22:00:35 +0800
commit93d1f2255e1bf1e81ecd336145c8e4f24b1baff8 (patch)
tree2a713fd48270a09b6e35352ca5ea07c53e96a4e6 /packages/website/ts/@next/components
parent727ced0684244342f616455bb33ea5df5c061aa2 (diff)
downloaddexon-sol-tools-93d1f2255e1bf1e81ecd336145c8e4f24b1baff8.tar.gz
dexon-sol-tools-93d1f2255e1bf1e81ecd336145c8e4f24b1baff8.tar.zst
dexon-sol-tools-93d1f2255e1bf1e81ecd336145c8e4f24b1baff8.zip
Refines footer, newsletterForm
Diffstat (limited to 'packages/website/ts/@next/components')
-rw-r--r--packages/website/ts/@next/components/footer.tsx55
-rw-r--r--packages/website/ts/@next/components/newsletterForm.tsx53
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;
`;