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">
-          <Dimmer.Dimmable as={Feed} blurring dimmed={loading} id="post-list" size="large">
+          <Loader active={loading} />
-              <Loader active={loading} />
+          {posts}
-              {posts}
+      </Dimmer.Dimmable>
-          </Dimmer.Dimmable>
-
   );
 };
 

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

@@ -126,26 +126,28 @@ const TopicView = (props) => {
                 blurring
                 dimmed={topicAuthorAddress === null && topicAuthor === null && timestamp === null}
               >
-                  <Header as="h2">
+                  <div id="topic-header">
-                      {topicSubject || (
+                      <Header as="h2">
-                          <Placeholder id="subject-placeholder">
+                          {topicSubject || (
-                              <Placeholder.Line />
+                              <Placeholder id="subject-placeholder">
-                          </Placeholder>
+                                  <Placeholder.Line />
-                      )}
+                              </Placeholder>
-                  </Header>
+                          )}
-
+                      </Header>
-                  <div id="topic-metadata">
+
-                      <Icon name="calendar alternate" fitted />
+                      <div id="topic-metadata">
+                          <Icon name="calendar alternate" fitted />
                     &nbsp;
-                      <TimeAgo date={timestamp} />
+                          <TimeAgo date={timestamp} />
                     &nbsp;&nbsp;
-                      <Icon name="user" fitted />
+                          <Icon name="user" fitted />
                     &nbsp;
-                      <Link to={`/users/${topicAuthorAddress}`} onClick={stopClickPropagation}>{ topicAuthor }</Link>
+                          <Link to={`/users/${topicAuthorAddress}`} onClick={stopClickPropagation}>{ topicAuthor }</Link>
                     &nbsp;&nbsp;
-                      <Icon name="reply" fitted />
+                          <Icon name="reply" fitted />
                     &nbsp;
-                      { numberOfReplies }
+                          { numberOfReplies }
+                      </div>
                   </div>
                   <Divider />
               </Dimmer.Dimmable>

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

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