use class for section color

client/assets/scss/components/routes.scss

@@ -247,4 +247,16 @@ $labelOffsetEnd:   -30px;
     }
 }
 
+.card-header-routes {
+    &.received {
+        color: green;
+    }
+    &.filtered {
+        color: orange;
+    }
+    &.notexported {
+        color: red;
+    }
+}
+
 

client/components/routeservers/routes/view.jsx

@@ -22,20 +22,13 @@ import {ROUTES_RECEIVED,
 
 const RoutesHeader = (props) => {
   const type = props.type;
-  const color = {
-    [ROUTES_RECEIVED]: "green",
-    [ROUTES_FILTERED]: "orange",
-    [ROUTES_NOT_EXPORTED]: "red"
-  }[type];
   const rtype = {
     [ROUTES_RECEIVED]: "accepted",
     [ROUTES_FILTERED]: "filtered",
     [ROUTES_NOT_EXPORTED]: "not exported"
   }[type];
-  return (<p className="routes-header"
-             style={{"color": color, "textTransform": "uppercase"}}>
-            Routes {rtype}
-          </p>);
+  const cls = `card-header card-header-routes ${type.toLowerCase()}`;
+  return (<p className={cls}>Routes {rtype}</p>);
 };
 
 /*