Add style to like button

app/javascript/components/Board/PostListItem.tsx

@@ -32,7 +32,7 @@ const PostListItem = ({
   isLoggedIn,
   authenticityToken,
 }: Props) => (
-  <React.Fragment>
+  <div onClick={() => window.location.href = `/posts/${id}`} className="postListItem">
     <LikeButton
       postId={id}
       likesCount={likesCount}
@@ -40,8 +40,8 @@ const PostListItem = ({
       isLoggedIn={isLoggedIn}
       authenticityToken={authenticityToken}
     />
-    <a href={`/posts/${id}`} className="postLink">
+
-      <div className="postListItem">
+    <div className="postContainer">
       <span className="postTitle">{title}</span>
       <DescriptionText limit={120}>{description}</DescriptionText>
 
@@ -50,8 +50,7 @@ const PostListItem = ({
         { postStatus ? <PostStatusLabel {...postStatus} /> : null }
       </div>
     </div>
-    </a>
+  </div>
-  </React.Fragment>
 );
 
 export default PostListItem;

app/javascript/components/LikeButton/LikeButtonP.tsx

@@ -22,14 +22,15 @@ const LikeButtonP = ({
   isLoggedIn,
 }: Props) => (
   <div className="likeButtonContainer">
-    <button onClick={() =>
+    <div onClick={(e) => {
-      isLoggedIn ?
+      e.stopPropagation();
-        handleLikeSubmit(postId, !liked, authenticityToken)
+      
-        :
+      if (isLoggedIn) handleLikeSubmit(postId, !liked, authenticityToken);
-        window.location.href = `/users/sign_in`
+      else window.location.href = `/users/sign_in`;
-    }>
+      }}
-      { liked ? 'down' : 'up' }
+      className={`likeButton${liked ? ' liked' : ''}`}
-    </button>
+    >
+    </div>
     <span className="likesCountLabel">{likesCount}</span>
   </div>
 );

app/javascript/stylesheets/components/Board.scss

@@ -73,24 +73,26 @@
       .flex-grow-1;
   }
 
-  .postLink {
-    @extend .my-3;
-    
-    display: block;
-    color: $astuto-black;
-
-    &:hover { text-decoration: none; }
-  }
-
   .postListItem {
     @extend
       .card3D,
       .d-flex,
-      .flex-column,
+      .flex-row,
-      .justify-content-between,
+      .justify-content-start,
+      .my-3,
       .p-3;
 
     height: 140px;
+    color: $astuto-black;
+
+    &:hover { cursor: pointer; }
+
+    .postContainer {
+      @extend
+        .d-flex,
+        .flex-column,
+        .justify-content-between;
+    }
   }
 
   .postTitle {

app/javascript/stylesheets/components/LikeButton.scss

@@ -0,0 +1,31 @@
+.likeButtonContainer {
+  @extend
+    .d-flex,
+    .flex-column,
+    .mr-3,
+    .mt-2;
+
+  $like_button_size: 11px;
+
+  .likeButton {
+    @extend .mb-2;
+
+    border-left: $like_button_size solid transparent;
+    border-right: $like_button_size solid transparent;
+    border-bottom: $like_button_size solid rgba(35,35,35,.2);
+
+    &:hover {
+      border-bottom-color: $astuto-black;
+      cursor: pointer;
+    }
+  }
+
+  .likeButton.liked {
+    border-bottom-color: $astuto-black;
+  }
+
+  .likesCountLabel {
+    text-align: center;
+    font-size: 17px;
+  }
+}

app/javascript/stylesheets/main.scss

@@ -11,5 +11,6 @@
 /* Components */
 @import 'components/Board';
 @import 'components/Comments';
+@import 'components/LikeButton';
 @import 'components/Post';
 @import 'components/Roadmap';

spec/system/board_spec.rb

@@ -15,7 +15,7 @@ feature 'board', type: :system, js: true do
   let(:user) { FactoryBot.create(:user) }
 
   let(:board_container) { '.boardContainer' }
-  let(:post_link) { '.postLink' }
+  let(:post_list_item) { '.postListItem' }
   let(:sidebar) { '.sidebar' }
   let(:new_post_form) { '.newPostForm' }
   let(:reset_filter) { '.resetFilter' }
@@ -43,7 +43,7 @@ feature 'board', type: :system, js: true do
     visit board_path(board)
 
     within board_container do
-      expect(page).to have_selector(post_link, count: 3)
+      expect(page).to have_selector(post_list_item, count: 3)
       expect(page).to have_content(/#{post1.title}/i)
       expect(page).to have_content(/#{post1.description}/i)
       expect(page).to have_no_content(/#{post4.title}/i)
@@ -169,9 +169,9 @@ feature 'board', type: :system, js: true do
     # puts "tot: #{n_of_posts_in_board}, perpage: #{n_of_posts_per_page}, page: #{page_number}"
     within board_container do
       if n_of_posts_in_board < n_of_posts_per_page * page_number
-        expect(page).to have_selector(post_link, count: n_of_posts_in_board)
+        expect(page).to have_selector(post_list_item, count: n_of_posts_in_board)
       else
-        expect(page).to have_selector(post_link, count: n_of_posts_per_page * page_number)
+        expect(page).to have_selector(post_list_item, count: n_of_posts_per_page * page_number)
       end
     end
   end
@@ -182,7 +182,7 @@ feature 'board', type: :system, js: true do
 
     visit board_path(board)
     
-    n_of_posts_per_page = page.all(:css, post_link).size
+    n_of_posts_per_page = page.all(:css, post_list_item).size
     page_number = 1
 
     assert_number_of_posts_shown(n_of_posts_in_board, n_of_posts_per_page, page_number)