Add post voting buttons

packages/concordia-app/src/components/PostList/PostListRow/index.jsx

@@ -2,6 +2,7 @@ import React, {
   memo, useEffect, useMemo, useState, useCallback,
 } from 'react';
 import {
+    Button,
     Dimmer, Feed, Placeholder, Ref,
 } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
@@ -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,

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;
+}

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

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 {

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==