From 81147a373acd0efa321f61bacd51d4b98d00324f Mon Sep 17 00:00:00 2001
From: slice <ryaneft@gmail.com>
Date: Sun, 22 Jul 2018 11:52:54 -0700
Subject: [PATCH] move service emoji colors to css

---
 priv/frontend/src/components/Service.css | 12 ++++++++++++
 priv/frontend/src/components/Service.js  | 18 ++++++++----------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/priv/frontend/src/components/Service.css b/priv/frontend/src/components/Service.css
index a2c47ed..8e33eaf 100644
--- a/priv/frontend/src/components/Service.css
+++ b/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;
+}
diff --git a/priv/frontend/src/components/Service.js b/priv/frontend/src/components/Service.js
index 5349c63..ecc669a 100644
--- a/priv/frontend/src/components/Service.js
+++ b/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 ? (