✅ Add author flair

willwull · May 31, 2018 · bd43597 · bd43597
1 parent 1972d56
commit bd43597
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 17 deletions.
diff --git a/src/components/Post/Post.scss b/src/components/Post/Post.scss
@@ -36,7 +36,7 @@
 
       .star {
         color: var(--content-bg);
-        transform: scale(0.6);
+        // transform: scale(0.6);
       }
 
       .circle {
@@ -45,26 +45,33 @@
     }
   }
 
+  .flair {
+    display: inline-block;
+    transform: translateY(-1px);
+    font-size: 14px;
+    font-weight: normal;
+    padding: 3px 5px;
+    border-radius: 5px;
+    color: rgba(var(--text-color-rgb), 0.7);
+    background: var(--body-bg);
+
+    &.post {
+      margin-right: 7px;
+    }
+
+    &.author {
+      margin-left: 7px;
+    }
+  }
+
   .title {
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 15px;
-
-    .link-flair {
-      display: inline-block;
-      transform: translateY(-1px);
-      margin-right: 7px;
-      font-size: 14px;
-      font-weight: normal;
-      padding: 3px 5px;
-      border-radius: 5px;
-      color: rgba(var(--text-color-rgb), 0.7);
-      background: var(--body-bg);
-    }
   }
 
   .date {
-    opacity: 0.4;
+    color: rgba(var(--text-color-rgb), 0.4);
     margin-bottom: 7px;
   }
 

diff --git a/src/components/Post/index.js b/src/components/Post/index.js
@@ -53,8 +53,8 @@ function Post({ post }) {
           <div className="gold-icon">
             <span className="fa-layers fa-fw">
               <FaIcon className="circle" icon="circle" />
-              <FaIcon className="star" icon="star" />
-            </span>{" "}
+              <FaIcon className="star" icon="star" transform="shrink-6" />
+            </span>
             {post.gilded}
           </div>
         )}
@@ -64,7 +64,7 @@ function Post({ post }) {
       <div className="data">
         <div className="title">
           {post.link_flair_text && (
-            <span className="link-flair">{post.link_flair_text}</span>
+            <span className="flair post">{post.link_flair_text}</span>
           )}
           {post.title}
         </div>
@@ -75,6 +75,9 @@ function Post({ post }) {
 
         <div className="date">
           {moment.unix(post.created_utc).fromNow()} by {post.author.name}
+          {post.author_flair_text && (
+            <span className="flair author">{post.author_flair_text}</span>
+          )}
         </div>
 
         <div className="bottom-row">