Remove btn-xs class create mixin

Give buttons in project repo buttons height of 24
Center and fix carat for custom notifs
Add changelog
Make changelog more specific
Add btn-xs mixin to btn-xs class

app/assets/stylesheets/framework/buttons.scss

@@ -143,6 +143,12 @@
   vertical-align: text-top;
 }
 
+@mixin btn-xs {
+  padding: 2px $gl-btn-padding;
+  font-size: $gl-btn-xs-font-size;
+  line-height: $gl-btn-xs-line-height;
+}
+
 .btn {
   @include btn-default;
   @include btn-white;
@@ -161,9 +167,7 @@
   }
 
   &.btn-xs {
-    padding: 2px $gl-btn-padding;
-    font-size: $gl-btn-xs-font-size;
-    line-height: $gl-btn-xs-line-height;
+    @include btn-xs;
   }
 
   &.btn-success,

app/assets/stylesheets/pages/projects.scss

@@ -237,6 +237,10 @@
 }
 
 .project-repo-buttons {
+  .notifications-btn {
+    @include btn-xs;
+  }
+
   .btn {
     &:last-child {
       margin-left: 0;
@@ -252,6 +256,7 @@
 
     .fa-caret-down {
       margin-left: 3px;
+      line-height: 0;
 
       &.dropdown-btn-icon {
         margin-left: 0;
@@ -269,7 +274,7 @@
   }
 
   .count-badge,
-  .btn-xs {
+  .btn {
     height: 24px;
   }
 

app/views/shared/notifications/_button.html.haml

@@ -17,14 +17,14 @@
       .js-notification-toggle-btns
         %div{ class: ("btn-group" if notification_setting.custom?) }
           - if notification_setting.custom?
-            %button.dropdown-new.btn.btn-default.btn-xs.has-tooltip.notifications-btn.text-left#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => aria_label, data: { container: "body", toggle: "modal", target: "#" + notifications_menu_identifier("modal", notification_setting), display: 'static' } }
+            %button.dropdown-new.btn.btn-default.has-tooltip.notifications-btn.text-left#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => aria_label, data: { container: "body", toggle: "modal", target: "#" + notifications_menu_identifier("modal", notification_setting), display: 'static' } }
               = icon("bell", class: "js-notification-loading")
               = notification_title(notification_setting.level)
-            %button.btn.dropdown-toggle{ data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
+            %button.btn.dropdown-toggle.d-flex{ data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
               = icon('caret-down')
               .sr-only Toggle dropdown
           - else
-            %button.dropdown-new.btn.btn-default.btn-xs.has-tooltip.notifications-btn#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => aria_label, data: { container: "body", toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
+            %button.dropdown-new.btn.btn-default.has-tooltip.notifications-btn#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => aria_label, data: { container: "body", toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
               .float-left
                 = icon("bell", class: "js-notification-loading")
                 = notification_title(notification_setting.level)

ee/changelogs/unreleased/31893-notification-buttons.yml

+---
+title: Fix notification button size in notification settings
+merge_request: 16672
+author:
+type: fixed