Common Colors, Spacing for Menus and Typeaheads

Summary: Adds more consistent colors and spacing to notifications, conpherence dropdowns, search dropdowns, and typeaheads.

Test Plan: Tested Notifications, menu and page. Conpherence, menu and page, Search, and Typeaheads.

Reviewers: epriestley

Subscribers: epriestley, Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => '8b46eb01',
+    'core.pkg.css' => '45c8100d',
     'core.pkg.js' => '7db41c19',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => 'fbf57382',
@@ -34,19 +34,19 @@ return array(
     'rsrc/css/aphront/tooltip.css' => '9c90229d',
     'rsrc/css/aphront/transaction.css' => 'ce491938',
     'rsrc/css/aphront/two-column.css' => '16ab3ad2',
-    'rsrc/css/aphront/typeahead.css' => '1f4c9e23',
+    'rsrc/css/aphront/typeahead.css' => 'a989b5b3',
     'rsrc/css/application/auth/auth.css' => '1e655982',
-    'rsrc/css/application/base/main-menu-view.css' => '5f0e9e05',
+    'rsrc/css/application/base/main-menu-view.css' => '5f08823b',
-    'rsrc/css/application/base/notification-menu.css' => '99ffef72',
+    'rsrc/css/application/base/notification-menu.css' => '8637a3db',
     'rsrc/css/application/base/phabricator-application-launch-view.css' => '137e794e',
     'rsrc/css/application/base/standard-page-view.css' => '517cdfb1',
     'rsrc/css/application/chatlog/chatlog.css' => '852140ff',
     'rsrc/css/application/config/config-options.css' => '7fedf08b',
     'rsrc/css/application/config/config-template.css' => '25d446d6',
     'rsrc/css/application/config/setup-issue.css' => '69e640e7',
-    'rsrc/css/application/conpherence/menu.css' => 'c5fe56f9',
+    'rsrc/css/application/conpherence/menu.css' => '3690ec7a',
     'rsrc/css/application/conpherence/message-pane.css' => '7703a9a9',
-    'rsrc/css/application/conpherence/notification.css' => '403cf598',
+    'rsrc/css/application/conpherence/notification.css' => '04a6e10a',
     'rsrc/css/application/conpherence/update.css' => '1099a660',
     'rsrc/css/application/conpherence/widget-pane.css' => 'bf275a6c',
     'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
@@ -501,12 +501,12 @@ return array(
     'aphront-tokenizer-control-css' => '36903077',
     'aphront-tooltip-css' => '9c90229d',
     'aphront-two-column-view-css' => '16ab3ad2',
-    'aphront-typeahead-control-css' => '1f4c9e23',
+    'aphront-typeahead-control-css' => 'a989b5b3',
     'auth-css' => '1e655982',
     'config-options-css' => '7fedf08b',
-    'conpherence-menu-css' => 'c5fe56f9',
+    'conpherence-menu-css' => '3690ec7a',
     'conpherence-message-pane-css' => '7703a9a9',
-    'conpherence-notification-css' => '403cf598',
+    'conpherence-notification-css' => '04a6e10a',
     'conpherence-update-css' => '1099a660',
     'conpherence-widget-pane-css' => 'bf275a6c',
     'differential-changeset-view-css' => 'f234b888',
@@ -710,11 +710,11 @@ return array(
     'phabricator-jump-nav' => 'f0c5e726',
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => 'ad7a69ca',
-    'phabricator-main-menu-view' => '5f0e9e05',
+    'phabricator-main-menu-view' => '5f08823b',
     'phabricator-nav-view-css' => '9283c2df',
     'phabricator-notification' => '0c6946e7',
     'phabricator-notification-css' => 'ef2c9b34',
-    'phabricator-notification-menu-css' => '99ffef72',
+    'phabricator-notification-menu-css' => '8637a3db',
     'phabricator-object-selector-css' => '029a133d',
     'phabricator-phtize' => 'd254d646',
     'phabricator-prefab' => '41ed7994',

src/infrastructure/celerity/CelerityResourceTransformer.php

@@ -194,6 +194,8 @@ final class CelerityResourceTransformer {
       'charcoal'      => '#4b4d51',
       'backdrop'      => '#c4cde0',
       'hovergrey'     => '#c5cbcf',
+      'hoverblue'     => '#eceff5',
+      'hoverborder'   => '#dfe1e9',
 
       // Base Greys
       'lightgreyborder'     => '#C7CCD9',

webroot/rsrc/css/aphront/typeahead.css

@@ -9,7 +9,7 @@ div.jx-typeahead-hardpoint {
 
 div.jx-typeahead-results {
   position: absolute;
-  border: 1px solid #96a6c7;
+  border: 1px solid {$hoverborder};
   border-top: 0px;
   padding: 0;
   background: #fefefe;
@@ -25,19 +25,16 @@ div.jx-typeahead-results {
 }
 
 div.jx-typeahead-results a.jx-result {
-  color: #333;
+  color: {$darkgreytext};
   display: block;
   font-size: 13px;
-  border-bottom: 1px solid #e7e7e7;
+  border-top: 1px solid {$hoverborder};
-  border-top: 1px solid #fff;
 }
 
 div.jx-typeahead-results a.jx-result:hover,
 div.jx-typeahead-results a.focused {
   display: block;
-  background: {$lightblue};
+  background: {$hoverblue};
-  border-top: 1px solid {$thinblueborder};
-  border-bottom: 1px solid {$thinblueborder};
   text-decoration: none;
 }
 

webroot/rsrc/css/application/base/main-menu-view.css

@@ -197,25 +197,25 @@
   background: #ffffff;
   word-wrap: break-word;
   overflow-y: auto;
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
-  border: 2px solid #33393d;
+  border: {$blueborder};
   border-radius: 3px;
   margin-left: 40px;
 }
 
 .phabricator-main-search-typeahead-result {
   display: block;
-  padding: 6px 12px 6px 46px;
+  padding: 6px 8px 8px 44px;
-  background-position: 12px 9px;
+  background-position: 8px;
-  background-size: 25px 25px;
+  background-size: 30px 30px;
   background-repeat: no-repeat;
 }
 
 .phabricator-main-search-typeahead-result .result-name {
   display: block;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: bold;
-  color: #333;
+  color: {$darkgreytext};
 }
 
 .phabricator-main-search-typeahead-result .result-type {

webroot/rsrc/css/application/base/notification-menu.css

@@ -3,13 +3,12 @@
  */
 
 .phabricator-notification-menu {
-  background: #ffffff;
+  background: #fff;
   font-size: 11px;
   word-wrap: break-word;
   overflow-y: auto;
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
-  border: 2px solid #33393d;
+  border: 1px solid {$blueborder};
-  border-top-width: 0;
   border-radius: 3px;
 }
 
@@ -32,7 +31,7 @@
 }
 
 .device-phone .phabricator-notification-menu {
-  border-bottom: 1px solid #222222;
+  border-bottom: 1px solid {$thinblueborder};
   width: 94%;
   max-width: 390px;
   top: 42px !important;
@@ -42,7 +41,7 @@
 }
 
 .phabricator-notification {
-  padding: 6px;
+  padding: 6px 8px;
 }
 
 .phabricator-notification-menu .phabricator-notification {
@@ -50,11 +49,11 @@
 }
 
 .device-desktop .phabricator-notification-menu .phabricator-notification:hover {
-  background: #e6ebf5;
+  background: {$hoverblue};
 }
 
 .phabricator-notification + .phabricator-notification {
-  border-top: 1px solid #e9e9e9;
+  border-top: 1px solid {$hoverborder};
 }
 
 .no-notifications {
@@ -63,15 +62,14 @@
 
 .phabricator-notification-list .phabricator-notification-unread,
 .phabricator-notification-menu .phabricator-notification-unread {
-  background: #eceff5;
+  background: {$hoverblue};
-  border-color: #e3e8f0;
 }
 
 .phabricator-notification-header {
   font-weight: bold;
-  padding: 6px;
+  padding: 10px 8px;
   font-size: 12px;
-  border-bottom: 1px solid #e9e9e9;
+  border-bottom: 1px solid {$thinblueborder};
 }
 
 .phabricator-notification-header a {
@@ -81,14 +79,16 @@
 .phabricator-notification-header .phabricator-notification-clear-all {
   color: #18559D;
   float: right;
+  font-weight: normal;
 }
 
 .phabricator-notification-view-all {
   text-align: center;
   font-weight: bold;
-  background: #f7f7f7;
+  background: {$greybackground};
-  border-top: 1px solid #e9e9e9;
+  border-top: 1px solid {$thinblueborder};
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
-  padding: 6px;
+  padding: 8px;
+  font-size: 12px;
 }

webroot/rsrc/css/application/conpherence/menu.css

@@ -132,7 +132,7 @@
   color: {$darkbluetext};
   text-shadow: 0px 1px 1px #fff;
   overflow: hidden;
-  width: 180px;
+  width: 160px;
   text-overflow: ellipsis;
 }
 
@@ -147,14 +147,13 @@
 .conpherence-menu .conpherence-menu-item-view
 .conpherence-menu-item-unread-count {
   position: absolute;
-  left: 35px;
+  right: 8px;
-  top: 3px;
+  top: 15px;
-  background: {$red};
+  background: {$blue};
-  border-radius: 10px;
+  border-radius: 2px;
-  color: #FFF;
+  color: #fff;
   font-weight: bold;
-  padding: 1px 5px 2px;
+  padding: 0 5px 1px;
-  border: 1px solid #333;
   font-size: 11px;
 }
 

webroot/rsrc/css/application/conpherence/notification.css

@@ -9,7 +9,7 @@
 
 .phabricator-notification .conpherence-menu-item-view {
   display: block;
-  height: 55px;
+  height: 46px;
   overflow: hidden;
   position: relative;
   text-decoration: none;
@@ -20,60 +20,48 @@
 
 .phabricator-notification .conpherence-menu-item-view
 .conpherence-menu-item-image {
-  top: 6px;
+  top: 8px;
-  left: 6px;
+  left: 8px;
   display: block;
   position: absolute;
-  width: 35px;
+  width: 30px;
-  height: 35px;
+  height: 30px;
-  background-size: 35px;
+  background-size: 30px;
-  border: 4px solid #e7e7e7;
-  border-radius: 3px;
 }
 
 .phabricator-notification .conpherence-menu-item-view
 .conpherence-menu-item-title {
   display: block;
-  margin-top: 12px;
+  margin-top: 8px;
-  margin-left: 58px;
+  margin-left: 46px;
   text-align: left;
   font-weight: bold;
   font-size: 13px;
-  color: #333;
+  color: {$darkgreytext};
-  overflow: hidden;
+  width: 280px;
-  width: 220px;
   text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .phabricator-notification .conpherence-menu-item-view
 .conpherence-menu-item-subtitle {
   display: block;
-  color: #a1a5a9;
+  color: {$lightgreytext};
   font-size: 11px;
   margin-top: 2px;
-  margin-left: 58px;
+  margin-left: 46px;
-  font-style: italic;
 }
 
 .phabricator-notification .conpherence-menu-item-view
 .conpherence-menu-item-unread-count {
   position: absolute;
-  left: 35px;
+  right: 8px;
-  top: 3px;
-  background: {$red};
-  border-radius: 10px;
-  color: #FFF;
-  font-weight: bold;
-  padding: 1px 5px 2px;
-  border: 1px solid #333;
-  font-size: 11px;
-}
-
-.phabricator-notification .conpherence-menu-item-view
-.conpherence-menu-item-date {
-  position: absolute;
   top: 15px;
-  right: 16px;
+  background: {$blue};
-  color: #a1a5a9;
+  border-radius: 2px;
+  color: #fff;
+  font-weight: bold;
+  padding: 0 5px 1px;
   font-size: 11px;
 }