Merge branch 'next-badge-link' into 'master'

Add link to next badge

Closes #61503

See merge request gitlab-org/gitlab-ce!28162

app/assets/stylesheets/framework/header.scss

@@ -472,6 +472,22 @@
       background-color: $blue-500;
     }
   }
+
+  .canary-badge {
+    .badge {
+      font-size: $gl-font-size-small;
+      line-height: $gl-line-height;
+      padding: 0 $grid-size;
+    }
+
+    &:hover {
+      text-decoration: none;
+
+      .badge {
+        text-decoration: none;
+      }
+    }
+  }
 }
 
 @include media-breakpoint-down(xs) {

app/views/layouts/header/_default.html.haml

@@ -18,8 +18,9 @@
               %span.logo-text.d-none.d-lg-block.prepend-left-8
                 = logo_text
           - if Gitlab.com?
-            %span.js-canary-badge.badge.badge-pill.green-badge.align-self-center
-              = _('Next')
+            = 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
           = render "layouts/nav/dashboard"