From 596b01030ebe5d83815f1e8f3a67a70a50a9898d Mon Sep 17 00:00:00 2001
From: Marcel van Remmerden <mvanremmerden@gitlab.com>
Date: Tue, 7 May 2019 05:04:17 +0000
Subject: Refactor badge with link layout

---
 app/assets/stylesheets/framework/header.scss | 36 +++++++++++++---------------
 app/views/layouts/header/_default.html.haml  |  4 ++--
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 12b5251291b..c8b05e59ee1 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -85,26 +85,6 @@
         padding: 2px 8px;
         margin: 5px 2px 5px -8px;
         border-radius: $border-radius-default;
-
-        &.badge {
-          font-size: 12px;
-          border-radius: 100px;
-          margin-top: 6px;
-
-          &:hover,
-          &:active,
-          &:focus {
-            background-color: $green-500;
-          }
-
-          .color-label {
-            line-height: 15px;
-          }
-
-          .color-label:hover {
-              text-decoration: none;
-          }
-        }
       }
 
       .project-item-select {
@@ -492,6 +472,22 @@
       background-color: $blue-500;
     }
   }
+
+  .canary-badge {
+    .badge {
+      font-size: 12px;
+      line-height: 16px;
+      padding: 0 8px;
+    }
+
+    &:hover {
+      text-decoration: none;
+
+      .badge {
+        text-decoration: none;
+      }
+    } 
+  }
 }
 
 @include media-breakpoint-down(xs) {
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index a0c375c2379..563f6038c86 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -17,8 +17,8 @@
             - if logo_text.present?
               %span.logo-text.d-none.d-lg-block.prepend-left-8
                 = logo_text
-          = link_to 'https://next.gitlab.com', class: 'label-link js-canary-badge badge badge-pill green-badge align-self-center p-0', target: :_blank do
-            %span.color-label.has-tooltip
+          = link_to 'https://next.gitlab.com', class: 'label-link js-canary-badge canary-badge bg-transparent', target: :_blank do
+            %span.color-label.has-tooltip.badge.badge-pill.green-badge
               = _('Next')
 
         - if current_user
-- 
cgit v1.2.1