Post comments update

Author: bronsondunbar

data/db.json

@@ -108,6 +108,11 @@
       "body": "Comment 1",
       "postId": 1
     },
+    {
+      "id": 2,
+      "body": "Comment 2",
+      "postId": 1
+    },
     {
       "id": 3,
       "body": "Comment 3",

src/components/postDetails.js

@@ -60,10 +60,14 @@ export default function PostDetails() {
 
                 {post.comments.length > 0 &&
                   <Fragment>
-                    <h3>Comments</h3>
+                    <h2>Comments</h2>
 
                     {post.comments.map((comment, index) => {
-                      return <p>{comment.body}</p>
+                      return (
+                        <div key={index} className="post-comments">
+                          <p>{comment.body}</p>
+                        </div>
+                      )
                     })}
                   </Fragment>
                 }

src/components/postsList.js

@@ -42,7 +42,9 @@ export default function PostsList(props) {
 		            	Read More
 		            </Button>
 		            {post.comments.length > 0 &&
-		            	<p className="card-comments">({post.comments.length}) Comment(s)</p>
+		            	<div className="post-comments">
+		            		<p>({post.comments.length}) Comment(s)</p>
+		            	</div>
 		            }
 		          </div>
 		        </Card>

src/templates/Card.js

@@ -3,6 +3,7 @@ import styled from '@xstyled/styled-components'
 const Card = styled.div`
   background-color: secondaryColor !important;
 	border-radius: defaultRadius;
+  border: none !important;
   text-align: center;
   margin: 0 0 15px 0;
 
@@ -44,8 +45,19 @@ const Card = styled.div`
       color: primaryColor;
     }
 
-    .card-comments {
+    .post-comments {
       text-align: center;
+      padding: 15px;
+      border-bottom: 1px solid #dedede;
+
+      &:last-child {
+        border: none;
+        padding: 15px 15px 0 15px;
+      }
+
+      p {
+        text-align: center;
+      }
     }
   }
 `