Refactor the archives banner to use versions.json and GitLab UI

3 files changed, 14 insertions, 15 deletions

diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index 5b82d005..62100d6e 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -6,8 +6,6 @@ version: 1
 $body-font-size: 16px;
 
 // Heights
-$page-header-height: 2.5rem;
-$banner-height: 1.938rem;
 $header-height: 3rem;
 
 // Width
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 02a28ec4..f3ea836f 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -241,7 +241,6 @@ ol {
   min-height: $header-height;
   background-color: $header-background-color;
   z-index: 3;
-  padding: 0.5rem 1rem;
 
   .navbar-brand {
     font-size: 1rem;
@@ -442,15 +441,6 @@ ol {
   display: none;
 }
 
-.banner {
-  z-index: 5;
-  line-height: 2;
-  top: $page-header-height;
-  height: $banner-height;
-  background: $gds-gray-50;
-  border-bottom: 1px solid $gds-gray-200;
-}
-
 .gl-icon {
   @each $size in $gl-icon-sizes {
     &.s#{$size} {
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>