Update inline-comment styles in Differential

Summary:
Moderize Inline Comment Display

 - Use standard colors
 - Better display with/without comment
 - OMG Icons

Test Plan:
{F148256}

Test with and without main comment, test with many for few comments on 1-3 files.

Reviewers: epriestley, btrahan

Reviewed By: btrahan

Subscribers: epriestley, Korvin

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

resources/celerity/map.php

@@ -10,7 +10,7 @@ return array(
     'core.pkg.css' => '9e7cce62',
     'core.pkg.js' => '417722ff',
     'darkconsole.pkg.js' => 'ca8671ce',
-    'differential.pkg.css' => '12c11318',
+    'differential.pkg.css' => '8a064eb7',
     'differential.pkg.js' => '11a5b750',
     'diffusion.pkg.css' => '3783278d',
     'diffusion.pkg.js' => '5b4010f4',
@@ -52,7 +52,7 @@ return array(
     'rsrc/css/application/conpherence/widget-pane.css' => '87b12e0c',
     'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
     'rsrc/css/application/countdown/timer.css' => '86b7b0a0',
-    'rsrc/css/application/diff/inline-comment-summary.css' => '14a91639',
+    'rsrc/css/application/diff/inline-comment-summary.css' => '3b2d1492',
     'rsrc/css/application/differential/add-comment.css' => 'c478bcaa',
     'rsrc/css/application/differential/changeset-view.css' => '1570a1ff',
     'rsrc/css/application/differential/core.css' => '7ac3cabc',
@@ -526,7 +526,7 @@ return array(
     'herald-css' => 'c544dd1c',
     'herald-rule-editor' => '22d2966a',
     'herald-test-css' => '778b008e',
-    'inline-comment-summary-css' => '14a91639',
+    'inline-comment-summary-css' => '3b2d1492',
     'javelin-aphlict' => '493665ee',
     'javelin-behavior' => '8a3ed18b',
     'javelin-behavior-aphlict-dropdown' => '2a2dba85',

src/infrastructure/diff/view/PhabricatorInlineSummaryView.php

@@ -19,7 +19,15 @@ final class PhabricatorInlineSummaryView extends AphrontView {
   }
 
   private function renderHeader() {
-    return phutil_tag_div('phabricator-inline-summary', pht('Inline Comments'));
+    $icon = id(new PHUIIconView())
+      ->setIconFont('fa-comment bluegrey msr');
+
+    $header = phutil_tag_div(
+      'phabricator-inline-summary',
+      array(
+        $icon,
+        pht('Inline Comments')));
+    return $header;
   }
 
   private function renderTable() {
@@ -59,6 +67,9 @@ final class PhabricatorInlineSummaryView extends AphrontView {
         }
 
         if ($href) {
+          $icon = id(new PHUIIconView())
+            ->setIconFont('fa-share white msr');
+
           $lines = phutil_tag(
             'a',
             array(
@@ -67,6 +78,7 @@ final class PhabricatorInlineSummaryView extends AphrontView {
               'class'   => 'num',
             ),
             array(
+              $icon,
               $lines,
               $tail,
             ));

webroot/rsrc/css/application/diff/inline-comment-summary.css

@@ -3,10 +3,17 @@
  */
 
 .phabricator-inline-summary {
-  margin: .75em 0 .5em;
+  font-size: 12px;
-  font-size: 11px;
+  text-transform: uppercase;
-  border-bottom: 1px solid #dddddd;
+  font-weight: bold;
-  color: {$greytext};
+  color: {$bluetext};
+  padding-top: 12px;
+  margin-top: 12px;
+  border-top: 1px solid {$thinblueborder};
+}
+
+.phabricator-remarkup + .phabricator-inline-summary {
+  padding-top: 16px;
 }
 
 .phabricator-inline-summary-table {
@@ -15,17 +22,19 @@
 
 .phabricator-inline-summary-table th {
   padding: 6px 0px;
-  color: {$darkgreytext};
+  color: {$lightgreytext};
 }
 
 .phabricator-inline-summary-table td  {
   padding: 0px 4px 6px;
   white-space: nowrap;
+  color: {$darkbluetext};
 }
 
 .phabricator-inline-summary-table td.inline-line-number {
   padding-left: 0px;
   width: 100px;
+  white-space: nowrap;
 }
 
 .phabricator-inline-summary-table td.inline-which-diff {
@@ -43,13 +52,21 @@
    target (by highlighting the entire cell). */
 
 .phabricator-inline-summary-table td.inline-line-number a.num {
-  padding-left: 16px;
+  padding-left: 4px;
   display: block;
   font-weight: bold;
+  color: {$blue};
 }
 
 .phabricator-inline-summary-table td.inline-line-number a.num:hover {
-  background: #3b5998;
+  background: {$blue};
+  border-radius: 3px;
   color: white;
   text-decoration: none;
 }
+
+.phui-timeline-core-content .phabricator-inline-summary:first-child {
+  border: none;
+  margin-top: 0;
+  padding-top: 0;
+}