From d31513d7b97dffd150f8248ef701e0b58317c7a0 Mon Sep 17 00:00:00 2001
From: Dessalines <happydooby@gmail.com>
Date: Wed, 24 Apr 2019 09:58:45 -0700
Subject: [PATCH] A New comment highlighter

---
 ui/src/components/comment-node.tsx | 9 ++++++++-
 ui/src/css/main.css                | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index 88d6476de..dfc753503 100644
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -3,6 +3,7 @@ import { Link } from 'inferno-router';
 import { CommentNode as CommentNodeI, CommentLikeForm, CommentForm as CommentFormI, SaveCommentForm, BanFromCommunityForm, BanUserForm, CommunityUser, UserView, AddModToCommunityForm, AddAdminForm } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { mdToHtml, getUnixTime, canMod, isMod } from '../utils';
+import * as moment from 'moment';
 import { MomentTime } from './moment-time';
 import { CommentForm } from './comment-form';
 import { CommentNodes } from './comment-nodes';
@@ -65,7 +66,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             <svg class="icon downvote"><use xlinkHref="#icon-arrow-down"></use></svg>
           </div>
         </div>
-        <div id={`comment-${node.comment.id}`} className="details ml-4">
+        <div id={`comment-${node.comment.id}`} className={`details ml-4 ${this.isCommentNew ? 'mark' : ''}`}>
           <ul class="list-inline mb-0 text-muted small">
             <li className="list-inline-item">
               <Link className="text-info" to={`/user/${node.comment.creator_id}`}>{node.comment.creator_name}</Link>
@@ -420,4 +421,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     WebSocketService.Instance.addAdmin(form);
     i.setState(i.state);
   }
+
+  get isCommentNew(): boolean {
+    let now = moment.utc().subtract(10, 'minutes');
+    let then = moment.utc(this.props.node.comment.published);
+    return now.isBefore(then);
+  }
 }
diff --git a/ui/src/css/main.css b/ui/src/css/main.css
index 61e068cdb..61acb014c 100644
--- a/ui/src/css/main.css
+++ b/ui/src/css/main.css
@@ -32,7 +32,7 @@
 }
 
 .mark {
-  background-color: #322a00;
+  background-color: #333;
 }
 
 .md-div p {