From 9569763e52d912f7b79ab95aca36d356fd5cf7de Mon Sep 17 00:00:00 2001
From: slice <ryaneft@gmail.com>
Date: Fri, 13 Jul 2018 18:49:45 -0700
Subject: [PATCH] de-bem service comp

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

diff --git a/priv/frontend/src/Service.css b/priv/frontend/src/Service.css
index 8c612ef..86992fb 100644
--- a/priv/frontend/src/Service.css
+++ b/priv/frontend/src/Service.css
@@ -1,22 +1,22 @@
-.service__header {
+.service header {
   display: flex;
   align-items: center;
 }
 
-.service__title__latency {
+.service header h2 {
+  margin: 0;
+}
+
+.service .latency {
   margin-left: 0.5em;
   color: hsl(0, 0%, 45%);
 }
 
-.service__header h2 {
-  margin: 0;
-}
-
-.service__header__emoji {
+.service .emoji {
   font-size: 2em;
   margin-right: 0.5em;
 }
 
-.service__description {
-  margin: 1em 0 0 0;
+.service .description {
+  margin-top: 1em;
 }
diff --git a/priv/frontend/src/Service.js b/priv/frontend/src/Service.js
index f0f4b90..b79b35f 100644
--- a/priv/frontend/src/Service.js
+++ b/priv/frontend/src/Service.js
@@ -5,19 +5,19 @@ import './Service.css';
 
 const Service = ({ graph, name, status, latency, description }) => (
   <div className="service">
-    <header className="service__header">
-      <div className="service__header__emoji">
+    <header>
+      <div className="emoji">
         {status ? '✅' : '🚫'}
       </div>
-      <h2 className="service__title">
+      <h2 className="title">
         {name} {latency ? (
-          <span className="service__title__latency">
+          <span className="latency">
             {latency}ms
           </span>
         ) : null}
       </h2>
     </header>
-    <p className="service__description">
+    <p className="description">
       {description}
     </p>
     {graph ? <Graph width={500} height={175} data={graph} /> : null}