From e7a738f8d4941e07ff443dff21121c1be4123aad Mon Sep 17 00:00:00 2001
From: Chris Carey <chris.carey@gmail.com>
Date: Fri, 12 Apr 2019 17:41:08 -0700
Subject: [PATCH] Make comment lime green to match ACKED

---
 src/components/hosts/HostItem.jsx        |  6 +++---
 src/components/services/ServiceItem.css  | 17 +++++++++++++++++
 src/components/services/ServiceItem.jsx  |  6 +++---
 src/components/services/ServiceItems.css |  4 ----
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/hosts/HostItem.jsx b/src/components/hosts/HostItem.jsx
index 4bea71f..e6c9de8 100644
--- a/src/components/hosts/HostItem.jsx
+++ b/src/components/hosts/HostItem.jsx
@@ -98,9 +98,9 @@ class HostItem extends Component {
             {translate('Next check in', language)}: <span className="color-peach">{formatDateTime(e.next_check)}</span>
           </div>
 
-          {this.props.comment && <span style={{ textAlign: 'left', fontSize: '1em' }}>
-            Comment: <span className="color-comment">({this.props.comment_author}): {formatDateTimeAgo(this.props.comment_entry_time)} ago - {this.props.comment}</span>
-          </span>}
+          {this.props.comment && <div className="comment">
+            Comment: <span className="comment-color">({this.props.comment_author}): {formatDateTimeAgo(this.props.comment_entry_time)} {translate('ago', language)} - {this.props.comment}</span>
+          </div>}
         </div>
       </div>
     );
diff --git a/src/components/services/ServiceItem.css b/src/components/services/ServiceItem.css
index b56e3d1..789e99a 100644
--- a/src/components/services/ServiceItem.css
+++ b/src/components/services/ServiceItem.css
@@ -1,3 +1,20 @@
 .ServiceItem {
 	
+}
+.comment {
+	text-align: left;
+	font-size: 1em;
+	background-color: rgba(0, 0, 0, 0.6);
+	margin-bottom: -5px;
+	margin-left: -5px;
+	margin-right: -5px;
+	padding: 2px 4px;
+	border-bottom-right-radius: 5px;
+	border-bottom-left-radius: 5px;
+}
+
+.comment-color {
+  color: #88c1ff;
+  color: #00d8ff; /* blueish */
+  color: lime;
 }
\ No newline at end of file
diff --git a/src/components/services/ServiceItem.jsx b/src/components/services/ServiceItem.jsx
index 268dc44..2fb0a43 100644
--- a/src/components/services/ServiceItem.jsx
+++ b/src/components/services/ServiceItem.jsx
@@ -101,9 +101,9 @@ class ServiceItem extends Component {
         {translate('Next check in', language)}: <span className="color-peach">{formatDateTime(e.next_check)}</span>
       </div>
 
-      {this.props.comment && <span style={{ textAlign: 'left', fontSize: '1em' }}>
-        Comment: <span className="color-comment">({this.props.comment_author}): {formatDateTimeAgo(this.props.comment_entry_time)} ago - {this.props.comment}</span>
-      </span>}
+      {this.props.comment && <div className="comment">
+        Comment: <span className="comment-color">({this.props.comment_author}): {formatDateTimeAgo(this.props.comment_entry_time)} ago - {this.props.comment}</span>
+      </div>}
 
       </div>
     </div>
diff --git a/src/components/services/ServiceItems.css b/src/components/services/ServiceItems.css
index 81a3f7d..46097a3 100644
--- a/src/components/services/ServiceItems.css
+++ b/src/components/services/ServiceItems.css
@@ -102,7 +102,3 @@
 .color-purple {
   color: purple;
 }
-.color-comment {
-  color: #88c1ff;
-  color: #00d8ff; /* blueish */
-}
\ No newline at end of file