Merge branch 'UI-improvements-for-count-badges-and-permission-badges' into 'master'

app/assets/stylesheets/framework/variables.scss

@@ -293,7 +293,7 @@ $btn-white-active: #848484;
 /*
 * Badges
 */
-$badge-bg: #eee;
+$badge-bg: rgba(0, 0, 0, 0.07);
 $badge-color: $gl-text-color-secondary;
 
 /*

app/assets/stylesheets/pages/notes.scss

@@ -550,13 +550,13 @@ ul.notes {
   position: relative;
   top: -2px;
   display: inline-block;
-  padding-left: 4px;
-  padding-right: 4px;
+  padding-left: 7px;
+  padding-right: 7px;
   color: $notes-role-color;
   font-size: 12px;
   line-height: 20px;
   border: 1px solid $border-color;
-  border-radius: $border-radius-base;
+  border-radius: $label-border-radius;
 }
 
 

changelogs/unreleased/UI-improvements-for-count-badges-and-permission-badges.yml

+---
+title: Count badges depend on translucent color to better adjust to different background
+  colors and permission badges now feature a pill shaped design similar to labels
+merge_request:
+author: