diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-03 08:56:49 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-03 08:56:49 +0800 |
commit | edb3a613879ecb4ae077dc4e4256965de2092e48 (patch) | |
tree | b7860f548c5399238d466f51241d86720b3a87a2 /packages/website/ts/components/logo.tsx | |
parent | 89f67b9becf3b4c0d13cceeaca4d5656ad500a9a (diff) | |
parent | 1ddf1087dd327b2ef35165518ee91eb457b84174 (diff) | |
download | dexon-sol-tools-edb3a613879ecb4ae077dc4e4256965de2092e48.tar dexon-sol-tools-edb3a613879ecb4ae077dc4e4256965de2092e48.tar.gz dexon-sol-tools-edb3a613879ecb4ae077dc4e4256965de2092e48.tar.bz2 dexon-sol-tools-edb3a613879ecb4ae077dc4e4256965de2092e48.tar.lz dexon-sol-tools-edb3a613879ecb4ae077dc4e4256965de2092e48.tar.xz dexon-sol-tools-edb3a613879ecb4ae077dc4e4256965de2092e48.tar.zst dexon-sol-tools-edb3a613879ecb4ae077dc4e4256965de2092e48.zip |
Merge branch 'development' into feature/instant/tell-amount-available
Diffstat (limited to 'packages/website/ts/components/logo.tsx')
-rw-r--r-- | packages/website/ts/components/logo.tsx | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/packages/website/ts/components/logo.tsx b/packages/website/ts/components/logo.tsx new file mode 100644 index 000000000..19aeb901e --- /dev/null +++ b/packages/website/ts/components/logo.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { ThemeInterface } from 'ts/components/siteWrap'; +import LogoIcon from 'ts/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> +); |