Refactor badge with link layout

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) {

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