Merge branch '30949-empty-states' into 'master'

Center all empty states

Closes #30949

See merge request !11249

app/assets/stylesheets/framework/blocks.scss

@@ -312,7 +312,7 @@
 }
 
 .empty-state {
-  margin: 100px 0 0;
+  margin: 5% auto 0;
 
   .text-content {
     max-width: 460px;
@@ -335,27 +335,12 @@
   }
 
   .btn {
-    margin: $btn-side-margin $btn-side-margin 0 0;
-  }
+    margin: $btn-side-margin 5px;
 
     @media(max-width: $screen-xs-max) {
-    margin-top: 50px;
-    text-align: center;
-
-    .btn {
       width: 100%;
     }
   }
-
-  @media(min-width: $screen-xs-max) {
-    &.merge-requests .text-content {
-      margin-top: 40px;
-    }
-
-    &.labels .text-content {
-      margin-top: 70px;
-    }
-  }
 }
 
 .flex-container-block {

app/assets/stylesheets/pages/pipelines.scss

@@ -8,10 +8,6 @@
     white-space: nowrap;
   }
 
-  .empty-state {
-    margin: 5% auto 0;
-  }
-
   .table-holder {
     width: 100%;
 

app/views/shared/empty_states/_issues.html.haml

@@ -3,10 +3,10 @@
 - has_button = button_path || project_select_button
 
 .row.empty-state
-  .pull-right.col-xs-12{ class: "#{'col-sm-6' if has_button}" }
+  .col-xs-12
     .svg-content
       = render 'shared/empty_states/icons/issues.svg'
-  .col-xs-12{ class: "#{'col-sm-6' if has_button}" }
+  .col-xs-12.text-center
     .text-content
       - if has_button && current_user
         %h4

app/views/shared/empty_states/_labels.html.haml

 .row.empty-state.labels
-  .pull-right.col-xs-12.col-sm-6
+  .col-xs-12
     .svg-content
       = render 'shared/empty_states/icons/labels.svg'
-  .col-xs-12.col-sm-6
+  .col-xs-12.text-center
     .text-content
       %h4 Labels can be applied to issues and merge requests to categorize them.
       %p You can also star a label to make it a priority label.

app/views/shared/empty_states/_merge_requests.html.haml

@@ -3,10 +3,10 @@
 - has_button = button_path || project_select_button
 
 .row.empty-state.merge-requests
-  .col-xs-12{ class: "#{'col-sm-6 pull-right' if has_button}" }
+  .col-xs-12
     .svg-content
       = render 'shared/empty_states/icons/merge_requests.svg'
-  .col-xs-12{ class: "#{'col-sm-6' if has_button}" }
+  .col-xs-12.text-center
     .text-content
       - if has_button
         %h4

changelogs/unreleased/30949-empty-states.yml

+---
+title: Center all empty states
+merge_request:
+author: