[redesign] Remove most gradients, tweak hovercards

Summary: The removes our least used gradients and uses base colors. Tweaked Hovercards to use.

Test Plan: Test Hovercards and UIExamples Actions Headers

Reviewers: epriestley, btrahan

Subscribers: epriestley, Korvin

Differential Revision: https://secure.phabricator.com/D9347

resources/celerity/map.php

@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => 'f39a873a',
+    'core.pkg.css' => 'b5da82b5',
     'core.pkg.js' => '7db41c19',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => 'fbf57382',
@@ -112,11 +112,11 @@ return array(
     'rsrc/css/font/font-awesome.css' => '73d075c3',
     'rsrc/css/font/font-source-sans-pro.css' => '91d53463',
     'rsrc/css/font/phui-font-icon-base.css' => 'eb84f033',
-    'rsrc/css/layout/phabricator-action-header-view.css' => '33a4590a',
+    'rsrc/css/layout/phabricator-action-header-view.css' => 'ad0d8f42',
     'rsrc/css/layout/phabricator-action-list-view.css' => 'dcbfc854',
     'rsrc/css/layout/phabricator-crumbs-view.css' => '989a48b6',
     'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
-    'rsrc/css/layout/phabricator-hovercard-view.css' => '46a13cf0',
+    'rsrc/css/layout/phabricator-hovercard-view.css' => '41c2de04',
     'rsrc/css/layout/phabricator-side-menu-view.css' => 'a2ccd7bd',
     'rsrc/css/layout/phabricator-source-code-view.css' => '62a99814',
     'rsrc/css/phui/calendar/phui-calendar-day.css' => 'de035c8a',
@@ -151,7 +151,7 @@ return array(
     'rsrc/css/sprite-buttonbar.css' => 'ba1c5738',
     'rsrc/css/sprite-conpherence.css' => '3b4a0487',
     'rsrc/css/sprite-docs.css' => '5f65d0da',
-    'rsrc/css/sprite-gradient.css' => '487b5761',
+    'rsrc/css/sprite-gradient.css' => '4aec2401',
     'rsrc/css/sprite-login.css' => '67ff30b2',
     'rsrc/css/sprite-main-header.css' => '92720ee2',
     'rsrc/css/sprite-menu.css' => 'd781c13b',
@@ -316,7 +316,7 @@ return array(
     'rsrc/image/sprite-conpherence.png' => 'a5ab2eb7',
     'rsrc/image/sprite-docs-X2.png' => '6dc1adad',
     'rsrc/image/sprite-docs.png' => '4636297f',
-    'rsrc/image/sprite-gradient.png' => '6f37c182',
+    'rsrc/image/sprite-gradient.png' => '7c71fb29',
     'rsrc/image/sprite-login-X2.png' => '5f75d60b',
     'rsrc/image/sprite-login.png' => 'efe40ddb',
     'rsrc/image/sprite-main-header.png' => '83521873',
@@ -688,7 +688,7 @@ return array(
     'paste-css' => 'aa1767d1',
     'path-typeahead' => 'f7fc67ec',
     'people-profile-css' => 'ba7b2762',
-    'phabricator-action-header-view-css' => '33a4590a',
+    'phabricator-action-header-view-css' => 'ad0d8f42',
     'phabricator-action-list-view-css' => 'dcbfc854',
     'phabricator-application-launch-view-css' => 'cb9f4db1',
     'phabricator-busy' => '6453c869',
@@ -706,7 +706,7 @@ return array(
     'phabricator-filetree-view-css' => 'fccf9f82',
     'phabricator-flag-css' => '5337623f',
     'phabricator-hovercard' => '4f344388',
-    'phabricator-hovercard-view-css' => '46a13cf0',
+    'phabricator-hovercard-view-css' => '41c2de04',
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => 'ad7a69ca',
     'phabricator-main-menu-view' => '72d1d2ef',
@@ -801,7 +801,7 @@ return array(
     'sprite-buttonbar-css' => 'ba1c5738',
     'sprite-conpherence-css' => '3b4a0487',
     'sprite-docs-css' => '5f65d0da',
-    'sprite-gradient-css' => '487b5761',
+    'sprite-gradient-css' => '4aec2401',
     'sprite-login-css' => '67ff30b2',
     'sprite-main-header-css' => '92720ee2',
     'sprite-menu-css' => 'd781c13b',

resources/sprite/manifest/gradient.json

@@ -1,26 +1,11 @@
 {
   "version" : 1,
   "sprites" : {
-    "gradient-blue-header"      : {
-      "name" : "gradient-blue-header",
-      "rule" : ".gradient-blue-header",
-      "hash" : "bcfc1d3e93ea8585af5b5ca52b08e944"
-    },
-    "gradient-breadcrumbs"      : {
-      "name" : "gradient-breadcrumbs",
-      "rule" : ".gradient-breadcrumbs",
-      "hash" : "ed46fe9544216513a3958900c688a808"
-    },
     "gradient-dark-grey-header" : {
       "name" : "gradient-dark-grey-header",
       "rule" : ".gradient-dark-grey-header",
       "hash" : "e8762dd2849410a7e4fba8f972f946ff"
     },
-    "gradient-green-header"     : {
-      "name" : "gradient-green-header",
-      "rule" : ".gradient-green-header",
-      "hash" : "848b563e846e187b688e899a9d838e40"
-    },
     "gradient-grey-header"      : {
       "name" : "gradient-grey-header",
       "rule" : ".gradient-grey-header",
@@ -30,16 +15,6 @@
       "name" : "gradient-lightblue-header",
       "rule" : ".gradient-lightblue-header",
       "hash" : "e7753a6ce63c6822a559266eef9e255b"
-    },
-    "gradient-red-header"       : {
-      "name" : "gradient-red-header",
-      "rule" : ".gradient-red-header",
-      "hash" : "070a2e01f611bfaf5207be25eebdd6f2"
-    },
-    "gradient-yellow-header"    : {
-      "name" : "gradient-yellow-header",
-      "rule" : ".gradient-yellow-header",
-      "hash" : "166ee67c5201416cfa598c1eb86bf92a"
     }
   },
   "scales"  : [

src/applications/uiexample/examples/PhabricatorHovercardExample.php

@@ -69,9 +69,9 @@ final class PhabricatorHovercardExample extends PhabricatorUIExample {
   }
 
   private function createPanel($header) {
-    $panel = new AphrontPanelView();
-    $panel->setNoBackground();
-    $panel->setHeader($header);
+    $panel = new PHUIBoxView();
+    $panel->addClass('grouped');
+    $panel->addClass('ml');
     return $panel;
   }
 

webroot/rsrc/css/layout/phabricator-action-header-view.css

@@ -48,6 +48,22 @@
   color: {$darkgreytext};
 }
 
+.phabricator-action-header.gradient-green-header {
+  background: {$green};
+}
+
+.phabricator-action-header.gradient-blue-header {
+  background: {$blue};
+}
+
+.phabricator-action-header.gradient-yellow-header {
+  background: {$yellow};
+}
+
+.phabricator-action-header.gradient-red-header {
+  background: {$red};
+}
+
 .gradient-green-header .phabricator-action-header-title,
 .gradient-red-header .phabricator-action-header-title,
 .gradient-blue-header .phabricator-action-header-title,
@@ -57,6 +73,7 @@
 .gradient-blue-header .phabricator-action-header-link,
 .gradient-yellow-header .phabricator-action-header-link {
   color: #fff;
+  -webkit-font-smoothing: antialiased;
 }
 
 .phabricator-action-header-icon-list .phui-tag-view {

webroot/rsrc/css/layout/phabricator-hovercard-view.css

@@ -8,10 +8,7 @@
 
 .phabricator-hovercard-wrapper {
   float: left;
-  border-radius: 5px;
   width: 400px;
-  padding: 6px;
-  background-color: rgba(0,0,0,.2);
 }
 
 .device-phone .phabricator-hovercard-wrapper {
@@ -22,7 +19,10 @@
 .phabricator-hovercard-container {
   float: left;
   width: 100%;
-  border: 1px solid {$greytext};
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
+  border: 1px solid {$blueborder};
+  border-radius: 3px;
+  background-color: #fff;
 }
 
 .phabricator-hovercard-tags {
@@ -33,19 +33,20 @@
 .phabricator-hovercard-body {
   float: left;
   width: 100%;
-  padding: 8px 0px 8px 0px;
-  background-color: white;
+  padding: 12px 0;
   color: {$darkgreytext};
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
 }
 
 .phabricator-hovercard-body-header,
 .phabricator-hovercard-body-item {
-  margin: 0px 0px 0px 8px;
+  margin: 0 0 0 8px;
 }
 
 .phabricator-hovercard-body-header {
-  font-size: 13px;
-  padding-bottom: 2px;
+  font-size: 14px;
+  padding-bottom: 4px;
   color: {$darkgreytext};
 }
 

webroot/rsrc/css/sprite-gradient.css

@@ -11,34 +11,14 @@
 
 
 
-.gradient-blue-header {
-  background-position: 0px -32px;
-}
-
-.gradient-breadcrumbs {
+.gradient-dark-grey-header {
   background-position: 0px 0px;
 }
 
-.gradient-dark-grey-header {
-  background-position: 0px -103px;
-}
-
-.gradient-green-header {
-  background-position: 0px -174px;
-}
-
 .gradient-grey-header {
-  background-position: 0px -245px;
+  background-position: 0px -71px;
 }
 
 .gradient-lightblue-header {
-  background-position: 0px -458px;
-}
-
-.gradient-red-header {
-  background-position: 0px -316px;
-}
-
-.gradient-yellow-header {
-  background-position: 0px -387px;
+  background-position: 0px -142px;
 }