Distinguish handled and unhandled states with color

Give handled-state titles a muted color scheme so they are visually distinct
from unhandled states. This makes it easier to spot unhandled problems at a
glance when scanning the cube.

Author: jrauh01

public/css/module.less

@@ -17,24 +17,59 @@ div.cube {
       border-bottom: 1px solid @text-color;
     }
 
-    &.critical > .header {
-      color: @color-critical;
-      border-color: @color-critical;
+    &.critical {
+      > .header {
+        color: @color-critical;
+        border-color: @color-critical;
+      }
+
+      &.handled > .header {
+        color: @color-critical-handled;
+        border-color: @color-critical-handled;
+      }
+    }
+
+    &.warning {
+      > .header {
+        color: @color-warning;
+        border-color: @color-warning;
+      }
+
+      &.handled > .header {
+        color: @color-warning-handled;
+        border-color: @color-warning-handled;
+      }
     }
 
-    &.warning > .header {
-      color: @color-warning;
-      border-color: @color-warning;
+    &.unknown {
+      > .header {
+        color: @color-unknown;
+        border-color: @color-unknown;
+      }
+
+      &.handled > .header {
+        color: @color-unknown-handled;
+        border-color: @color-unknown-handled;
+      }
     }
 
-    &.unknown > .header {
-      color: @color-unknown;
-      border-color: @color-unknown;
+    &.unreachable {
+      > .header {
+        color: @color-unreachable;
+        border-color: @color-unreachable;
+      }
+
+      &.handled > .header {
+        color: @color-unreachable-handled;
+        border-color: @color-unreachable-handled;
+      }
     }
 
-    &.unreachable > .header {
-      color: @color-unreachable;
-      border-color: @color-unreachable;
+    &.ok {
+      > .header {
+          color: @color-ok;
+          border-color: @color-ok;
+      }
     }
   }