From c65ece41214299d7a1dfcf18c2bd6e5f6ec9bf65 Mon Sep 17 00:00:00 2001
From: Seyi Adebajo <sadebajo@linkedin.com>
Date: Thu, 8 Mar 2018 11:12:49 -0800
Subject: [PATCH] updates compliance policy icons indicating field state

---
 .../app/styles/components/_variables.scss     |  4 ---
 .../dataset-compliance/_compliance-table.scss | 27 ++++++++++++++++---
 .../notifications/_notification-dot.scss      | 10 -------
 .../-dataset-compliance-entities.hbs          | 25 ++++++++++++++---
 4 files changed, 44 insertions(+), 22 deletions(-)
 delete mode 100644 wherehows-web/app/styles/components/_variables.scss

diff --git a/wherehows-web/app/styles/components/_variables.scss b/wherehows-web/app/styles/components/_variables.scss
deleted file mode 100644
index 624a32a851..0000000000
--- a/wherehows-web/app/styles/components/_variables.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-/// Contains variables applicable to application components
-
-/// Stores the color for the compliance suggestions indicator.
-$compliance-suggestion-hint: set-color(orange, orange5);
diff --git a/wherehows-web/app/styles/components/dataset-compliance/_compliance-table.scss b/wherehows-web/app/styles/components/dataset-compliance/_compliance-table.scss
index 9a5a369282..7cee05ad8c 100644
--- a/wherehows-web/app/styles/components/dataset-compliance/_compliance-table.scss
+++ b/wherehows-web/app/styles/components/dataset-compliance/_compliance-table.scss
@@ -1,9 +1,16 @@
-@import '../variables';
-
 .dataset-compliance-fields {
+  $compliance-suggestion-color: get-color(orange5);
+  $compliance-readonly-color: get-color(red7);
+  $compliance-review-required-color: get-color(blue5);
+  $compliance-ok-color: get-color(green5);
+
   &__has-suggestions {
-    color: $compliance-suggestion-hint;
+    color: $compliance-suggestion-color;
     margin-left: item-spacing(2);
+
+    &__icon {
+      color: $compliance-suggestion-color;
+    }
   }
 
   &__notification-column {
@@ -39,10 +46,22 @@
     }
 
     &__icon {
-      color: get-color(red7);
+      color: $compliance-readonly-color;
       opacity: 0.9;
     }
   }
+
+  &--review-required {
+    &__icon {
+      color: $compliance-review-required-color;
+    }
+  }
+
+  &--ok {
+    &__icon {
+      color: $compliance-ok-color;
+    }
+  }
 }
 
 .compliance-depends {
diff --git a/wherehows-web/app/styles/components/notifications/_notification-dot.scss b/wherehows-web/app/styles/components/notifications/_notification-dot.scss
index d888f1a73a..01ff61d9e7 100644
--- a/wherehows-web/app/styles/components/notifications/_notification-dot.scss
+++ b/wherehows-web/app/styles/components/notifications/_notification-dot.scss
@@ -1,5 +1,3 @@
-@import '../variables';
-
 /// Styles a dot that indicates that user attention is required
 .notification-dot {
   width: 0;
@@ -11,14 +9,6 @@
   border-color: set-color(red, maroonflush);
   border-radius: 50%;
 
-  &--has-prediction {
-    border-color: $compliance-suggestion-hint;
-  }
-
-  &--needs-review {
-    border-color: set-color(blue, blue5);
-  }
-
   /// Adapts the notification-dot for a tab header
   &--on-tab {
     position: absolute;
diff --git a/wherehows-web/app/templates/datasets/dataset-compliance/-dataset-compliance-entities.hbs b/wherehows-web/app/templates/datasets/dataset-compliance/-dataset-compliance-entities.hbs
index 40a995d703..e59d31fd33 100644
--- a/wherehows-web/app/templates/datasets/dataset-compliance/-dataset-compliance-entities.hbs
+++ b/wherehows-web/app/templates/datasets/dataset-compliance/-dataset-compliance-entities.hbs
@@ -92,14 +92,31 @@
             {{else}}
               {{#if (and row.suggestion (not row.suggestionResolution))}}
 
-                <span class="notification-dot notification-dot--has-prediction"
-                      aria-label="Compliance fields have suggested values"></span>
+                <i class="fa fa-question dataset-compliance-fields__has-suggestions__icon" title="Compliance field has suggested values">
+                  {{tooltip-on-element
+                    text="Has suggestions"
+                  }}
+                </i>
 
               {{else}}
 
                 {{#if row.isReviewRequested}}
-                  <span class="notification-dot notification-dot--needs-review"
-                        aria-label="Compliance policy for field does not exist"></span>
+
+                  <i class="fa fa-exclamation dataset-compliance-fields--review-required__icon" title="Compliance policy for field does not exist">
+                    {{tooltip-on-element
+                      text="New field"
+                    }}
+                  </i>
+
+                {{else}}
+
+                  <i class="fa fa-check dataset-compliance-fields--ok__icon" title="All good!">
+                    {{tooltip-on-element
+                      text="All good!"
+                    }}
+                  </i>
+
+
                 {{/if}}
 
               {{/if}}