From 3152eabbb0e93487becf94fdfbf2846cd25155ac Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Tue, 25 Jul 2017 11:37:32 -0400
Subject: [PATCH] UX: Use flat button style for bulk selection

---
 .../javascripts/discourse/templates/flat-button.raw.hbs     | 3 +++
 .../discourse/templates/topic-list-header-column.raw.hbs    | 2 +-
 .../discourse/templates/topic-list-header.raw.hbs           | 2 +-
 app/assets/stylesheets/common/components/buttons.scss       | 3 +++
 app/assets/stylesheets/desktop/topic-list.scss              | 6 ++----
 5 files changed, 10 insertions(+), 6 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/templates/flat-button.raw.hbs

diff --git a/app/assets/javascripts/discourse/templates/flat-button.raw.hbs b/app/assets/javascripts/discourse/templates/flat-button.raw.hbs
new file mode 100644
index 00000000000..74384745a80
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/flat-button.raw.hbs
@@ -0,0 +1,3 @@
+<button class='btn-flat {{class}}' title='{{i18n "topics.bulk.toggle"}}'>
+  {{fa-icon icon}}
+</button>
diff --git a/app/assets/javascripts/discourse/templates/topic-list-header-column.raw.hbs b/app/assets/javascripts/discourse/templates/topic-list-header-column.raw.hbs
index 2c7ea0c9474..7d7b6b62bb3 100644
--- a/app/assets/javascripts/discourse/templates/topic-list-header-column.raw.hbs
+++ b/app/assets/javascripts/discourse/templates/topic-list-header-column.raw.hbs
@@ -1,7 +1,7 @@
 <th data-sort-order='{{order}}' class='{{view.className}}'>
   {{~#if canBulkSelect}}
     {{~#if showBulkToggle}}
-        <button class='btn bulk-select' title='{{i18n "topics.bulk.toggle"}}'><i class='fa fa-list'></i></button>
+      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
     {{/if ~}}
     {{~#if bulkSelectEnabled}}
       <span class='bulk-select-topics'>
diff --git a/app/assets/javascripts/discourse/templates/topic-list-header.raw.hbs b/app/assets/javascripts/discourse/templates/topic-list-header.raw.hbs
index 2faae1a5d61..9f4646b3ad3 100644
--- a/app/assets/javascripts/discourse/templates/topic-list-header.raw.hbs
+++ b/app/assets/javascripts/discourse/templates/topic-list-header.raw.hbs
@@ -1,7 +1,7 @@
 {{#if bulkSelectEnabled}}
   <th class='star'>
     {{#if canBulkSelect}}
-      <button class='btn bulk-select' title='{{i18n "topics.bulk.toggle"}}'><i class='fa fa-list'></i></button>
+      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
     {{/if}}
   </th>
 {{/if}}
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 4f4cf30549e..bce45c1263a 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -194,4 +194,7 @@
   background: transparent;
   border: 0;
   outline: 0;
+  i.fa {
+    opacity: 0.7;
+  }
 }
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index dae88ae24a7..edd58ce1e0c 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -61,10 +61,8 @@
   }
   button.bulk-select {
     padding: 0;
-    background: transparent;
-    &:hover {
-      color: $primary-low; 
-    }
+    font-size: 1.05em;
+    margin-right: 0.3em;
   }
 
   .star {