Hovercard tweaks

Summary: Tightens up spacing, remove some of the borders, add alpha channel, make them all blue (sorry, red green and yellow are for 'status'). If we want to do more colors just for hovercards, I have a brown and a black in the mock, but would like to try just blue for now.

Test Plan: UIExamples, Tasks, People, Diffs, and Pastes.

Reviewers: epriestley, AnhNhan, btrahan

CC: aran, Korvin

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

src/__celerity_resource_map__.php

@@ -3057,7 +3057,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-hovercard-view-css' =>
   array(
-    'uri' => '/res/6c7636cd/rsrc/css/layout/phabricator-hovercard-view.css',
+    'uri' => '/res/80683f88/rsrc/css/layout/phabricator-hovercard-view.css',
     'type' => 'css',
     'requires' =>
     array(

src/applications/differential/events/DifferentialHovercardEventListener.php

@@ -72,7 +72,6 @@ final class DifferentialHovercardEventListener extends PhutilEventListener {
 
     $hovercard->addTag(
       DifferentialRevisionDetailView::renderTagForRevision($rev));
-    $hovercard->setColor(PhabricatorActionHeaderView::HEADER_BLUE);
 
     $event->setValue('hovercard', $hovercard);
   }

src/applications/diffusion/events/DiffusionHovercardEventListener.php

@@ -64,7 +64,6 @@ final class DiffusionHovercardEventListener extends PhutilEventListener {
       $rev_handle = $handles[$revision];
       $hovercard->addField(pht('Revision'), $rev_handle->renderLink());
     }
-    $hovercard->setColor(PhabricatorActionHeaderView::HEADER_YELLOW);
 
     $event->setValue('hovercard', $hovercard);
   }

src/applications/maniphest/event/ManiphestHovercardEventListener.php

@@ -92,7 +92,6 @@ final class ManiphestHovercardEventListener extends PhutilEventListener {
     }
 
     $hovercard->addTag(ManiphestView::renderTagForTask($task));
-    $hovercard->setColor(PhabricatorActionHeaderView::HEADER_BLUE);
 
     $event->setValue('hovercard', $hovercard);
   }

src/applications/people/event/PhabricatorPeopleHovercardEventListener.php

@@ -61,7 +61,6 @@ final class PhabricatorPeopleHovercardEventListener
       $hovercard->addField(pht('Blurb'),
         phutil_utf8_shorten($profile->getBlurb(), 120));
     }
-    $hovercard->setColor(PhabricatorActionHeaderView::HEADER_RED);
 
     $event->setValue('hovercard', $hovercard);
   }

src/applications/search/controller/PhabricatorSearchHovercardController.php

@@ -44,7 +44,7 @@ final class PhabricatorSearchHovercardController
       foreach ($cards as $key => $hovercard) {
         $cards[$key] = phutil_tag('div',
           array(
-            'style' => 'margin: 20px;',
+            'class' => 'ml',
           ),
           $hovercard);
       }

src/view/widget/hovercard/PhabricatorHovercardView.php

@@ -17,7 +17,7 @@ final class PhabricatorHovercardView extends AphrontView {
   private $fields = array();
   private $actions = array();
 
-  private $color = 'green';
+  private $color = 'blue';
 
   public function setObjectHandle(PhabricatorObjectHandle $handle) {
     $this->handle = $handle;
@@ -84,20 +84,32 @@ final class PhabricatorHovercardView extends AphrontView {
     }
 
     $body = array();
+
     if ($this->detail) {
-      $body[] = hsprintf('<strong>%s</strong>', $this->detail);
+      $body_title = $this->detail;
     } else {
       // Fallback for object handles
-      $body[] = hsprintf('<strong>%s</strong>', $handle->getFullName());
+      $body_title = $handle->getFullName();
     }
 
+    $body[] = phutil_tag(
+      'div',
+        array(
+          'class' => 'phabricator-hovercard-body-header'
+          ),
+        $body_title);
+
     foreach ($this->fields as $field) {
-      $body[] = hsprintf('<b>%s:</b> <span>%s</span>',
+      $item = hsprintf('<strong>%s:</strong> <span>%s</span>',
         $field['label'], $field['value']);
+      $body[] = phutil_tag(
+        'div',
+          array(
+            'class' => 'phabricator-hovercard-body-item'
+            ),
+          $item);
     }
 
-    $body = phutil_implode_html(phutil_tag('br'), $body);
-
     if ($handle->getImageURI()) {
       // Probably a user, we don't need to assume something else
       // "Prepend" the image by appending $body

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

@@ -7,10 +7,10 @@
 }
 
 .phabricator-hovercard-wrapper {
-  border-radius: 4px;
+  border-radius: 5px;
   width: 400px;
-  padding: 4px;
+  padding: 6px;
-  background-color: #cccccc;
+  background-color: rgba(0,0,0,.2);
 }
 
 .device-phone .phabricator-hovercard-wrapper {
@@ -18,26 +18,24 @@
 }
 
 .phabricator-hovercard-container {
-  border-radius: 3px;
   border: 1px solid #666666;
 }
 
-.phabricator-hovercard-head .phabricator-action-header {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-}
-
 .phabricator-hovercard-tags {
-  font-size: 13px;
   float: right;
   white-space: normal;
 }
 
 .phabricator-hovercard-body {
-  padding: 15px;
+  padding: 8px;
   background-color: white;
-  border-bottom-left-radius: 2px;
+  color: #333;
-  border-bottom-right-radius: 2px;
+}
+
+.phabricator-hovercard-body-header {
+  font-size: 14px;
+  padding-bottom: 2px;
+  color: #000;
 }
 
 .phabricator-hovercard-body .profile-header-picture-frame {