Update pipelines empty state [ci skip]

2 files changed, 32 insertions, 19 deletions

diff --git a/app/assets/javascripts/pipelines/components/empty_state.vue b/app/assets/javascripts/pipelines/components/empty_state.vue
index 0eaac8dd64f..465e02cbafe 100644
--- a/app/assets/javascripts/pipelines/components/empty_state.vue
+++ b/app/assets/javascripts/pipelines/components/empty_state.vue
@@ -1,36 +1,42 @@
 <script>
-export default {
-  props: {
-    helpPagePath: {
-      type: String,
-      required: true,
+  export default {
+    props: {
+      helpPagePath: {
+        type: String,
+        required: true,
+      },
+      emptyStateSvgPath: {
+        type: String,
+        required: true,
+      },
     },
-    emptyStateSvgPath: {
-      type: String,
-      required: true,
-    },
-  },
-};
+  };
 </script>
-
 <template>
   <div class="row empty-state js-empty-state">
     <div class="col-xs-12">
-      <div class="svg-content">
-        <img :src="emptyStateSvgPath"/>
+      <div class="svg-content svg-250">
+        <img :src="emptyStateSvgPath" />
       </div>
     </div>
 
-    <div class="col-xs-12 text-center">
+    <div class="col-xs-12">
       <div class="text-content">
-        <h4>Build with confidence</h4>
+        <h4 class="text-center">
+          Build with confidence
+        </h4>
         <p>
           Continous Integration can help catch bugs by running your tests automatically,
           while Continuous Deployment can help you deliver code to your product environment.
         </p>
-        <a :href="helpPagePath" class="btn btn-info">
-          Get started with Pipelines
-        </a>
+        <div class="text-center">
+          <a
+            :href="helpPagePath"
+            class="btn btn-info"
+            >
+            Get started with Pipelines
+          </a>
+        </div>
       </div>
     </div>
   </div>
diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss
index 78a8e57ddbb..aa2d30a3cef 100644
--- a/app/assets/stylesheets/framework/images.scss
+++ b/app/assets/stylesheets/framework/images.scss
@@ -19,6 +19,13 @@
     max-width: 425px;
     width: 100%;
   }
+
+  &.svg-250 {
+    img,
+    svg {
+      width: 250px;
+    }
+  }
 }
 
 @mixin svg-size($size) {