Changes based on UX review

app/assets/stylesheets/pages/settings.scss

@@ -73,11 +73,12 @@
   .loading-metrics,
   .empty-metrics {
     text-align: center;
-    padding: 20px 10px;
+    padding: 30px 10px;
     p,
     .btn {
       margin-top: 10px;
+      margin-bottom: 0;
     }
     p {
@@ -85,13 +86,17 @@
     }
   }
+  .loading-metrics .fa-spin {
+    color: $loading-color;
+  }
+
   .metrics-list {
     list-style-type: none;
     margin: 0;
     padding: 0;
     li {
-      padding: 15px 10px;
+      padding: 16px;
       .badge-count {
         background: $badge-bg;

app/views/projects/services/prometheus/_show.html.haml

@@ -31,7 +31,7 @@
       .panel-heading
         %h3.panel-title
           = icon('caret-right lg', class: 'panel-toggle js-panel-toggle', 'aria-label' => 'Toggle panel')
-          Missing environment variable(s)
+          Missing environment variable
           %span.badge-count.js-env-var-count 0
       .panel-body.hidden
         .flash-container
@@ -40,6 +40,6 @@
               To set up automatic monitoring, add the environment variable
               %code
                 $CI_ENVIRONMENT_SLUG
-              to exporter's queries.
+              to exporter’s queries.
               = link_to 'More information', '#'
         %ul.metrics-list.js-missing-var-metrics-list