From f2e592c1abf5358162ecb3d6ab26b59512157dd7 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Tue, 25 Jul 2017 11:59:29 -0400
Subject: [PATCH] UX: Apply `btn-flat` class to flat buttons on posts

---
 .../discourse/widgets/button.js.es6           | 11 +++++++--
 .../discourse/widgets/post-menu.js.es6        |  2 +-
 .../stylesheets/desktop/topic-post.scss       | 24 ++++++++++++-------
 app/assets/stylesheets/mobile/topic-post.scss |  3 +++
 4 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/discourse/widgets/button.js.es6 b/app/assets/javascripts/discourse/widgets/button.js.es6
index f3893f1f696..0fd705e7974 100644
--- a/app/assets/javascripts/discourse/widgets/button.js.es6
+++ b/app/assets/javascripts/discourse/widgets/button.js.es6
@@ -1,7 +1,8 @@
 import { createWidget } from 'discourse/widgets/widget';
 import { iconNode } from 'discourse/helpers/fa-icon-node';
 
-export default createWidget('button', {
+
+const ButtonClass = {
   tagName: 'button.widget-button',
 
   buildClasses(attrs) {
@@ -59,4 +60,10 @@ export default createWidget('button', {
     }
     return this.sendWidgetAction(attrs.action);
   }
-});
+};
+
+export default createWidget('button', ButtonClass);
+
+createWidget('flat-button', jQuery.extend(ButtonClass, {
+  tagName: 'button.widget-button.btn-flat'
+}));
diff --git a/app/assets/javascripts/discourse/widgets/post-menu.js.es6 b/app/assets/javascripts/discourse/widgets/post-menu.js.es6
index 06c30eb7dcf..7f542a5d0cc 100644
--- a/app/assets/javascripts/discourse/widgets/post-menu.js.es6
+++ b/app/assets/javascripts/discourse/widgets/post-menu.js.es6
@@ -230,7 +230,7 @@ export default createWidget('post-menu', {
     if (builder) {
       const buttonAtts = builder(attrs, this.state, this.siteSettings);
       if (buttonAtts) {
-        return this.attach('button', buttonAtts);
+        return this.attach('flat-button', buttonAtts);
       }
     }
   },
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 6b2eae40b4a..fd0dea67181 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -53,17 +53,23 @@ section.post-menu-area {
 
 nav.post-controls {
 
-    .like-count {
-      font-size: inherit;
-      margin-right: -5px;
-    }
+  padding: 0;
 
-    padding: 0;
-    .highlight-action {
-      color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%));
-    }
-    a, button {
+  .like-count {
+    font-size: inherit;
+    margin-right: -5px;
+  }
+
+  .highlight-action {
+    color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%));
+  }
+
+  a, button {
     color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%));
+
+    i.fa {
+      opacity: 1.0;
+    }
     margin-right: 2px;
     display: inline-block;
   }
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index 4d539724433..b8227b21c1b 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -47,6 +47,9 @@ span.badge-posts {
 
 nav.post-controls {
   clear: both;
+  i.fa {
+    opacity: 1.0;
+  }
 }
 
 .who-liked {