Adding left border color, removing indent.

ui/src/components/comment-node.tsx

@@ -27,6 +27,7 @@ import {
   pictshareAvatarThumbnail,
   showAvatars,
   setupTippy,
+  randomHsl,
 } from '../utils';
 import moment from 'moment';
 import { MomentTime } from './moment-time';
@@ -54,6 +55,7 @@ interface CommentNodeState {
   score: number;
   upvotes: number;
   downvotes: number;
+  borderColor: string;
 }
 
 interface CommentNodeProps {
@@ -92,6 +94,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     score: this.props.node.comment.score,
     upvotes: this.props.node.comment.upvotes,
     downvotes: this.props.node.comment.downvotes,
+    borderColor: randomHsl(),
   };
 
   constructor(props: any, context: any) {
@@ -116,7 +119,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     return (
       <div
         className={`comment ${
-          node.comment.parent_id && !this.props.noIndent ? 'ml-4' : ''
+          node.comment.parent_id && !this.props.noIndent ? 'ml-2' : ''
         }`}
       >
         <div
@@ -124,7 +127,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
           className={`details comment-node mb-1 ${
             this.isCommentNew ? 'mark' : ''
           }`}
+          style={
+            !this.props.noIndent &&
+            `border-left: 1px solid; border-color: ${this.state.borderColor} !important`
+          }
         >
+          <div class={`${!this.props.noIndent && 'ml-2'}`}>
             <ul class="list-inline mb-1 text-muted small">
               <li className="list-inline-item">
                 <Link
@@ -135,7 +143,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                     <img
                       height="32"
                       width="32"
-                    src={pictshareAvatarThumbnail(node.comment.creator_avatar)}
+                      src={pictshareAvatarThumbnail(
+                        node.comment.creator_avatar
+                      )}
                       class="rounded-circle mr-1"
                     />
                   )}
@@ -236,7 +246,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 ) : (
                   <div
                     className="md-div"
-                  dangerouslySetInnerHTML={mdToHtml(this.commentUnlessRemoved)}
+                    dangerouslySetInnerHTML={mdToHtml(
+                      this.commentUnlessRemoved
+                    )}
                   />
                 )}
                 <ul class="list-inline mb-0 text-muted font-weight-bold h5">
@@ -283,7 +295,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                                 ? 'text-danger'
                                 : 'text-muted'
                             }`}
-                          onClick={linkEvent(node, this.handleCommentDownvote)}
+                            onClick={linkEvent(
+                              node,
+                              this.handleCommentDownvote
+                            )}
                             data-tippy-content={i18n.t('downvote')}
                           >
                             <svg class="icon">
@@ -382,7 +397,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                               <li className="list-inline-item-action">
                                 <span
                                   class="pointer"
-                                onClick={linkEvent(this, this.handleEditClick)}
+                                  onClick={linkEvent(
+                                    this,
+                                    this.handleEditClick
+                                  )}
                                   data-tippy-content={i18n.t('edit')}
                                 >
                                   <svg class="icon icon-inline">
@@ -673,6 +691,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               </div>
             )}
           </div>
+        </div>
         {this.state.showRemoveDialog && (
           <form
             class="form-inline"

ui/src/utils.ts

@@ -767,3 +767,7 @@ export function postSort(
     );
   }
 }
+
+export function randomHsl() {
+  return `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
+}