Adapt code to style guidelines

app/assets/stylesheets/framework/header.scss

@@ -85,23 +85,23 @@
         padding: 2px 8px;
         margin: 5px 2px 5px -8px;
         border-radius: $border-radius-default;
-        
-        &.js-canary-badge {
-          padding: 0;
+
+        &.badge {
           font-size: 12px;
           border-radius: 100px;
           margin-top: 6px;
-          
+
           &:hover,
           &:active,
           &:focus {
             background-color: $green-500;
           }
-          
-          span {
+
+          .color-label {
             line-height: 15px;
           }
-          span:hover {
+
+          .color-label:hover {
               text-decoration: none;
           }
         }

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', target: :_blank do
-            %span.badge.color-label.has-tooltip
+          = 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
               = _('Next')
 
         - if current_user