PostList tweaks

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

@@ -130,6 +130,7 @@ const PostListRow = (props) => {
         blurring
         dimmed={loading}
         id={`post-${postId}`}
+        className="post-list-row"
       >
           <Ref innerRef={focusRef}>
               <Feed.Label className="post-profile-picture">
@@ -147,7 +148,7 @@ const PostListRow = (props) => {
                     ? (
                         <>
                             <Feed.User as={Link} to={`/users/${postAuthorAddress}`}>{postAuthor}</Feed.User>
-                            <Feed.Date className="post-summary-meta-date">
+                            <Feed.Date>
                                 <TimeAgo date={timeAgo} />
                             </Feed.Date>
                         </>

packages/concordia-app/src/components/PostList/PostListRow/styles.css

@@ -1,20 +1,38 @@
+.post-list-row {
+    padding: 1rem 0 !important;
+}
+
 .post-profile-picture {
     margin-top: 1rem;
+    margin-left: 0.75rem;
 }
 
 .post-profile-picture img {
     border-radius: 50%;
-    width: 2em !important;
+    width: 3rem !important;
-    height: 2em !important;
+    height: 3rem !important;
+    max-width: none !important;
     margin: 0 !important;
 }
 
 .post-content {
-    margin-left: 0.5rem !important;
+    margin-left: 1.3rem !important;
+}
+
+.post-content > div.summary {
+    font-size: 1rem !important;
+}
+.post-content .placeholder {
+    margin: 0.5rem 0 0;
+    font-size: 2rem !important;
+}
+
+.post-content .placeholder > .line{
+    height: auto;
 }
 
 .post-summary-meta-index {
     float: right;
-    font-size: 12px;
+    font-size: 0.75rem !important;
     opacity: 0.4;
 }

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

@@ -60,12 +60,10 @@ const PostList = (props) => {
   }, [focusOnPost, getPostCallHashes, loading, postIds]);
 
   return (
-
       <Dimmer.Dimmable as={Feed} blurring dimmed={loading} id="post-list" size="large">
           <Loader active={loading} />
           {posts}
       </Dimmer.Dimmable>
-
   );
 };
 

packages/concordia-app/src/views/Topic/TopicView/index.jsx

@@ -126,6 +126,7 @@ const TopicView = (props) => {
                 blurring
                 dimmed={topicAuthorAddress === null && topicAuthor === null && timestamp === null}
               >
+                  <div id="topic-header">
                       <Header as="h2">
                           {topicSubject || (
                               <Placeholder id="subject-placeholder">
@@ -147,6 +148,7 @@ const TopicView = (props) => {
                     &nbsp;
                           { numberOfReplies }
                       </div>
+                  </div>
                   <Divider />
               </Dimmer.Dimmable>
               <PostList postIds={postIds || []} loading={postIds === null} focusOnPost={focusOnPost} />

packages/concordia-app/src/views/Topic/TopicView/styles.css

@@ -2,6 +2,10 @@
     height: 100%;
 }
 
+#topic-header {
+    padding: 1rem 0;
+}
+
 #topic-grid {
     height: 100%;
 }