Center all empty states

6 files changed, 13 insertions, 28 deletions

diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index ac1fc0eb8ae..3dec911d289 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/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;
-  }
-
-  @media(max-width: $screen-xs-max) {
-    margin-top: 50px;
-    text-align: center;
+    margin: $btn-side-margin 5px;
 
-    .btn {
+    @media(max-width: $screen-xs-max) {
       width: 100%;
     }
   }
-
-  @media(min-width: $screen-xs-max) {
-    &.merge-requests .text-content {
-      margin-top: 40px;
-    }
-
-    &.labels .text-content {
-      margin-top: 70px;
-    }
-  }
 }
 
 .flex-container-block {
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index e7553c7a4bf..685b9775fe1 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -8,10 +8,6 @@
     white-space: nowrap;
   }
 
-  .empty-state {
-    margin: 5% auto 0;
-  }
-
   .table-holder {
     width: 100%;
 
diff --git a/app/views/shared/empty_states/_issues.html.haml b/app/views/shared/empty_states/_issues.html.haml
index c229d18903f..12d99c3ab4b 100644
--- a/app/views/shared/empty_states/_issues.html.haml
+++ b/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
diff --git a/app/views/shared/empty_states/_labels.html.haml b/app/views/shared/empty_states/_labels.html.haml
index 00fb77bdb3b..5e2f4cf109d 100644
--- a/app/views/shared/empty_states/_labels.html.haml
+++ b/app/views/shared/empty_states/_labels.html.haml
@@ -1,8 +1,8 @@
 .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.
diff --git a/app/views/shared/empty_states/_merge_requests.html.haml b/app/views/shared/empty_states/_merge_requests.html.haml
index 7f2f99f3406..3e64f403b8b 100644
--- a/app/views/shared/empty_states/_merge_requests.html.haml
+++ b/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
diff --git a/changelogs/unreleased/30949-empty-states.yml b/changelogs/unreleased/30949-empty-states.yml
new file mode 100644
index 00000000000..bef87a954b7
--- /dev/null
+++ b/changelogs/unreleased/30949-empty-states.yml
@@ -0,0 +1,4 @@
+---
+title: Center all empty states
+merge_request:
+author: