diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-12 00:53:15 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-12 00:53:15 +0800 |
commit | faee7513952a4b87d5f9e9dde9deb20126f58834 (patch) | |
tree | 8168000e484e621e1526cf48fb0f979a6d98d972 /packages/dev-tools-pages/ts/components/header.tsx | |
parent | 742e5e039dd4e821209b5511fb6a194d11c6291c (diff) | |
parent | 2cf57a48dd2857dd5cf2f31f4c60dd47ae4d34a5 (diff) | |
download | dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.tar dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.tar.gz dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.tar.bz2 dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.tar.lz dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.tar.xz dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.tar.zst dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.zip |
Merge branch 'development' into feature/instant/asset-buyer-check-liquidity
Diffstat (limited to 'packages/dev-tools-pages/ts/components/header.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/header.tsx | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/header.tsx b/packages/dev-tools-pages/ts/components/header.tsx new file mode 100644 index 000000000..2787692c1 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/header.tsx @@ -0,0 +1,76 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { ContextInterface, ThemeContext } from 'ts/context'; +import { media } from 'ts/variables'; + +import { Container } from './container'; +import { Small } from './typography'; + +const Header: React.StatelessComponent<{}> = () => ( + <ThemeContext.Consumer> + {({ icon, title }: ContextInterface) => ( + <StyledHeader> + <Container> + <LogoMark> + <Logo as={icon as 'svg'} /> + <Title>{title}</Title> + </LogoMark> + + <Link as="a" href="https://0xproject.com/"> + Built by 0x + </Link> + </Container> + </StyledHeader> + )} + </ThemeContext.Consumer> +); + +const StyledHeader = styled.header` + padding-top: 3.75rem; + padding-bottom: 0.875rem; + width: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 2; + ${Container} { + display: flex; + justify-content: space-between; + align-items: center; + } + + ${media.small`padding-top: 2.125rem;`}; +`; + +const LogoMark = styled.div` + position: relative; + height: 1.75rem; + display: flex; + align-items: center; +`; + +const Logo = styled.div` + color: ${props => props.theme.colors.main}; + width: 1.75rem; + height: 100%; +`; + +const Title = styled.h1` + font-size: 1.5rem; + line-height: 1; + white-space: nowrap; + margin-top: 2px; + margin-bottom: 0; + margin-left: 0.8125rem; + + ${media.small`font-size: 1.25rem;`}; +`; + +const Link = styled(Small)` + :hover { + text-decoration: underline; + } +`; + +export { Header }; |