Update Chatlog CSS, fix standard backgrounds

Summary: Uses standard colors in Chatlog, updates the background colors in UIExamples

Test Plan: View UIExamples page, check hex values, check Chatlog new CSS

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: Korvin, epriestley, aran

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

resources/celerity/map.php

@@ -43,7 +43,7 @@ return array(
     'rsrc/css/application/base/notification-menu.css' => 'fc9a363c',
     'rsrc/css/application/base/phabricator-application-launch-view.css' => '55ba7571',
     'rsrc/css/application/base/standard-page-view.css' => '517cdfb1',
-    'rsrc/css/application/chatlog/chatlog.css' => '0cd2bc78',
+    'rsrc/css/application/chatlog/chatlog.css' => 'ad006c53',
     'rsrc/css/application/config/config-options.css' => '7fedf08b',
     'rsrc/css/application/config/config-template.css' => '25d446d6',
     'rsrc/css/application/config/setup-issue.css' => '1bb81c53',
@@ -672,7 +672,7 @@ return array(
     'phabricator-action-list-view-css' => '81383e25',
     'phabricator-application-launch-view-css' => '55ba7571',
     'phabricator-busy' => '6453c869',
-    'phabricator-chatlog-css' => '0cd2bc78',
+    'phabricator-chatlog-css' => 'ad006c53',
     'phabricator-content-source-view-css' => '4b8b05d4',
     'phabricator-core-css' => 'da26ddb2',
     'phabricator-countdown-css' => '86b7b0a0',

src/applications/uiexample/examples/PHUIColorPalletteExample.php

@@ -40,6 +40,7 @@ final class PHUIColorPalletteExample extends PhabricatorUIExample {
       '4B4D51' => 'Dark Grey Text {$darkgreytext}',
       'F7F7F7' => 'Light Grey Background {$lightgreybackground}',
       'EBECEE' => 'Grey Background {$greybackground}',
+      'DFE0E2' => 'Dark Grey Background {$darkgreybackground}',
     );
 
     $blues = array(
@@ -48,7 +49,7 @@ final class PHUIColorPalletteExample extends PhabricatorUIExample {
       '95A6C5' => 'Blue Border {$blueborder}',
       '626E82' => 'Dark Blue Border {$darkblueborder}',
       'F8F9FC' => 'Light Blue Background {$lightbluebackground}',
-      'DFE0E2' => 'Blue Background {$bluebackground}',
+      'DAE7FF' => 'Blue Background {$bluebackground}',
       '8C98B8' => 'Light Blue Text {$lightbluetext}',
       '6B748C' => 'Blue Text {$bluetext}',
       '464C5C' => 'Dark Blue Text {$darkbluetext}',
@@ -94,53 +95,25 @@ final class PHUIColorPalletteExample extends PhabricatorUIExample {
         'class' => 'button grey mlb'),
       'Color Palette');
 
-    $layout1 = id(new PHUIBoxView())
+    $wrap1 = id(new PHUIObjectBoxView())
-      ->appendChild($d_column)
+      ->setHeaderText(pht('Greys'))
-      ->setShadow(true)
+      ->appendChild($d_column);
-      ->addPadding(PHUI::PADDING_LARGE);
 
-    $layout1b = id(new PHUIBoxView())
+    $wrap2 = id(new PHUIObjectBoxView())
-      ->appendChild($b_column)
+      ->setHeaderText(pht('Blues'))
-      ->setShadow(true)
+      ->appendChild($b_column);
-      ->addPadding(PHUI::PADDING_LARGE);
 
-    $layout2 = id(new PHUIBoxView())
+    $wrap3 = id(new PHUIObjectBoxView())
-      ->appendChild($color_url)
+      ->setHeaderText(pht('Colors'))
-      ->appendChild($c_column)
+      ->appendChild($c_column);
-      ->setShadow(true)
-      ->addPadding(PHUI::PADDING_LARGE);
-
-    $head1 = id(new PHUIHeaderView())
-      ->setHeader(pht('Greys'));
-
-    $head1b = id(new PHUIHeaderView())
-      ->setHeader(pht('Blues'));
-
-    $head2 = id(new PHUIHeaderView())
-      ->setHeader(pht('Colors'));
-
-    $wrap1 = id(new PHUIBoxView())
-      ->appendChild($layout1)
-      ->addMargin(PHUI::MARGIN_LARGE);
-
-    $wrap1b = id(new PHUIBoxView())
-      ->appendChild($layout1b)
-      ->addMargin(PHUI::MARGIN_LARGE);
-
-    $wrap2 = id(new PHUIBoxView())
-      ->appendChild($layout2)
-      ->addMargin(PHUI::MARGIN_LARGE);
 
     return phutil_tag(
       'div',
         array(),
         array(
-          $head1,
           $wrap1,
-          $head1b,
+          $wrap2,
-          $wrap1b,
+          $wrap3
-          $head2,
-          $wrap2
         ));
         }
 }

src/infrastructure/celerity/CelerityResourceTransformer.php

@@ -185,6 +185,7 @@ final class CelerityResourceTransformer {
       'darkgreytext'        => '#4B4D51',
       'lightgreybackground' => '#F7F7F7',
       'greybackground'      => '#EBECEE',
+      'darkgreybackground'  => '#DFE0E2',
 
       // Base Blues
       'thinblueborder'      => '#DDE8EF',

webroot/rsrc/css/application/chatlog/chatlog.css

@@ -3,7 +3,7 @@
  */
 
 .phabricator-chat-log-wrap {
-  padding: 0 20px;
+  padding: 0 16px;
 }
 
 .device-phone .phabricator-chat-log-wrap {
@@ -34,15 +34,12 @@
 
 .phabricator-chat-log-panel {
   clear: both;
-  border-left: 1px solid #e7e7e7;
+  border: 1px solid {$lightblueborder};
-  border-right: 1px solid #e7e7e7;
+  border-bottom: 1px solid {$blueborder};
-  border-bottom: 1px solid #c0c5d1;
 }
 
 .phabricator-chat-log {
   width: 100%;
-  border: 1px solid #e7e7e7;
-  box-shadow: 0 1px 1px rgba(0,0,0,.2);
 }
 
 .phabricator-chat-log td {
@@ -55,24 +52,20 @@
 }
 
 .phabricator-chat-log tr td.author {
-  background: #e7e7ee;
+  background: {$greybackground};
 }
 
 .phabricator-chat-log tr.alternate {
-  border-top: 1px solid #e7e7e7;
+  border-top: 1px solid {$thinblueborder};
-  border-bottom: 1px solid #e7e7e7;
+  border-bottom: 1px solid {$thinblueborder};
 }
 
 .phabricator-chat-log tr.alternate td.author {
-  background: #dfdfe6;
+  background: {$darkgreybackground};
 }
 
 .phabricator-chat-log tr.highlight td {
-  background: #ffff88;
+  background: {$lightyellow};
-}
-
-.phabricator-chat-log tr.highlight td.author {
-  background: #eeee88;
 }
 
 .phabricator-chat-log td.timestamp {
@@ -82,7 +75,7 @@
 }
 
 .phabricator-chat-log td.message .timestamp {
-  color: #a1a5a9;
+  color: {$bluetext};
   font-size: 11px;
   float: right;
   margin-left: 5px;
@@ -93,7 +86,7 @@
   text-align: right;
   font-weight: bold;
   width: 140px;
-  color: #555555;
+  color: {$darkbluetext};
 }
 
 .device-phone .phabricator-chat-log td.author {