diff --git a/src/App.js b/src/App.js index b4a7aac..6278a9b 100644 --- a/src/App.js +++ b/src/App.js @@ -25,7 +25,6 @@ const App = () => { if(selectedPost) { setSelectedPost(posts.find(post => post.id === selectedPost.id)); } - console.log(posts); }, [posts]); useEffect(() => { diff --git a/src/App.scss b/src/App.scss index becc470..17ef2e0 100644 --- a/src/App.scss +++ b/src/App.scss @@ -55,7 +55,7 @@ h3 { align-items: flex-start; border: 1px solid #ddd; margin: 10px 0; - padding: 15px; + padding: 5px 5px 15px 15px; border-radius: 10px; background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); @@ -65,28 +65,46 @@ h3 { margin-right: 20px; } - .votes { + .post-right { display: flex; flex-direction: column; - align-items: center; + justify-content: space-evenly; - button { - padding: 10px; - margin-bottom: 5px; - background-color: transparent; - color: #ff9908; - border: none; - cursor: pointer; - font-size: 1.5em; - - &:hover { - color: #e68a00; - } + .post-date { + position: relative; + bottom: 0; + right: 0; } - span { - font-size: 1.2em; - margin-bottom: 5px; + .row { + display: flex; + flex-direction: row; + justify-content: flex-end; + + .votes { + display: flex; + flex-direction: column; + align-items: center; + + button { + padding: 10px; + margin-bottom: 5px; + background-color: transparent; + color: #ff9908; + border: none; + cursor: pointer; + font-size: 1.5em; + + &:hover { + color: #e68a00; + } + } + + span { + font-size: 1.2em; + margin-bottom: 5px; + } + } } } diff --git a/src/components/PostComment.js b/src/components/PostComment.js index c697e60..72429e6 100644 --- a/src/components/PostComment.js +++ b/src/components/PostComment.js @@ -13,20 +13,27 @@ const PostComment = ({ post, vote, type }) => {

{post.content}

-
- - {post.reactions.positive - post.reactions.negative} - +
+
+ {post.date.slice(8, 10) + "." + post.date.slice(5, 7) + "." + post.date.slice(0, 4)} +
+
+
+ + {post.reactions.positive - post.reactions.negative} + +
+
);