From cd1ef7e11b131d4b28b3b754c8d6782012c4a3bd Mon Sep 17 00:00:00 2001
From: Ezerous <ezerous@gmail.com>
Date: Fri, 5 Feb 2021 21:35:37 +0200
Subject: [PATCH] Add post voting buttons

---
 .../components/PostList/PostListRow/index.jsx |  8 ++++++-
 .../PostList/PostListRow/styles.css           | 21 ++++++++++++++++++-
 .../src/views/Topic/TopicView/index.jsx       |  2 +-
 .../src/views/Topic/TopicView/styles.css      |  3 ++-
 yarn.lock                                     |  2 +-
 5 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/packages/concordia-app/src/components/PostList/PostListRow/index.jsx b/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
index c1f636b..37026fa 100644
--- a/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
+++ b/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
@@ -2,7 +2,8 @@ import React, {
   memo, useEffect, useMemo, useState, useCallback,
 } from 'react';
 import {
-  Dimmer, Feed, Placeholder, Ref,
+    Button,
+    Dimmer, Feed, Placeholder, Ref,
 } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -138,6 +139,11 @@ const PostListRow = (props) => {
                     ? postContent
                     : <Placeholder><Placeholder.Line length="long" /></Placeholder>}
               </Feed.Extra>
+              <div className="post-voting">
+                  <Button size="mini" compact negative icon="arrow down"/>
+                  <span>&nbsp;&nbsp;0&nbsp;&nbsp;</span>
+                  <Button size="mini" compact positive icon="arrow up"/>
+              </div>
           </Feed.Content>
       </Dimmer.Dimmable>
   ), [focusRef, loading, postAuthor, postAuthorAddress, postAuthorMeta, postContent, postId, postIndex, t, timeAgo,
diff --git a/packages/concordia-app/src/components/PostList/PostListRow/styles.css b/packages/concordia-app/src/components/PostList/PostListRow/styles.css
index f8facec..9303195 100644
--- a/packages/concordia-app/src/components/PostList/PostListRow/styles.css
+++ b/packages/concordia-app/src/components/PostList/PostListRow/styles.css
@@ -1,5 +1,5 @@
 .post-list-row {
-    padding: 1rem 0.1rem 1rem 0.6rem !important;
+    padding: 1.2rem 0.1rem 1.2rem 0.6rem !important;
 }
 
 .post-profile-picture {
@@ -14,6 +14,10 @@
     font-size: 1rem !important;
 }
 
+.post-content > div.extra {
+    padding-right: 1rem !important;
+}
+
 .post-content .placeholder {
     margin: 0.5rem 0 0;
     font-size: 2rem !important;
@@ -25,6 +29,21 @@
 
 .post-summary-meta-index {
     float: right;
+    width: 3rem;
+    text-align: right;
     font-size: 0.75rem !important;
     opacity: 0.4;
 }
+
+.post-voting {
+    float: left;
+    margin-top: 1.2rem;
+}
+
+.post-voting > button{
+    margin: 0 !important;
+}
+
+.post-voting > span{
+    vertical-align: middle;
+}
diff --git a/packages/concordia-app/src/views/Topic/TopicView/index.jsx b/packages/concordia-app/src/views/Topic/TopicView/index.jsx
index 221c796..5f61fa1 100644
--- a/packages/concordia-app/src/views/Topic/TopicView/index.jsx
+++ b/packages/concordia-app/src/views/Topic/TopicView/index.jsx
@@ -119,7 +119,7 @@ const TopicView = (props) => {
   };
 
   return (
-      <Container id="topic-container" textAlign="center">
+      <Container id="topic-container">
           <Segment>
               <Dimmer.Dimmable
                 blurring
diff --git a/packages/concordia-app/src/views/Topic/TopicView/styles.css b/packages/concordia-app/src/views/Topic/TopicView/styles.css
index 75b87b7..bea6ab3 100644
--- a/packages/concordia-app/src/views/Topic/TopicView/styles.css
+++ b/packages/concordia-app/src/views/Topic/TopicView/styles.css
@@ -3,7 +3,8 @@
 }
 
 #topic-header {
-    padding: 1rem 0;
+    padding: 1.2rem 0;
+    text-align: center;
 }
 
 #topic-grid {
diff --git a/yarn.lock b/yarn.lock
index 6d0e740..16eb194 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14516,7 +14516,7 @@ react-app-polyfill@^1.0.6:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
-react-avatar@^3.9.7:
+react-avatar@~3.9.7:
   version "3.9.7"
   resolved "https://registry.yarnpkg.com/react-avatar/-/react-avatar-3.9.7.tgz#c7eb50d7f827350475ec6041f38fc2dbd249b740"
   integrity sha512-UX1prYgo4gS1g2u16tZbx/Vy45M/BxyHHexIoRj6m9hI3ZR0FdHTDt66X5GpTtf6PRYE8KlvwHte1x5n8B0/XQ==