de-bem service comp

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;
 }

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}