Add badge link and adapt visual style to badges

app/assets/stylesheets/framework/header.scss

@@ -85,6 +85,21 @@
         padding: 2px 8px;
         margin: 5px 2px 5px -8px;
         border-radius: $border-radius-default;
+        &.js-canary-badge {
+          padding: 0;
+          font-size: 12px;
+          border-radius: 100px;
+          margin-top: 6px;
+          &:hover, &:active, &:focus {
+            background-color: #1aaa55;
+          }
+          span {
+            line-height: 15px;
+            &:hover {
+              text-decoration: none;
+            }
+          }
+        }
       }
 
       .project-item-select {

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

@@ -17,8 +17,9 @@
             - if logo_text.present?
               %span.logo-text.d-none.d-lg-block.prepend-left-8
                 = logo_text
-          %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 badge badge-pill green-badge align-self-center', target: :_blank do
+            %span.badge.color-label.has-tooltip
+              = _('Next')
 
         - if current_user
           = render "layouts/nav/dashboard"