Fix blank states using old css

app/assets/javascripts/environments/components/environment.vue

@@ -227,8 +227,9 @@ export default {
         />
 
       <div
-        class="blank-state blank-state-no-icon"
+        class="blank-state-row"
         v-if="!isLoading && state.environments.length === 0">
+        <div class="blank-state-center">
           <h2 class="blank-state-title js-blank-state-title">
             You don't have any environments right now.
           </h2>
@@ -247,6 +248,7 @@ export default {
             New environment
           </a>
         </div>
+      </div>
 
       <div
         class="table-holder"

app/assets/javascripts/pipelines/components/pipelines.vue

@@ -267,10 +267,12 @@
         />
 
       <div
-        class="blank-state blank-state-no-icon"
+        class="blank-state-row"
         v-if="shouldRenderNoPipelinesMessage">
+        <div class="blank-state-center">
           <h2 class="blank-state-title js-blank-state-title">No pipelines to show.</h2>
         </div>
+      </div>
 
       <div
         class="table-holder"

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;

app/views/projects/environments/show.html.haml

@@ -19,7 +19,8 @@
 
   .environments-container
     - if @deployments.blank?
-      .blank-state.blank-state-no-icon
+      .blank-state-row
+        .blank-state-center
           %h2.blank-state-title
             You don't have any deployments right now.
           %p.blank-state-text

changelogs/unreleased/40377-blank-states.yml

+---
+title: Fix blank states using old css
+merge_request:
+author:
+type: fixed