updates compliance policy icons indicating field state

wherehows-web/app/styles/components/_variables.scss

@@ -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);

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 {

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;

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"
+                <i class="fa fa-question dataset-compliance-fields__has-suggestions__icon" title="Compliance field has suggested values">
-                      aria-label="Compliance fields have suggested values"></span>
+                  {{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}}