From 6c648ef0d89c250642efe65b039077d8fc3e47ee Mon Sep 17 00:00:00 2001
From: Andrew Merenbach <andrew_merenbach@intuit.com>
Date: Tue, 31 Jul 2018 16:18:59 -0700
Subject: [PATCH] Update colors for application cards

---
 .../applications-list/applications-list.scss   | 18 ++++++++++++++++++
 .../applications-list/applications-list.tsx    |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/app/applications/components/applications-list/applications-list.scss b/src/app/applications/components/applications-list/applications-list.scss
index eef0a03d6b170..845fca00a671c 100644
--- a/src/app/applications/components/applications-list/applications-list.scss
+++ b/src/app/applications/components/applications-list/applications-list.scss
@@ -23,10 +23,28 @@
         padding-left: 1em;
         border-left: 5px solid $argo-color-gray-4;
 
+        // healthy statuses
+
         &--comparison-Synced {
             border-left-color: $argo-success-color;
         }
 
+        &--health-Healthy {
+            border-left-color: $argo-success-color;
+        }
+
+        // intermediate statuses
+
+        &--health-Progressing {
+            border-left-color: $argo-running-color;
+        }
+
+        // failed statuses
+
+        &--health-Degraded {
+            border-left-color: $argo-failed-color;
+        }
+
         &--comparison-Error {
             border-left-color: $argo-failed-color;
         }
diff --git a/src/app/applications/components/applications-list/applications-list.tsx b/src/app/applications/components/applications-list/applications-list.tsx
index 59575c1d9c9ff..7b5aa6f0216ba 100644
--- a/src/app/applications/components/applications-list/applications-list.tsx
+++ b/src/app/applications/components/applications-list/applications-list.tsx
@@ -110,7 +110,7 @@ export class ApplicationsList extends React.Component<Props, State> {
                             {this.state.applications.map((app) => (
                                 <div key={app.metadata.name} className='column column-block'>
                                     <div className={`argo-table-list__row
-                                        applications-list__entry applications-list__entry--comparison-${app.status.comparisonResult.status}`
+                                        applications-list__entry applications-list__entry--comparison-${app.status.comparisonResult.status} applications-list__entry--health-${app.status.health.status}`
                                     }>
                                         <div className='row' onClick={() => this.appContext.router.history.push(`/applications/${app.metadata.name}`)}>
                                             <div className='columns small-12 applications-list__info'>