arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-09 15:40:55 +00:00
Code Issues Releases Wiki Activity

responsive trezor logo in header

Browse Source
This commit is contained in:
slowbackspace 2019-02-28 13:52:32 +01:00
parent 1fd76c7e9e
commit c77ad9f78f
1 changed files with 39 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/Header/index.js
View File

@ -18,7 +18,6 @@ const Wrapper = styled.header`
width: 100%; width: 100%;
height: 52px; height: 52px;
background: ${colors.HEADER}; background: ${colors.HEADER};
overflow: hidden;
z-index: 200; z-index: 200;
`; `;
@ -65,21 +64,43 @@ const TogglerText = styled.div`
`; `;
const TREZOR = styled.div``;
const T = styled.div``;
const Logo = styled.div` const Logo = styled.div`
flex: 1; flex: 1;
justify-content: flex-start; justify-content: flex-start;
display: flex; display: flex;
${T} {
display: none;
width: 20px;
}
${TREZOR} {
width: 100px;
}
svg { svg {
fill: ${colors.WHITE}; fill: ${colors.WHITE};
height: 28px; height: 28px;
width: 100px;
} }
@media screen and (max-width: ${SCREEN_SIZE.SM}) { @media screen and (max-width: ${SCREEN_SIZE.SM}) {
flex: 1 0 33%; flex: 1 0 33%;
justify-content: center; justify-content: center;
} }
@media screen and (max-width: ${SCREEN_SIZE.XS}) {
/* hides full width trezor logo, shows only trezor icon */
${TREZOR} {
display: none;
}
${T} {
display: inherit;
}
}
`; `;
const MenuLinks = styled.div` const MenuLinks = styled.div`
@ -169,6 +190,7 @@ const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => (
</Left> </Left>
<Logo> <Logo>
<NavLink to="/"> <NavLink to="/">
<TREZOR>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 163.7 41.9" width="100%" height="100%" preserveAspectRatio="xMinYMin meet"> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 163.7 41.9" width="100%" height="100%" preserveAspectRatio="xMinYMin meet">
<polygon points="101.1,12.8 118.2,12.8 118.2,17.3 108.9,29.9 118.2,29.9 118.2,35.2 101.1,35.2 101.1,30.7 110.4,18.1 101.1,18.1" /> <polygon points="101.1,12.8 118.2,12.8 118.2,17.3 108.9,29.9 118.2,29.9 118.2,35.2 101.1,35.2 101.1,30.7 110.4,18.1 101.1,18.1" />
<path d="M158.8,26.9c2.1-0.8,4.3-2.9,4.3-6.6c0-4.5-3.1-7.4-7.7-7.4h-10.5v22.3h5.8v-7.5h2.2l4.1,7.5h6.7L158.8,26.9z M154.7,22.5 h-4V18h4c1.5,0,2.5,0.9,2.5,2.2C157.2,21.6,156.2,22.5,154.7,22.5z" /> <path d="M158.8,26.9c2.1-0.8,4.3-2.9,4.3-6.6c0-4.5-3.1-7.4-7.7-7.4h-10.5v22.3h5.8v-7.5h2.2l4.1,7.5h6.7L158.8,26.9z M154.7,22.5 h-4V18h4c1.5,0,2.5,0.9,2.5,2.2C157.2,21.6,156.2,22.5,154.7,22.5z" />
@ -178,6 +200,12 @@ const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => (
<path d="M79.4,20.3c0-4.5-3.1-7.4-7.7-7.4H61.2v22.3H67v-7.5h2.2l4.1,7.5H80l-4.9-8.3C77.2,26.1,79.4,24,79.4,20.3z M71,22.5h-4V18 h4c1.5,0,2.5,0.9,2.5,2.2C73.5,21.6,72.5,22.5,71,22.5z" /> <path d="M79.4,20.3c0-4.5-3.1-7.4-7.7-7.4H61.2v22.3H67v-7.5h2.2l4.1,7.5H80l-4.9-8.3C77.2,26.1,79.4,24,79.4,20.3z M71,22.5h-4V18 h4c1.5,0,2.5,0.9,2.5,2.2C73.5,21.6,72.5,22.5,71,22.5z" />
<polygon points="40.5,12.8 58.6,12.8 58.6,18.1 52.4,18.1 52.4,35.2 46.6,35.2 46.6,18.1 40.5,18.1 " /> <polygon points="40.5,12.8 58.6,12.8 58.6,18.1 52.4,18.1 52.4,35.2 46.6,35.2 46.6,18.1 40.5,18.1 " />
</svg> </svg>
</TREZOR>
<T>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 20 41.9" width="100%" height="100%" preserveAspectRatio="xMinYMin meet">
<path d="M24.6,9.7C24.6,4.4,20,0,14.4,0S4.2,4.4,4.2,9.7v3.1H0v22.3h0l14.4,6.7l14.4-6.7h0V12.9h-4.2V9.7z M9.4,9.7 c0-2.5,2.2-4.5,5-4.5s5,2,5,4.5v3.1H9.4V9.7z M23,31.5l-8.6,4l-8.6-4V18.1H23V31.5z" />
</svg>
</T>
</NavLink> </NavLink>
</Logo> </Logo>
<MenuLinks> <MenuLinks>