From 58aac5de0ec2cb6f46df1f12dea3506e07a8df87 Mon Sep 17 00:00:00 2001
From: Chad Little <chad@chadsdomain.com>
Date: Tue, 1 Mar 2016 21:14:19 +0000
Subject: [PATCH] Pop the buttons

Summary: Keeping in step with the gradients on the grey buttons, this adds slight gradients and hover states to blue and green. I feel like they are much more obviously buttons now in the UI (on headers for example).

Test Plan:
Review UI Buttons, check differential, actions, other random buttons.

{F1137208}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D15379
---
 resources/celerity/map.php            |  6 +++---
 webroot/rsrc/css/phui/phui-button.css | 18 +++++++++++++++---
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index cd067f35e3..b9cde6ad51 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '3b2e293c',
+    'core.pkg.css' => '80c32191',
     'core.pkg.js' => '7d8faf57',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
@@ -124,7 +124,7 @@ return array(
     'rsrc/css/phui/phui-badge.css' => 'f25c3476',
     'rsrc/css/phui/phui-big-info-view.css' => 'bd903741',
     'rsrc/css/phui/phui-box.css' => '348bd872',
-    'rsrc/css/phui/phui-button.css' => 'c096e4e9',
+    'rsrc/css/phui/phui-button.css' => 'a64a8de6',
     'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
     'rsrc/css/phui/phui-crumbs-view.css' => '79d536e5',
     'rsrc/css/phui/phui-document-pro.css' => '92d5b648',
@@ -804,7 +804,7 @@ return array(
     'phui-badge-view-css' => 'f25c3476',
     'phui-big-info-view-css' => 'bd903741',
     'phui-box-css' => '348bd872',
-    'phui-button-css' => 'c096e4e9',
+    'phui-button-css' => 'a64a8de6',
     'phui-calendar-css' => 'ccabe893',
     'phui-calendar-day-css' => 'd1cf6f93',
     'phui-calendar-list-css' => 'c1c7f338',
diff --git a/webroot/rsrc/css/phui/phui-button.css b/webroot/rsrc/css/phui/phui-button.css
index 837c093872..0e7cfd3ecc 100644
--- a/webroot/rsrc/css/phui/phui-button.css
+++ b/webroot/rsrc/css/phui/phui-button.css
@@ -26,8 +26,9 @@ button,
 a.button,
 a.button:visited,
 input[type="submit"] {
-  background-color: {$blue};
-  border: 1px solid {$blue};
+  background-color: #2980b9;
+  border: 1px solid #2980b9;
+  background-image: linear-gradient(to bottom, #3498db, #2980b9);
   color: white;
   cursor: pointer;
   font-weight: bold;
@@ -53,6 +54,7 @@ a.green,
 a.green:visited {
   background-color: {$green};
   border-color: {$green};
+  background-image: linear-gradient(to bottom, #23BB5B, #139543);
 }
 
 button.grey,
@@ -101,7 +103,9 @@ a.phuix-dropdown-open {
 a.button:hover,
 button:hover {
   text-decoration: none;
-  background-color: {$sky};
+  background-color: #2980b9;
+  background-image: linear-gradient(to bottom, #3498db, #1b6ba0);
+  border-color: #115988;
   transition: 0.1s;
 }
 
@@ -114,13 +118,16 @@ button.grey:hover {
 
 a.button.green:hover,
 button.green:hover {
+  border-color: #127336;
   background-color: #0DAD48;
+  background-image: linear-gradient(to bottom, #23BB5B, #178841);
   transition: 0.1s;
 }
 
 a.button.simple:hover,
 button.simple:hover {
   background-color: {$blue};
+  background-image: linear-gradient(to bottom, {$blue}, {$blue});
   color: #fff;
   transition: 0.1s;
 }
@@ -165,6 +172,7 @@ button.link {
   display: inline;
   border: none;
   background: transparent;
+  background-image: none;
   font-weight: normal;
   padding: 0;
   margin: 0;
@@ -310,6 +318,7 @@ a.policy-control .caret {
 .phui-button-bar-borderless .button {
   border: 0;
   background-color: transparent;
+  background-image: none;
   padding-left: 10px;
   padding-right: 10px;
 }
@@ -321,6 +330,7 @@ a.policy-control .caret {
 
 .phui-button-bar-borderless .button:hover {
   background-color: transparent;
+  background-image: none;
   border-radius: 3px;
 }
 
@@ -357,10 +367,12 @@ a.policy-control .caret {
 .phui-button-bar .button.simple:hover {
   border-color: {$lightblueborder};
   background-color: #fff;
+  background-image: none;
   color: {$sky};
 }
 
 .phui-button-bar .button.simple:hover .phui-icon-view {
   border-color: {$lightblueborder};
   color: {$sky};
+  background-image: none;
 }