web/satellite: adjust mobile header padding and logo

The mobile header's horizontal padding has been adjusted to match the
padding of the page content. Additionally, the size of the logo in the
mobile header has been decreased.

Change-Id: I7559813455fb186f1402783db6022ebdaa59c7ae
This commit is contained in:
Jeremy Wharton 2023-06-29 00:03:34 -05:00 committed by Storj Robot
parent f1fab9edfb
commit bd3aaf4f34
2 changed files with 8 additions and 26 deletions

View File

@ -5,9 +5,7 @@
<div class="navigation-area"> <div class="navigation-area">
<div class="navigation-area__container"> <div class="navigation-area__container">
<header class="navigation-area__container__header"> <header class="navigation-area__container__header">
<div class="navigation-area__container__header__logo" @click.stop="onLogoClick"> <LogoIcon class="navigation-area__container__header__logo" @click.stop="onLogoClick" />
<LogoIcon />
</div>
<CrossIcon v-if="isOpened" @click="toggleNavigation" /> <CrossIcon v-if="isOpened" @click="toggleNavigation" />
<MenuIcon v-else @click="toggleNavigation" /> <MenuIcon v-else @click="toggleNavigation" />
</header> </header>
@ -570,21 +568,14 @@ async function onLogout(): Promise<void> {
display: flex; display: flex;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 0 32px; padding: 0 24px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 4rem; height: 4rem;
&__logo { &__logo {
width: 211px; height: 30px;
max-width: 211px; width: auto;
height: 37px;
max-height: 37px;
svg {
width: 211px;
height: 37px;
}
} }
} }

View File

@ -33,9 +33,7 @@
<div class="header__mobile-area"> <div class="header__mobile-area">
<div class="header__mobile-area__container"> <div class="header__mobile-area__container">
<header class="header__mobile-area__container__header"> <header class="header__mobile-area__container__header">
<div class="header__mobile-area__container__header__logo" @click.stop="goToProjects"> <LogoIcon class="header__mobile-area__container__header__logo" @click.stop="goToProjects" />
<LogoIcon />
</div>
<CrossIcon v-if="isNavOpened" @click="toggleNavigation" /> <CrossIcon v-if="isNavOpened" @click="toggleNavigation" />
<MenuIcon v-else @click="toggleNavigation" /> <MenuIcon v-else @click="toggleNavigation" />
</header> </header>
@ -368,21 +366,14 @@ function sendDocsEvent(): void {
display: flex; display: flex;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 0 32px; padding: 0 20px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 4rem; height: 4rem;
&__logo { &__logo {
width: 211px; height: 30px;
max-width: 211px; width: auto;
height: 37px;
max-height: 37px;
svg {
width: 211px;
height: 37px;
}
} }
} }