Merge branch '40377-blank-states' into 'master'

Fix blank states using old css

Closes #40377

See merge request gitlab-org/gitlab-ce!15521

3 files changed, 32 insertions, 19 deletions

diff --git a/app/assets/javascripts/environments/components/environment.vue b/app/assets/javascripts/environments/components/environment.vue
index c039ae85cfb..ffb7757bed8 100644
--- a/app/assets/javascripts/environments/components/environment.vue
+++ b/app/assets/javascripts/environments/components/environment.vue
@@ -227,25 +227,27 @@ export default {
         />
 
       <div
-        class="blank-state blank-state-no-icon"
+        class="blank-state-row"
         v-if="!isLoading && state.environments.length === 0">
-        <h2 class="blank-state-title js-blank-state-title">
-          You don't have any environments right now.
-        </h2>
-        <p class="blank-state-text">
-          Environments are places where code gets deployed, such as staging or production.
-          <br />
-          <a :href="helpPagePath">
-            Read more about environments
+        <div class="blank-state-center">
+          <h2 class="blank-state-title js-blank-state-title">
+            You don't have any environments right now.
+          </h2>
+          <p class="blank-state-text">
+            Environments are places where code gets deployed, such as staging or production.
+            <br />
+            <a :href="helpPagePath">
+              Read more about environments
+            </a>
+          </p>
+
+          <a
+            v-if="canCreateEnvironmentParsed"
+            :href="newEnvironmentPath"
+            class="btn btn-create js-new-environment-button">
+            New environment
           </a>
-        </p>
-
-        <a
-          v-if="canCreateEnvironmentParsed"
-          :href="newEnvironmentPath"
-          class="btn btn-create js-new-environment-button">
-          New environment
-        </a>
+        </div>
       </div>
 
       <div
diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue
index cf241c8ffed..233be8a49c8 100644
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines.vue
@@ -267,9 +267,11 @@
         />
 
       <div
-        class="blank-state blank-state-no-icon"
+        class="blank-state-row"
         v-if="shouldRenderNoPipelinesMessage">
-        <h2 class="blank-state-title js-blank-state-title">No pipelines to show.</h2>
+        <div class="blank-state-center">
+          <h2 class="blank-state-title js-blank-state-title">No pipelines to show.</h2>
+        </div>
       </div>
 
       <div
diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
index 10f9e9b70b0..9982a5779af 100644
--- a/app/assets/stylesheets/framework/blank.scss
+++ b/app/assets/stylesheets/framework/blank.scss
@@ -56,6 +56,12 @@
   }
 }
 
+.blank-state-center {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  text-align: center;
+}
+
 .blank-state {
   padding: 20px;
   border: 1px solid $border-color;
@@ -66,7 +72,10 @@
     align-items: center;
     padding: 50px 30px;
   }
+}
 
+.blank-state,
+.blank-state-center {
   .blank-state-icon {
     svg {
       display: block;