From 5988b067c8ae3c004c7983c9903dede1c775df1a Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Fri, 19 May 2023 10:17:42 -0400
Subject: [PATCH] Update banner spacing and add rounded corners (#2117)

---
 frontend/src/components/VBanner/VBanners.vue  | 26 ++++++++++++-------
 .../VBanner/VNotificationBanner.vue           |  2 +-
 frontend/src/layouts/content-layout.vue       |  2 +-
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/VBanner/VBanners.vue b/frontend/src/components/VBanner/VBanners.vue
index 956fe64aa48..bd666c8dff8 100644
--- a/frontend/src/components/VBanner/VBanners.vue
+++ b/frontend/src/components/VBanner/VBanners.vue
@@ -1,14 +1,16 @@
 <template>
   <div>
-    <VMigrationNotice
-      v-if="shouldShowMigrationBanner"
-      @close="dismissBanner('cc-referral')"
-    />
-    <VTranslationStatusBanner
-      v-if="shouldShowTranslationBanner"
-      :banner-key="translationBannerId"
-      @close="dismissBanner(translationBannerId)"
-    />
+    <div v-show="showBanners" class="flex flex-col gap-2 p-2 pb-0">
+      <VMigrationNotice
+        v-if="shouldShowMigrationBanner"
+        @close="dismissBanner('cc-referral')"
+      />
+      <VTranslationStatusBanner
+        v-if="shouldShowTranslationBanner"
+        :banner-key="translationBannerId"
+        @close="dismissBanner(translationBannerId)"
+      />
+    </div>
   </div>
 </template>
 
@@ -42,11 +44,15 @@ export default defineComponent({
       uiStore.dismissBanner(bannerKey)
     }
 
+    const showBanners = computed(
+      () => shouldShowMigrationBanner.value || shouldShowTranslationBanner.value
+    )
+
     return {
       translationBannerId,
       shouldShowMigrationBanner,
       shouldShowTranslationBanner,
-
+      showBanners,
       dismissBanner,
     }
   },
diff --git a/frontend/src/components/VBanner/VNotificationBanner.vue b/frontend/src/components/VBanner/VNotificationBanner.vue
index 1fb785f1966..afd0914952e 100644
--- a/frontend/src/components/VBanner/VNotificationBanner.vue
+++ b/frontend/src/components/VBanner/VNotificationBanner.vue
@@ -1,6 +1,6 @@
 <template>
   <section
-    class="flex items-center justify-between gap-x-2 px-4 py-2 md:px-7"
+    class="flex items-center justify-between gap-x-2 rounded-sm px-4 py-2 md:px-7"
     :class="$style[variant]"
     :data-testid="`banner-${id}`"
   >
diff --git a/frontend/src/layouts/content-layout.vue b/frontend/src/layouts/content-layout.vue
index ed0dd44c4a0..839e4c63c87 100644
--- a/frontend/src/layouts/content-layout.vue
+++ b/frontend/src/layouts/content-layout.vue
@@ -10,7 +10,7 @@
         : 'grid-cols-1',
     ]"
   >
-    <div class="header-el sticky top-0 z-40 block">
+    <div class="header-el sticky top-0 z-40 block bg-white">
       <VTeleportTarget name="skip-to-content" :force-destroy="true" />
       <VBanners />
       <template v-if="isSearchHeader">