Comment border tweak (#1820)

* Tweak border depth

* Tweak top level margins

src/shared/components/comment/comment-node.tsx

@@ -114,7 +114,7 @@ interface CommentNodeProps {
   moderators?: CommunityModeratorView[];
   admins?: PersonView[];
   noBorder?: boolean;
-  noIndent?: boolean;
+  isTopLevel?: boolean;
   viewOnly?: boolean;
   locked?: boolean;
   markable?: boolean;
@@ -292,11 +292,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             mark: this.isCommentNew || this.commentView.comment.distinguished,
           })}
         >
-          <div
+          <div className="ms-2">
-            className={classNames({
-              "ms-2": !this.props.noIndent,
-            })}
-          >
             <div className="d-flex flex-wrap align-items-center text-muted small">
               <button
                 className="btn btn-sm btn-link text-muted me-2"
@@ -1136,7 +1132,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             allLanguages={this.props.allLanguages}
             siteLanguages={this.props.siteLanguages}
             hideImages={this.props.hideImages}
-            isChild={!this.props.noIndent}
+            isChild={!this.props.isTopLevel}
             depth={this.props.node.depth + 1}
             finished={this.props.finished}
             onCommentReplyRead={this.props.onCommentReplyRead}

src/shared/components/comment/comment-nodes.tsx

@@ -35,7 +35,7 @@ interface CommentNodesProps {
   admins?: PersonView[];
   maxCommentsShown?: number;
   noBorder?: boolean;
-  noIndent?: boolean;
+  isTopLevel?: boolean;
   viewOnly?: boolean;
   locked?: boolean;
   markable?: boolean;
@@ -86,7 +86,7 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
       this.props.nodes.length > 0 && (
         <ul
           className={classNames("comments", {
-            "ms-1": !!this.props.isChild,
+            "ms-1": this.props.depth && this.props.depth > 1,
             "border-top border-light": !this.props.noBorder,
           })}
           style={
@@ -100,7 +100,7 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
               key={node.comment_view.comment.id}
               node={node}
               noBorder={this.props.noBorder}
-              noIndent={this.props.noIndent}
+              isTopLevel={this.props.isTopLevel}
               viewOnly={this.props.viewOnly}
               locked={this.props.locked}
               moderators={this.props.moderators}

src/shared/components/community/community.tsx

@@ -448,7 +448,7 @@ export class Community extends Component<
               nodes={commentsToFlatNodes(this.state.commentsRes.data.comments)}
               viewType={CommentViewType.Flat}
               finished={this.state.finished}
-              noIndent
+              isTopLevel
               showContext
               enableDownvotes={enableDownvotes(site_res)}
               moderators={communityRes.moderators}

src/shared/components/home/home.tsx

@@ -718,7 +718,7 @@ export class Home extends Component<any, HomeState> {
               nodes={commentsToFlatNodes(comments)}
               viewType={CommentViewType.Flat}
               finished={this.state.finished}
-              noIndent
+              isTopLevel
               showCommunity
               showContext
               enableDownvotes={enableDownvotes(siteRes)}

src/shared/components/person/person-details.tsx

@@ -252,7 +252,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
           viewType={CommentViewType.Flat}
           admins={this.props.admins}
           finished={this.props.finished}
-          noIndent
+          isTopLevel
           showCommunity
           showContext
           enableDownvotes={this.props.enableDownvotes}

src/shared/components/post/post.tsx

@@ -542,7 +542,7 @@ export class Post extends Component<any, PostState> {
             nodes={commentsToFlatNodes(commentsRes.data.comments)}
             viewType={this.state.commentViewType}
             maxCommentsShown={this.state.maxCommentsShown}
-            noIndent
+            isTopLevel
             locked={postRes.data.post_view.post.locked}
             moderators={postRes.data.moderators}
             admins={this.state.siteRes.admins}

src/shared/components/search.tsx

@@ -721,7 +721,7 @@ export class Search extends Component<any, SearchState> {
                   viewType={CommentViewType.Flat}
                   viewOnly
                   locked
-                  noIndent
+                  isTopLevel
                   enableDownvotes={enableDownvotes(this.state.siteRes)}
                   allLanguages={this.state.siteRes.all_languages}
                   siteLanguages={this.state.siteRes.discussion_languages}
@@ -782,7 +782,7 @@ export class Search extends Component<any, SearchState> {
         viewType={CommentViewType.Flat}
         viewOnly
         locked
-        noIndent
+        isTopLevel
         enableDownvotes={enableDownvotes(siteRes)}
         allLanguages={siteRes.all_languages}
         siteLanguages={siteRes.discussion_languages}