From 314ebc37c76a538d105d55a3e6bfde14839c7d89 Mon Sep 17 00:00:00 2001
From: Evan Morikawa <evan@evanmorikawa.com>
Date: Fri, 18 Sep 2015 17:43:49 -0400
Subject: [PATCH] fix(quick-actions): change styles and only archie/trash

Summary: Fixes T2875

Test Plan: manual

Reviewers: bengotow, dillon

Reviewed By: dillon

Maniphest Tasks: T2875

Differential Revision: https://phab.nylas.com/D2041
---
 .../thread-list/lib/thread-list-quick-actions.cjsx |  7 +++----
 .../thread-list/stylesheets/thread-list.less       | 14 +++++++-------
 static/buttons.less                                |  2 +-
 static/variables/ui-variables.less                 |  3 +++
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/internal_packages/thread-list/lib/thread-list-quick-actions.cjsx b/internal_packages/thread-list/lib/thread-list-quick-actions.cjsx
index 444e067b4..4b100d01c 100644
--- a/internal_packages/thread-list/lib/thread-list-quick-actions.cjsx
+++ b/internal_packages/thread-list/lib/thread-list-quick-actions.cjsx
@@ -17,13 +17,12 @@ class ThreadListQuickActions extends React.Component
 
   render: =>
     actions = []
-    actions.push <div key="reply" className="action action-reply" onClick={@_onReply}></div>
-    actions.push <div key="fwd" className="action action-forward" onClick={@_onForward}></div>
     if @_shouldDisplayArchiveButton()
-      actions.push <div key="archive" className="action action-archive" onClick={@_onArchive}></div>
+      actions.push <div key="archive" className="btn action action-archive" onClick={@_onArchive}></div>
     else if AccountStore.current().usesLabels() and @props.categoryId == CategoryStore.getStandardCategory('all').id
-      actions.push <div key="trash" className="action action-trash" onClick={@_onTrash}></div>
+      actions.push <div key="trash" className="btn action action-trash" onClick={@_onTrash}></div>
 
+    return [] if actions.length is 0
     <div className="inner">
       {actions}
     </div>
diff --git a/internal_packages/thread-list/stylesheets/thread-list.less b/internal_packages/thread-list/stylesheets/thread-list.less
index f0af76e34..94ba6ecd6 100644
--- a/internal_packages/thread-list/stylesheets/thread-list.less
+++ b/internal_packages/thread-list/stylesheets/thread-list.less
@@ -219,24 +219,24 @@
     display:inline-block;
     background-size: 100%;
     zoom:0.5;
-    width:42px;
-    height:42px;
-    margin:16px;
+    width: 81px;
+    height: 57px;
+    margin: 9px 16px 0 16px;
   }
   .action:last-child {
     margin-right:40px;
   }
   .action.action-reply {
-    background: url(../static/images/thread-list-quick-actions/ic-quick-button-reply@2x.png) top left no-repeat;
+    background: url(../static/images/thread-list-quick-actions/ic-quick-button-reply@2x.png) top left no-repeat, @background-gradient;
   }
   .action.action-forward {
-    background: url(../static/images/thread-list-quick-actions/ic-quick-button-forward@2x.png) top left no-repeat;
+    background: url(../static/images/thread-list-quick-actions/ic-quick-button-forward@2x.png) top left no-repeat, @background-gradient;
   }
   .action.action-archive {
-    background: url(../static/images/thread-list-quick-actions/ic-quick-button-archive@2x.png) top left no-repeat;
+    background: url(../static/images/thread-list-quick-actions/ic-quick-button-archive@2x.png) center no-repeat, @background-gradient;
   }
   .action.action-trash {
-    background: url(../static/images/thread-list-quick-actions/ic-quick-button-trash@2x.png) top left no-repeat;
+    background: url(../static/images/thread-list-quick-actions/ic-quick-button-trash@2x.png) center no-repeat, @background-gradient;
   }
 }
 .thread-list .list-item:hover .list-column-HoverActions {
diff --git a/static/buttons.less b/static/buttons.less
index cefce27e8..5f3c2ea21 100644
--- a/static/buttons.less
+++ b/static/buttons.less
@@ -16,7 +16,7 @@ button, html input[type="button"] {
   display:inline-block;
   color:      @btn-default-text-color;
   img.content-mask { background-color:@btn-default-text-color; }
-  background: linear-gradient(to top, rgba(241,241,241,0.75) 0%, rgba(253,253,253,0.75) 100%);
+  background: @background-gradient;
 
   // Use 4 box shadows to create a 0.5px hairline around the button, and another
   // for the actual shadow. Pending https://code.google.com/p/chromium/issues/detail?id=236371
diff --git a/static/variables/ui-variables.less b/static/variables/ui-variables.less
index c3b065b32..a3dfcd879 100644
--- a/static/variables/ui-variables.less
+++ b/static/variables/ui-variables.less
@@ -452,6 +452,9 @@
 @background-color-error: @red;
 @background-color-pending: @light-gray;
 
+@background-gradient: linear-gradient(to top, rgba(241,241,241,0.75) 0%,
+rgba(253,253,253,0.75) 100%);
+
 @base-border-color: darken(@background-color, 15%);
 @border-color: darken(@background-color, 15%);
 @border-color-subtle: darken(@background-color, 8%);