Fix blank states using old css40377-blank-states

5 files changed, 46 insertions, 27 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;
diff --git a/app/views/projects/environments/show.html.haml b/app/views/projects/environments/show.html.haml
index d7859c9fbeb..add394a6356 100644
--- a/app/views/projects/environments/show.html.haml
+++ b/app/views/projects/environments/show.html.haml
@@ -19,14 +19,15 @@
 
   .environments-container
     - if @deployments.blank?
-      .blank-state.blank-state-no-icon
-        %h2.blank-state-title
-          You don't have any deployments right now.
-        %p.blank-state-text
-          Define environments in the deploy stage(s) in
-          %code .gitlab-ci.yml
-          to track deployments here.
-        = link_to "Read more", help_page_path("ci/environments"), class: "btn btn-success"
+      .blank-state-row
+        .blank-state-center
+          %h2.blank-state-title
+            You don't have any deployments right now.
+          %p.blank-state-text
+            Define environments in the deploy stage(s) in
+            %code .gitlab-ci.yml
+            to track deployments here.
+          = link_to "Read more", help_page_path("ci/environments"), class: "btn btn-success"
     - else
       .table-holder
         .ci-table.environments{ role: 'grid' }
diff --git a/changelogs/unreleased/40377-blank-states.yml b/changelogs/unreleased/40377-blank-states.yml
new file mode 100644
index 00000000000..7635602c68c
--- /dev/null
+++ b/changelogs/unreleased/40377-blank-states.yml
@@ -0,0 +1,5 @@
+---
+title: Fix blank states using old css
+merge_request:
+author:
+type: fixed