move service emoji colors to css

priv/frontend/src/components/Service.css

@@ -30,3 +30,15 @@
 .service .description {
   margin-top: 1em;
 }
+
+.service.service-alive .emoji {
+  color: #2ECC40;
+}
+
+.service.service-slow .emoji {
+  color: #FF851B;
+}
+
+.service.service-dead .emoji {
+  color: #FF4136;
+}

priv/frontend/src/components/Service.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
@@ -11,13 +12,6 @@ const {
   slow_threshold: SLOW_THRESHOLD = 1500,
 } = config
 
-// from clrs.cc
-const colors = {
-  alive: '#2ECC40',
-  slow: '#FF851B',
-  dead: '#FF4136',
-}
-
 const icons = {
   alive: 'check-circle',
   slow: 'exclamation-circle',
@@ -43,13 +37,17 @@ export default function Service ({ graph, name, status, latency, description })
 
   const title = titles[state]
   const icon = icons[state]
-  const color = colors[state]
+
+  const className = classnames(
+    'service',
+    `service-${state}`
+  )
 
   return (
-    <div className="service">
+    <div className={className}>
       <header>
         <div className="emoji" title={title}>
-          <FontAwesomeIcon title={title} icon={icon} style={{ color }}/>
+          <FontAwesomeIcon title={title} icon={icon}/>
         </div>
         <h2 className="title">
           {name} {latency ? (