From 4bdc926a011719d08cb8a6cd08f7099cd5d97a65 Mon Sep 17 00:00:00 2001
From: roadscape <roadscape@users.noreply.github.com>
Date: Thu, 16 May 2019 17:38:42 -0500
Subject: [PATCH] move featured label inline

---
 src/app/components/cards/PostSummary.jsx | 14 +++++++++++-
 src/app/components/cards/PostsList.jsx   | 12 ++--------
 src/app/components/cards/PostsList.scss  | 28 ++++++++++++++----------
 3 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/src/app/components/cards/PostSummary.jsx b/src/app/components/cards/PostSummary.jsx
index 23632e7cd9..e9a39aea29 100644
--- a/src/app/components/cards/PostSummary.jsx
+++ b/src/app/components/cards/PostSummary.jsx
@@ -26,6 +26,8 @@ class PostSummary extends React.Component {
         pending_payout: PropTypes.string.isRequired,
         total_payout: PropTypes.string.isRequired,
         content: PropTypes.object.isRequired,
+        featured: PropTypes.bool,
+        featuredOnClose: PropTypes.func,
         thumbSize: PropTypes.string,
         nsfwPref: PropTypes.string,
     };
@@ -55,7 +57,7 @@ class PostSummary extends React.Component {
 
     render() {
         const { thumbSize, ignore } = this.props;
-        const { post, content } = this.props;
+        const { post, content, featured, featuredOnClose } = this.props;
         const { account } = this.props;
         if (!content) return null;
 
@@ -136,6 +138,16 @@ class PostSummary extends React.Component {
                     {isNsfw && <span className="nsfw-flag">nsfw</span>}
                     {title_text}
                 </Link>
+                {featured && <span className="PinText">Featured</span>}
+                {featured && (
+                    <a
+                        onClick={featuredOnClose}
+                        className="PinDismiss"
+                        title="Dismiss Post"
+                    >
+                        <Icon name="close" />
+                    </a>
+                )}
             </h2>
         );
 
diff --git a/src/app/components/cards/PostsList.jsx b/src/app/components/cards/PostsList.jsx
index 03913837e4..99cc46934b 100644
--- a/src/app/components/cards/PostsList.jsx
+++ b/src/app/components/cards/PostsList.jsx
@@ -205,22 +205,14 @@ class PostsList extends React.Component {
                 };
                 return (
                     <li key={id}>
-                        <div className="PinLabel">
-                            <span className="PinText">Featured</span>
-                            <a
-                                onClick={close}
-                                className="DismissPost"
-                                title="Dismiss Post"
-                            >
-                                <Icon name="close" />
-                            </a>
-                        </div>
                         <PostSummary
                             account={account}
                             post={id}
                             thumbSize={thumbSize}
                             ignore={false}
                             nsfwPref={nsfwPref}
+                            featured
+                            featuredOnClose={close}
                         />
                     </li>
                 );
diff --git a/src/app/components/cards/PostsList.scss b/src/app/components/cards/PostsList.scss
index 2b6a30ca61..8651eb073c 100644
--- a/src/app/components/cards/PostsList.scss
+++ b/src/app/components/cards/PostsList.scss
@@ -113,23 +113,29 @@ body.with-post-overlay {
     }
 }
 
-.PostsList__summaries .PinLabel {
-    margin-bottom: 2px;
+.PostsList__summaries {
+    .articles__content {
+        position: relative;
+    }
 
     .PinText {
         @include themify($themes) {
-            position: relative;
-            top: 2px;
-            left: 1px;
-            font-size: 0.875rem;
-            color: themed('textColorSecondary');
+            text-transform: lowercase;
+            color: themed('colorAccent');
+            border: 1px solid themed('colorAccent');
+            font-size: 70%;
+            border-radius: 3px;
+            font-weight: normal;
+            font-family: Arial;
+            margin: 0 0 0 0.5rem;
+            padding: 0px 1px;
+            vertical-align: 15%;
         }
     }
 
-    A.DismissPost {
-        float: right;
-        margin-right: 0.5rem;
-        margin-top: 0.2rem;
+    A.PinDismiss {
+        position: absolute;
+        right: 0;
 
         svg {
             @include themify($themes) {