Make comment lime green to match ACKED

chriscareycode · Apr 13, 2019 · e7a738f · e7a738f
1 parent 3c9f156
commit e7a738f
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 10 deletions.
diff --git 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
@@ -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;
 }
diff --git 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
@@ -102,7 +102,3 @@
 .color-purple {
   color: purple;
 }
-.color-comment {
-  color: #88c1ff;
-  color: #00d8ff; /* blueish */
-}