Redesign cluster index

app/assets/stylesheets/pages/clusters.scss

@@ -86,6 +86,31 @@
   .top-area .nav-controls > .btn.btn-add-cluster {
     margin-right: 0;
   }
+
+  .clusters-table {
+    background-color: $gray-light;
+    padding: $gl-padding-8;
+  }
+
+  .badge-light {
+    background-color: $white-normal;
+  }
+
+  .gl-responsive-table-row {
+    padding: $gl-padding;
+    border: 0;
+
+    &.table-row-header {
+      background-color: none;
+      border: 0;
+      font-weight: bold;
+      color: $gl-gray-500;
+    }
+  }
+}
+
+.cluster-warning {
+  @include alert-variant(theme-color-level('warning', $alert-bg-level), theme-color-level('warning', $alert-border-level), theme-color-level('warning', $alert-color-level));
 }
 
 .gcp-signup-offer {

app/views/clusters/clusters/_cluster.html.haml

-.gl-responsive-table-row
-  .table-section.section-60
-    .table-mobile-header{ role: "rowheader" }= s_("ClusterIntegration|Kubernetes cluster")
-    .table-mobile-content
-      = link_to cluster.name, cluster.show_path
-  .table-section.section-25
-    .table-mobile-header{ role: "rowheader" }= s_("ClusterIntegration|Environment scope")
-    .table-mobile-content= cluster.environment_scope
-  .table-section.section-15.text-right
-    .table-mobile-header{ role: "rowheader" }
-    .table-mobile-content
-      %span.badge.badge-light
-        = cluster.project_type? ? s_("ClusterIntegration|Project cluster") : s_("ClusterIntegration|Group cluster") 
+.card
+  .card-body.gl-responsive-table-row
+    .table-section.section-60
+      .table-mobile-header{ role: "rowheader" }= s_("ClusterIntegration|Kubernetes cluster")
+      .table-mobile-content
+        = link_to cluster.name, cluster.show_path
+    .table-section.section-25
+      .table-mobile-header{ role: "rowheader" }= s_("ClusterIntegration|Environment scope")
+      .table-mobile-content= cluster.environment_scope
+    .table-section.section-15.text-right
+      .table-mobile-header{ role: "rowheader" }
+      .table-mobile-content
+        %span.badge.badge-light
+          = cluster.project_type? ? s_("ClusterIntegration|Project cluster") : s_("ClusterIntegration|Group cluster") 

app/views/clusters/clusters/index.html.haml

@@ -11,7 +11,7 @@
       .nav-text
         = s_("ClusterIntegration|Kubernetes clusters can be used to deploy applications and to provide Review Apps for this project")
       = render 'clusters/clusters/buttons'
-    .ci-table.js-clusters-list
+    .clusters-table.js-clusters-list
       .gl-responsive-table-row.table-row-header{ role: "row" }
         .table-section.section-60{ role: "rowheader" }
           = s_("ClusterIntegration|Kubernetes cluster")