Update banner spacing and add rounded corners (#2117)

WordPress · May 19, 2023 · 5988b06 · 5988b06
1 parent 8d2031b
commit 5988b06
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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">