From bd3aaf4f34675397bd8408f74e634e98360de583 Mon Sep 17 00:00:00 2001
From: Jeremy Wharton <jeremy.e.wharton@gmail.com>
Date: Thu, 29 Jun 2023 00:03:34 -0500
Subject: [PATCH] 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
---
 .../components/navigation/MobileNavigation.vue  | 17 ++++-------------
 .../views/all-dashboard/components/Heading.vue  | 17 ++++-------------
 2 files changed, 8 insertions(+), 26 deletions(-)

diff --git a/web/satellite/src/components/navigation/MobileNavigation.vue b/web/satellite/src/components/navigation/MobileNavigation.vue
index 3e79ad2c7..cb51366cf 100644
--- 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
index a2e81a826..2740c3e99 100644
--- 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;
                 }
             }