diff --git a/src/components/Header/index.js b/src/components/Header/index.js index 1fcabd22..47e63098 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -18,7 +18,6 @@ const Wrapper = styled.header` width: 100%; height: 52px; background: ${colors.HEADER}; - overflow: hidden; z-index: 200; `; @@ -65,21 +64,43 @@ const TogglerText = styled.div` `; +const TREZOR = styled.div``; +const T = styled.div``; + const Logo = styled.div` flex: 1; justify-content: flex-start; display: flex; + ${T} { + display: none; + width: 20px; + } + + ${TREZOR} { + width: 100px; + } + svg { fill: ${colors.WHITE}; height: 28px; - width: 100px; } @media screen and (max-width: ${SCREEN_SIZE.SM}) { flex: 1 0 33%; 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` @@ -169,15 +190,22 @@ const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => ( - - - - - - - - - + + + + + + + + + + + + + + + +