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
storj · Jun 29, 2023 · bd3aaf4 · bd3aaf4
1 parent f1fab9e
commit bd3aaf4
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 26 deletions.
diff --git a/web/satellite/src/components/navigation/MobileNavigation.vue b/web/satellite/src/components/navigation/MobileNavigation.vue
@@ -5,9 +5,7 @@
     <div class="navigation-area">
         <div class="navigation-area__container">
             <header class="navigation-area__container__header">
-                <div class="navigation-area__container__header__logo" @click.stop="onLogoClick">
-                    <LogoIcon />
-                </div>
+                <LogoIcon class="navigation-area__container__header__logo" @click.stop="onLogoClick" />
                 <CrossIcon v-if="isOpened" @click="toggleNavigation" />
                 <MenuIcon v-else @click="toggleNavigation" />
             </header>
@@ -570,21 +568,14 @@ async function onLogout(): Promise<void> {
             display: flex;
             width: 100%;
             box-sizing: border-box;
-            padding: 0 32px;
+            padding: 0 24px;
             justify-content: space-between;
             align-items: center;
             height: 4rem;
 
             &__logo {
-                width: 211px;
-                max-width: 211px;
-                height: 37px;
-                max-height: 37px;
-
-                svg {
-                    width: 211px;
-                    height: 37px;
-                }
+                height: 30px;
+                width: auto;
             }
         }
 

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