diff options
author | August Skare <post@augustskare.no> | 2018-11-20 00:27:00 +0800 |
---|---|---|
committer | August Skare <post@augustskare.no> | 2018-11-20 00:27:00 +0800 |
commit | 31d07fdac80a2a546646b1eb232fa7dd6319ce83 (patch) | |
tree | cd2bbb781ea499f599c6b06d54270067c437c020 /packages/dev-tools-pages/ts/components/footer.tsx | |
parent | 881655bb57e93fa1cf344585cda1653c995f1411 (diff) | |
download | dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.tar dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.tar.gz dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.tar.bz2 dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.tar.lz dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.tar.xz dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.tar.zst dexon-0x-contracts-31d07fdac80a2a546646b1eb232fa7dd6319ce83.zip |
rename all files and directories to lowercase
Diffstat (limited to 'packages/dev-tools-pages/ts/components/footer.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/footer.tsx | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/footer.tsx b/packages/dev-tools-pages/ts/components/footer.tsx new file mode 100644 index 000000000..a278fdfee --- /dev/null +++ b/packages/dev-tools-pages/ts/components/footer.tsx @@ -0,0 +1,132 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { context as compiler } from 'ts/context/compiler'; +import { context as cov } from 'ts/context/cov'; +import { context as profiler } from 'ts/context/profiler'; +import { context as trace } from 'ts/context/trace'; +import MainIcon from 'ts/icons/logos/0x.svg'; +import { media } from 'ts/variables'; + +import { Container } from './Container'; +import { Alpha, Beta } from './Typography'; + +const tools = [trace, cov, compiler, profiler]; + +const Footer: React.StatelessComponent<{}> = () => ( + <StyledFooter> + <Container> + <Top> + <Alpha>Other tools by 0x</Alpha> + <List> + {tools.map(({ title, subtitle, icon }) => ( + <ListItem key={title}> + <ListLink href="#"> + <Icon as={icon} /> + <div> + <Beta>{title}</Beta> + <p>{subtitle}</p> + </div> + </ListLink> + </ListItem> + ))} + </List> + </Top> + <Media as="aside"> + <Icon as={MainIcon} /> + <Small> + 0x is an open, permissionless protocol allowing for tokens to be traded on the Ethereum blockchain. + </Small> + </Media> + </Container> + </StyledFooter> +); + +const StyledFooter = styled.footer` + background-color: ${props => props.theme.colors.secondary}; + padding-top: 6.25rem; + padding-bottom: 5.4375rem; + + ${media.small`padding-top: 2.5rem;`}; +`; + +const Top = styled.div` + display: flex; + justify-content: space-between; + margin-bottom: 9.375rem; + + ${media.medium` + display: block; + margin-bottom: 5.3125rem; + `}; + + ${Alpha} { + ${media.medium`margin-bottom: 3.8125rem;`}; + } +`; + +const Icon = styled.div` + margin-right: 1.3125rem; + flex-shrink: 0; + ${media.small`margin-right: 0.9375rem`}; +`; + +const Media = styled.div` + display: flex; + align-items: center; + + ${Icon} { + margin-top: 0.5rem; + align-self: flex-start; + } +`; + +const List = styled.ul` + list-style: none; + margin: 0; + padding: 0; + width: 66.693548387%; + display: flex; + flex-wrap: wrap; + + ${media.medium` + width: 100%; + `}; + + ${media.small` + display: block; + `}; +`; + +const ListItem = styled.li` + margin-bottom: 3.3125rem; + padding-right: 1rem; + flex-basis: 50%; + :nth-last-of-type(-n + 2) { + margin-bottom: 0; + + ${media.small`margin-bottom: 1.875rem`}; + } + + ${media.small` + margin-bottom: 1.875rem + :last-of-type { + margin-bottom: 0; + } + `}; +`; + +const ListLink = styled.a` + display: flex; + align-items: center; + :hover { + color: ${props => props.theme.colors.dark}; + } +`; + +const Small = styled.small` + font-size: 1em; + max-width: 37.5rem; +`; + +export { Footer }; |