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,18 +40,17 @@ const PostListItem = ({
       isLoggedIn={isLoggedIn}
       authenticityToken={authenticityToken}
     />
-    <a href={`/posts/${id}`} className="postLink">
-      <div className="postListItem">
-        <span className="postTitle">{title}</span>
-        <DescriptionText limit={120}>{description}</DescriptionText>
 
-        <div className="postDetails">
-          <CommentsNumber number={commentsCount} />
-          { postStatus ? <PostStatusLabel {...postStatus} /> : null }
-        </div>
+    <div className="postContainer">
+      <span className="postTitle">{title}</span>
+      <DescriptionText limit={120}>{description}</DescriptionText>
+
+      <div className="postDetails">
+        <CommentsNumber number={commentsCount} />
+        { postStatus ? <PostStatusLabel {...postStatus} /> : null }
       </div>
-    </a>
-  </React.Fragment>
+    </div>
+  </div>
 );
 
 export default PostListItem;

app/javascript/components/LikeButton/LikeButtonP.tsx

@@ -22,14 +22,15 @@ const LikeButtonP = ({
   isLoggedIn,
 }: Props) => (
   <div className="likeButtonContainer">
-    <button onClick={() =>
-      isLoggedIn ?
-        handleLikeSubmit(postId, !liked, authenticityToken)
-        :
-        window.location.href = `/users/sign_in`
-    }>
-      { liked ? 'down' : 'up' }
-    </button>
+    <div onClick={(e) => {
+      e.stopPropagation();
+      
+      if (isLoggedIn) handleLikeSubmit(postId, !liked, authenticityToken);
+      else window.location.href = `/users/sign_in`;
+      }}
+      className={`likeButton${liked ? ' liked' : ''}`}
+    >
+    </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,
-      .justify-content-between,
+      .flex-row,
+      .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';