From 465f5080c0c90249f155d8ff8978f061005713cc Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Wed, 28 Aug 2019 18:43:51 -0700
Subject: [PATCH] Adding some UI suggestions.

- Adding divider lines in between post listings.
- Increasing button sizes.
- Fixes #222
---
 ui/src/components/comment-node.tsx  | 4 ++--
 ui/src/components/post-listing.tsx  | 4 ++--
 ui/src/components/post-listings.tsx | 6 +++++-
 ui/src/css/main.css                 | 2 +-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index f518da904..785e31074 100644
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -62,11 +62,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     return (
       <div className={`comment ${node.comment.parent_id  && !this.props.noIndent ? 'ml-4' : ''}`}>
         <div className={`vote-bar mr-1 float-left small text-center ${this.props.viewOnly && 'no-click'}`}>
-          <button className={`btn btn-sm p-0 ${node.comment.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentLike)}>
+          <button className={`btn p-0 ${node.comment.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentLike)}>
             <svg class="icon upvote"><use xlinkHref="#icon-arrow-up"></use></svg>
           </button>
           <div class={`font-weight-bold text-muted`}>{node.comment.score}</div>
-          <button className={`btn btn-sm p-0 ${node.comment.my_vote == -1 ? 'text-danger' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentDisLike)}>
+          <button className={`btn p-0 ${node.comment.my_vote == -1 ? 'text-danger' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentDisLike)}>
             <svg class="icon downvote"><use xlinkHref="#icon-arrow-down"></use></svg>
           </button>
         </div>
diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index 0b9cc3e13..b513d0777 100644
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -60,11 +60,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     return (
       <div class="listing col-12">
         <div className={`vote-bar mr-1 float-left small text-center ${this.props.viewOnly && 'no-click'}`}>
-          <button className={`btn btn-sm p-0 ${post.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(this, this.handlePostLike)}>
+          <button className={`btn p-0 ${post.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(this, this.handlePostLike)}>
             <svg class="icon upvote"><use xlinkHref="#icon-arrow-up"></use></svg>
           </button>
           <div class={`font-weight-bold text-muted`}>{post.score}</div>
-          <button className={`btn btn-sm p-0 ${post.my_vote == -1 ? 'text-danger' : 'text-muted'}`} onClick={linkEvent(this, this.handlePostDisLike)}>
+          <button className={`btn p-0 ${post.my_vote == -1 ? 'text-danger' : 'text-muted'}`} onClick={linkEvent(this, this.handlePostDisLike)}>
             <svg class="icon downvote"><use xlinkHref="#icon-arrow-down"></use></svg>
           </button>
         </div>
diff --git a/ui/src/components/post-listings.tsx b/ui/src/components/post-listings.tsx
index f5682a7e9..5dd627391 100644
--- a/ui/src/components/post-listings.tsx
+++ b/ui/src/components/post-listings.tsx
@@ -19,7 +19,11 @@ export class PostListings extends Component<PostListingsProps, any> {
     return (
       <div>
         {this.props.posts.length > 0 ? this.props.posts.map(post => 
-          <PostListing post={post} showCommunity={this.props.showCommunity} />) : 
+          <>
+            <PostListing post={post} showCommunity={this.props.showCommunity} />
+            <hr class="my-2" />
+          </>
+            ) : 
           <>
             <div><T i18nKey="no_posts">#</T></div>
             {this.props.showCommunity !== undefined  && <div><T i18nKey="subscribe_to_communities">#<Link to="/communities">#</Link></T></div>}
diff --git a/ui/src/css/main.css b/ui/src/css/main.css
index cc8eb4813..536cbc647 100644
--- a/ui/src/css/main.css
+++ b/ui/src/css/main.css
@@ -63,7 +63,7 @@ body, .text-white, .navbar-brand, .badge-light, .btn-secondary {
   height: auto;
 }
 
-.listing, .comment-node {
+.comment-node {
   margin-bottom: 10px;
 }