From aaa436115884952006a88065311d757b392d3ef0 Mon Sep 17 00:00:00 2001
From: ernestwisniewski <ernestwisniewski2@gmail.com>
Date: Tue, 28 Jul 2020 02:05:29 +0200
Subject: [PATCH] User details ui fix (#1032)

* User details ui fix

* User details ui fix
---
 ui/src/components/comment-node.tsx  |  7 ++--
 ui/src/components/comment-nodes.tsx |  2 +
 ui/src/components/user-details.tsx  | 61 +++++++++++++++++------------
 3 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index 07afaea3b..51b051617 100644
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -64,6 +64,7 @@ interface CommentNodeState {
 
 interface CommentNodeProps {
   node: CommentNodeI;
+  noBorder?: boolean;
   noIndent?: boolean;
   viewOnly?: boolean;
   locked?: boolean;
@@ -136,9 +137,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
       >
         <div
           id={`comment-${node.comment.id}`}
-          className={`details comment-node border-top border-light py-2 ${
-            this.isCommentNew ? 'mark' : ''
-          }`}
+          className={`details comment-node py-2 ${
+            !this.props.noBorder ? 'border-top border-light' : ''
+          } ${this.isCommentNew ? 'mark' : ''}`}
           style={
             !this.props.noIndent &&
             this.props.node.comment.parent_id &&
diff --git a/ui/src/components/comment-nodes.tsx b/ui/src/components/comment-nodes.tsx
index bd5ec20bd..62693f766 100644
--- a/ui/src/components/comment-nodes.tsx
+++ b/ui/src/components/comment-nodes.tsx
@@ -16,6 +16,7 @@ interface CommentNodesProps {
   moderators?: Array<CommunityUser>;
   admins?: Array<UserView>;
   postCreatorId?: number;
+  noBorder?: boolean;
   noIndent?: boolean;
   viewOnly?: boolean;
   locked?: boolean;
@@ -42,6 +43,7 @@ export class CommentNodes extends Component<
           <CommentNode
             key={node.comment.id}
             node={node}
+            noBorder={this.props.noBorder}
             noIndent={this.props.noIndent}
             viewOnly={this.props.viewOnly}
             locked={this.props.locked}
diff --git a/ui/src/components/user-details.tsx b/ui/src/components/user-details.tsx
index c990ce189..913cb5e90 100644
--- a/ui/src/components/user-details.tsx
+++ b/ui/src/components/user-details.tsx
@@ -146,25 +146,30 @@ export class UserDetails extends Component<UserDetailsProps, UserDetailsState> {
     return (
       <div>
         {combined.map(i => (
-          <div>
-            {i.type === 'posts' ? (
-              <PostListing
-                post={i.data as Post}
-                admins={this.props.admins}
-                showCommunity
-                enableDownvotes={this.props.enableDownvotes}
-                enableNsfw={this.props.enableNsfw}
-              />
-            ) : (
-              <CommentNodes
-                nodes={[{ comment: i.data as Comment }]}
-                admins={this.props.admins}
-                noIndent
-                showContext
-                enableDownvotes={this.props.enableDownvotes}
-              />
-            )}
-          </div>
+          <>
+            <div>
+              {i.type === 'posts' ? (
+                <PostListing
+                  post={i.data as Post}
+                  admins={this.props.admins}
+                  showCommunity
+                  enableDownvotes={this.props.enableDownvotes}
+                  enableNsfw={this.props.enableNsfw}
+                />
+              ) : (
+                <CommentNodes
+                  nodes={[{ comment: i.data as Comment }]}
+                  admins={this.props.admins}
+                  noBorder
+                  noIndent
+                  showCommunity
+                  showContext
+                  enableDownvotes={this.props.enableDownvotes}
+                />
+              )}
+            </div>
+            <hr class="my-3" />
+          </>
         ))}
       </div>
     );
@@ -177,6 +182,7 @@ export class UserDetails extends Component<UserDetailsProps, UserDetailsState> {
           nodes={commentsToFlatNodes(this.state.comments)}
           admins={this.props.admins}
           noIndent
+          showCommunity
           showContext
           enableDownvotes={this.props.enableDownvotes}
         />
@@ -188,13 +194,16 @@ export class UserDetails extends Component<UserDetailsProps, UserDetailsState> {
     return (
       <div>
         {this.state.posts.map(post => (
-          <PostListing
-            post={post}
-            admins={this.props.admins}
-            showCommunity
-            enableDownvotes={this.props.enableDownvotes}
-            enableNsfw={this.props.enableNsfw}
-          />
+          <>
+            <PostListing
+              post={post}
+              admins={this.props.admins}
+              showCommunity
+              enableDownvotes={this.props.enableDownvotes}
+              enableNsfw={this.props.enableNsfw}
+            />
+            <hr class="my-3" />
+          </>
         ))}
       </div>
     );