From e2ecee41b5b9fa6a09c5c2b139ff8b0b0317b124 Mon Sep 17 00:00:00 2001
From: Lizzy Thomson <lizzythomson17@gmail.com>
Date: Mon, 3 Apr 2023 14:32:42 -0600
Subject: [PATCH] web/satellite: update notifications to be aligned with
 dashboard

Update notification and banners to be aligned with inner dashboard
content

Issue https://github.com/storj/storj/issues/5636

Change-Id: I0e9fe73835e691bfa9aae05c1cfb08a5b9ab68e3
---
 web/satellite/src/components/common/VBanner.vue |  1 -
 .../notifications/UpgradeNotification.vue       |  5 -----
 .../project/dashboard/ProjectDashboard.vue      |  1 -
 web/satellite/src/views/DashboardArea.vue       | 17 ++++-------------
 4 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/web/satellite/src/components/common/VBanner.vue b/web/satellite/src/components/common/VBanner.vue
index 2b1b0d6fc..4acee5d99 100644
--- a/web/satellite/src/components/common/VBanner.vue
+++ b/web/satellite/src/components/common/VBanner.vue
@@ -77,7 +77,6 @@ watch(() => props.dashboardRef, () => {
     justify-content: space-between;
     align-items: center;
     padding: 1.375rem;
-    margin: 0 3rem;
     font-family: 'font_regular', sans-serif;
     background-color: var(--c-light-blue-1);
     border: 1px solid var(--c-light-blue-2);
diff --git a/web/satellite/src/components/notifications/UpgradeNotification.vue b/web/satellite/src/components/notifications/UpgradeNotification.vue
index 68e93fd0c..c01f0907a 100644
--- a/web/satellite/src/components/notifications/UpgradeNotification.vue
+++ b/web/satellite/src/components/notifications/UpgradeNotification.vue
@@ -66,7 +66,6 @@ async function openBanner(): Promise<void> {
     justify-content: space-between;
     align-items: center;
     padding: 1.375rem;
-    margin: 0 3rem;
     font-family: 'font_regular', sans-serif;
     font-size: 1rem;
     background-color: var(--c-white);
@@ -74,10 +73,6 @@ async function openBanner(): Promise<void> {
     border-radius: 10px;
     box-shadow: 0 7px 20px rgba(0 0 0 / 15%);
 
-    @media screen and (max-width: 800px) {
-        margin: 0 1.5rem;
-    }
-
     &__left {
         display: flex;
         align-items: center;
diff --git a/web/satellite/src/components/project/dashboard/ProjectDashboard.vue b/web/satellite/src/components/project/dashboard/ProjectDashboard.vue
index 213a5da22..0485bcc54 100644
--- a/web/satellite/src/components/project/dashboard/ProjectDashboard.vue
+++ b/web/satellite/src/components/project/dashboard/ProjectDashboard.vue
@@ -450,7 +450,6 @@ onBeforeUnmount((): void => {
 
 <style scoped lang="scss">
     .project-dashboard {
-        padding: 56px 55px 56px 40px;
         max-width: calc(100vw - 280px - 95px);
         background-image: url('../../../../static/images/project/background.png');
         background-position: top right;
diff --git a/web/satellite/src/views/DashboardArea.vue b/web/satellite/src/views/DashboardArea.vue
index 7a2995c92..a13ddccb9 100644
--- a/web/satellite/src/views/DashboardArea.vue
+++ b/web/satellite/src/views/DashboardArea.vue
@@ -13,10 +13,9 @@
                     :class="{ 'no-nav': isNavigationHidden }"
                 >
                     <div ref="dashboardContent" class="dashboard__wrap__main-area__content-wrap__container">
-                        <div class="bars">
-                            <BetaSatBar v-if="isBetaSatellite" />
-                            <MFARecoveryCodeBar v-if="showMFARecoveryCodeBar" :open-generate-modal="generateNewMFARecoveryCodes" />
-
+                        <BetaSatBar v-if="isBetaSatellite" />
+                        <MFARecoveryCodeBar v-if="showMFARecoveryCodeBar" :open-generate-modal="generateNewMFARecoveryCodes" />
+                        <div class="dashboard__wrap__main-area__content-wrap__container__content">
                             <UpgradeNotification
                                 v-if="isPaidTierBannerShown"
                                 :open-add-p-m-modal="togglePMModal"
@@ -710,7 +709,7 @@ onBeforeUnmount(() => {
                         &__content {
                             max-width: 1200px;
                             margin: 0 auto;
-                            padding: 48px 48px 60px;
+                            padding: 48px 48px 0;
                         }
                     }
                 }
@@ -742,14 +741,6 @@ onBeforeUnmount(() => {
         width: 100%;
     }
 
-    .bars {
-        display: contents;
-        position: fixed;
-        width: 100%;
-        top: 0;
-        z-index: 1000;
-    }
-
     @media screen and (max-width: 1280px) {
 
         .regular-navigation {