diff options
author | Brandon Millman <brandon@0xproject.com> | 2018-12-15 06:42:55 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-12-15 06:42:55 +0800 |
commit | e3dcb7107bdd7bd8197818a05b163985026f7ca2 (patch) | |
tree | ee8e5617762c49ab9bdb6bde676f49c91eb2f012 /packages/website/ts/@next/components/logo.tsx | |
parent | 6d45beccad44e86ddd692d0cf54c09c29c5d9daf (diff) | |
parent | f7ceb4cf582debf2521ef4797674e31a86ff6a38 (diff) | |
download | dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.tar dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.tar.gz dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.tar.bz2 dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.tar.lz dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.tar.xz dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.tar.zst dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.zip |
Merge pull request #1375 from bakkenbaeck/website
[WIP] Website
Diffstat (limited to 'packages/website/ts/@next/components/logo.tsx')
-rw-r--r-- | packages/website/ts/@next/components/logo.tsx | 38 |
1 files changed, 38 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx new file mode 100644 index 000000000..2423f07b5 --- /dev/null +++ b/packages/website/ts/@next/components/logo.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { ThemeInterface } from 'ts/@next/components/siteWrap'; +import LogoIcon from 'ts/@next/icons/logo-with-type.svg'; + +interface LogoInterface { + theme?: ThemeInterface; +} + +// Note let's refactor this +// is it absolutely necessary to have a stateless component +// to pass props down into the styled icon? +const StyledLogo = styled.div` + text-align: left; + position: relative; + z-index: 25; + + @media (max-width: 800px) { + svg { + width: 60px; + } + } +`; + +const Icon = styled(LogoIcon)<LogoInterface>` + flex-shrink: 0; + + path { + fill: ${props => props.theme.textColor}; + } +`; + +export const Logo: React.StatelessComponent<LogoInterface> = (props: LogoInterface) => ( + <StyledLogo> + <Icon {...props} /> + </StyledLogo> +); |