Add Pajamas complient "whats new" badge

Changelog: changed

app/assets/stylesheets/framework/header.scss

@@ -150,7 +150,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
       }
 
       li {
-        .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
+        .badge.badge-pill:not(.gl-badge) {
           box-shadow: none;
           font-weight: $gl-font-weight-bold;
         }
@@ -417,7 +417,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
 
 .title-container,
 .navbar-nav {
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
+  .badge.badge-pill:not(.gl-badge) {
     position: inherit;
     font-weight: $gl-font-weight-normal;
     margin-left: -6px;

app/assets/stylesheets/startup/startup-dark.scss

@@ -837,7 +837,7 @@ input {
   .container-fluid
   .navbar-nav
   li
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
+  .badge.badge-pill:not(.gl-badge) {
   box-shadow: none;
   font-weight: 600;
 }
@@ -920,10 +920,8 @@ input {
   line-height: 18px;
   margin: 4px 0 4px 2px;
 }
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge),
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
+.title-container .badge.badge-pill:not(.gl-badge),
+.navbar-nav .badge.badge-pill:not(.gl-badge) {
   position: inherit;
   font-weight: 400;
   margin-left: -6px;
@@ -934,22 +932,16 @@ input {
   border-radius: 7px;
   box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
 }
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge {
+.title-container .badge.badge-pill:not(.gl-badge).green-badge,
+.navbar-nav .badge.badge-pill:not(.gl-badge).green-badge {
   background-color: var(--green-400, #108548);
 }
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count {
+.title-container .badge.badge-pill:not(.gl-badge).merge-requests-count,
+.navbar-nav .badge.badge-pill:not(.gl-badge).merge-requests-count {
   background-color: var(--orange-400, #ab6100);
 }
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count {
+.title-container .badge.badge-pill:not(.gl-badge).todos-count,
+.navbar-nav .badge.badge-pill:not(.gl-badge).todos-count {
   background-color: var(--blue-400, #1f75cb);
 }
 .title-container .canary-badge .badge,

app/assets/stylesheets/startup/startup-general.scss

@@ -818,7 +818,7 @@ input {
   .container-fluid
   .navbar-nav
   li
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
+  .badge.badge-pill:not(.gl-badge) {
   box-shadow: none;
   font-weight: 600;
 }
@@ -901,10 +901,8 @@ input {
   line-height: 18px;
   margin: 4px 0 4px 2px;
 }
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge),
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
+.title-container .badge.badge-pill:not(.gl-badge),
+.navbar-nav .badge.badge-pill:not(.gl-badge) {
   position: inherit;
   font-weight: 400;
   margin-left: -6px;
@@ -915,22 +913,16 @@ input {
   border-radius: 7px;
   box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
 }
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge {
+.title-container .badge.badge-pill:not(.gl-badge).green-badge,
+.navbar-nav .badge.badge-pill:not(.gl-badge).green-badge {
   background-color: var(--green-400, #2da160);
 }
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count {
+.title-container .badge.badge-pill:not(.gl-badge).merge-requests-count,
+.navbar-nav .badge.badge-pill:not(.gl-badge).merge-requests-count {
   background-color: var(--orange-400, #c17d10);
 }
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count {
+.title-container .badge.badge-pill:not(.gl-badge).todos-count,
+.navbar-nav .badge.badge-pill:not(.gl-badge).todos-count {
   background-color: var(--blue-400, #428fdc);
 }
 .title-container .canary-badge .badge,

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

@@ -2,5 +2,4 @@
   %li
     %button.gl-justify-content-space-between.gl-align-items-center.js-whats-new-trigger{ type: 'button', class: 'gl-display-flex!' }
       = _("What's new")
-      %span.js-whats-new-notification-count.gl-badge.badge.sm.badge-dark.badge-pill
-        = whats_new_most_recent_release_items_count
+      = gl_badge_tag whats_new_most_recent_release_items_count, { size: :sm }, { class: 'js-whats-new-notification-count' }

ee/app/assets/stylesheets/startup/startup-dark.scss

@@ -837,7 +837,7 @@ input {
   .container-fluid
   .navbar-nav
   li
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
+  .badge.badge-pill:not(.gl-badge) {
   box-shadow: none;
   font-weight: 600;
 }
@@ -920,10 +920,8 @@ input {
   line-height: 18px;
   margin: 4px 0 4px 2px;
 }
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge),
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
+.title-container .badge.badge-pill:not(.gl-badge),
+.navbar-nav .badge.badge-pill:not(.gl-badge) {
   position: inherit;
   font-weight: 400;
   margin-left: -6px;
@@ -934,22 +932,16 @@ input {
   border-radius: 7px;
   box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
 }
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge {
+.title-container .badge.badge-pill:not(.gl-badge).green-badge,
+.navbar-nav .badge.badge-pill:not(.gl-badge).green-badge {
   background-color: var(--green-400, #108548);
 }
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count {
+.title-container .badge.badge-pill:not(.gl-badge).merge-requests-count,
+.navbar-nav .badge.badge-pill:not(.gl-badge).merge-requests-count {
   background-color: var(--orange-400, #ab6100);
 }
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count {
+.title-container .badge.badge-pill:not(.gl-badge).todos-count,
+.navbar-nav .badge.badge-pill:not(.gl-badge).todos-count {
   background-color: var(--blue-400, #1f75cb);
 }
 .title-container .canary-badge .badge,

ee/app/assets/stylesheets/startup/startup-general.scss

@@ -818,7 +818,7 @@ input {
   .container-fluid
   .navbar-nav
   li
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
+  .badge.badge-pill:not(.gl-badge) {
   box-shadow: none;
   font-weight: 600;
 }
@@ -901,10 +901,8 @@ input {
   line-height: 18px;
   margin: 4px 0 4px 2px;
 }
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge),
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
+.title-container .badge.badge-pill:not(.gl-badge),
+.navbar-nav .badge.badge-pill:not(.gl-badge) {
   position: inherit;
   font-weight: 400;
   margin-left: -6px;
@@ -915,22 +913,16 @@ input {
   border-radius: 7px;
   box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
 }
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge {
+.title-container .badge.badge-pill:not(.gl-badge).green-badge,
+.navbar-nav .badge.badge-pill:not(.gl-badge).green-badge {
   background-color: var(--green-400, #2da160);
 }
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count {
+.title-container .badge.badge-pill:not(.gl-badge).merge-requests-count,
+.navbar-nav .badge.badge-pill:not(.gl-badge).merge-requests-count {
   background-color: var(--orange-400, #c17d10);
 }
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count {
+.title-container .badge.badge-pill:not(.gl-badge).todos-count,
+.navbar-nav .badge.badge-pill:not(.gl-badge).todos-count {
   background-color: var(--blue-400, #428fdc);
 }
 .title-container .canary-badge .badge,