dont show menu toggler on landing page, fix padding

pull/350/head
slowbackspace 5 years ago
parent d80e108754
commit cac5b73072

@ -34,9 +34,17 @@ const LayoutWrapper = styled.div`
} }
`; `;
const MenuToggler = styled.div` const Left = styled.div`
display: none; display: none;
flex: 0 0 33%; flex: 0 0 33%;
@media screen and (max-width: ${SCREEN_SIZE.SM}) {
display: initial;
}
`;
const MenuToggler = styled.div`
display: none;
white-space: nowrap; white-space: nowrap;
color: ${colors.WHITE}; color: ${colors.WHITE};
align-self: center; align-self: center;
@ -97,15 +105,18 @@ const A = styled.a`
`; `;
type Props = { type Props = {
sidebarEnabled?: boolean,
sidebarOpened?: boolean, sidebarOpened?: boolean,
toggleSidebar?: toggleSidebarType, toggleSidebar?: toggleSidebarType,
}; };
const Header = ({ sidebarOpened, toggleSidebar }: Props) => ( const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => (
<Wrapper> <Wrapper>
<LayoutWrapper> <LayoutWrapper>
<MenuToggler onClick={toggleSidebar}>{sidebarOpened ? '✕ Close' : '☰ Menu'}</MenuToggler> <Left>
{ sidebarEnabled && <MenuToggler onClick={toggleSidebar}>{sidebarOpened ? '✕ Close' : '☰ Menu'}</MenuToggler>}
</Left>
<Logo> <Logo>
<NavLink to="/"> <NavLink to="/">
<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">

@ -18,6 +18,10 @@ type Props = {
showDisconnect: boolean, showDisconnect: boolean,
}; };
const StyledConnectDevice = styled.div`
padding: 0px 48px;
`;
const Title = styled.div` const Title = styled.div`
margin-top: 60px; margin-top: 60px;
`; `;
@ -105,7 +109,7 @@ class ConnectDevice extends PureComponent<Props> {
render() { render() {
return ( return (
<div> <StyledConnectDevice>
<Title> <Title>
<H2 claim>The private bank in your hands.</H2> <H2 claim>The private bank in your hands.</H2>
<P>Trezor Wallet is an easy-to-use interface for your Trezor.</P> <P>Trezor Wallet is an easy-to-use interface for your Trezor.</P>
@ -156,7 +160,7 @@ class ConnectDevice extends PureComponent<Props> {
</StyledLink> </StyledLink>
</P> </P>
</Footer> </Footer>
</div> </StyledConnectDevice>
); );
} }
} }

@ -106,7 +106,7 @@ const StyledBackdrop = styled(Backdrop)`
const Wallet = (props: Props) => ( const Wallet = (props: Props) => (
<AppWrapper> <AppWrapper>
<Header sidebarOpened={props.wallet.showSidebar} toggleSidebar={props.toggleSidebar} /> <Header sidebarEnabled={!!props.wallet.selectedDevice} sidebarOpened={props.wallet.showSidebar} toggleSidebar={props.toggleSidebar} />
<AppNotifications /> <AppNotifications />
<WalletWrapper> <WalletWrapper>
<StyledBackdrop show={props.wallet.showSidebar} onClick={props.toggleSidebar} animated /> <StyledBackdrop show={props.wallet.showSidebar} onClick={props.toggleSidebar} animated />

Loading…
Cancel
Save