From 309860fa7bc365106de9c9e8af83b7edf9a1c92b Mon Sep 17 00:00:00 2001
From: Sarah German <sgerman@gitlab.com>
Date: Tue, 4 Oct 2022 22:56:11 +0000
Subject: Refactor the archives banner to use versions.json and GitLab UI

---
 content/frontend/shared/components/docs_banner.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

(limited to 'content/frontend/shared/components/docs_banner.vue')

diff --git a/content/frontend/shared/components/docs_banner.vue b/content/frontend/shared/components/docs_banner.vue
index 3748bf8e..0c205a05 100644
--- a/content/frontend/shared/components/docs_banner.vue
+++ b/content/frontend/shared/components/docs_banner.vue
@@ -1,5 +1,10 @@
 <script>
+import { GlButton } from '@gitlab/ui';
+
 export default {
+  components: {
+    GlButton,
+  },
   props: {
     text: {
       type: String,
@@ -30,10 +35,16 @@ export default {
 </script>
 
 <template>
-  <div v-if="isVisible" class="banner position-fixed w-100 text-center">
+  <div
+    v-if="isVisible"
+    class="gl-z-index-3 gl-left-0 gl-bg-gray-50 gl-border-b-gray-200 gl-fixed gl-w-full gl-text-center"
+  >
     <span v-if="text">{{ text }}</span>
     <slot></slot>
-    <!-- TODO: Replace the 'x' below with a gl-icon component once gitlab-ui becomes available in the docs -->
-    <button class="btn btn-close pull-right" @click="toggleBanner(false)">x</button>
+    <gl-button
+      icon="close"
+      class="gl-shadow-none! gl-bg-transparent!"
+      @click="toggleBanner(false)"
+    />
   </div>
 </template>
-- 
cgit v1.2.3