Use comment icon for Pholio Inline Comments

Summary: Uses FontAwesome CSS icons

Test Plan:
Check draft and normal states. Click.

{F166611}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

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

resources/celerity/map.php

@@ -81,7 +81,7 @@ return array(
     'rsrc/css/application/phame/phame.css' => '19ecc703',
     'rsrc/css/application/pholio/pholio-edit.css' => 'b9e59b6d',
     'rsrc/css/application/pholio/pholio-inline-comments.css' => '3d14984a',
-    'rsrc/css/application/pholio/pholio.css' => '4d4fe3d2',
+    'rsrc/css/application/pholio/pholio.css' => '96cf492a',
     'rsrc/css/application/phortune/phortune-credit-card-form.css' => 'b25b4beb',
     'rsrc/css/application/phrequent/phrequent.css' => 'ffc185ad',
     'rsrc/css/application/phriction/phriction-document-css.css' => '7d7f0071',
@@ -389,7 +389,7 @@ return array(
     'rsrc/js/application/passphrase/phame-credential-control.js' => '1e1c8a59',
     'rsrc/js/application/phame/phame-post-preview.js' => '61d927ec',
     'rsrc/js/application/pholio/behavior-pholio-mock-edit.js' => '1e1e8bb0',
-    'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => 'efe81529',
+    'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '8818401f',
     'rsrc/js/application/phortune/behavior-balanced-payment-form.js' => '3b3e1664',
     'rsrc/js/application/phortune/behavior-stripe-payment-form.js' => '1693a296',
     'rsrc/js/application/phortune/behavior-test-payment-form.js' => 'b3e5ee60',
@@ -613,7 +613,7 @@ return array(
     'javelin-behavior-phabricator-watch-anchor' => '06e05112',
     'javelin-behavior-phame-post-preview' => '61d927ec',
     'javelin-behavior-pholio-mock-edit' => '1e1e8bb0',
-    'javelin-behavior-pholio-mock-view' => 'efe81529',
+    'javelin-behavior-pholio-mock-view' => '8818401f',
     'javelin-behavior-phui-object-box-tabs' => 'a3e2244e',
     'javelin-behavior-phui-timeline-dropdown-menu' => '4d94d9c3',
     'javelin-behavior-policy-control' => 'f3fef818',
@@ -739,7 +739,7 @@ return array(
     'phabricator-uiexample-reactor-sendproperties' => '551add57',
     'phabricator-zindex-css' => 'efb673ac',
     'phame-css' => '19ecc703',
-    'pholio-css' => '4d4fe3d2',
+    'pholio-css' => '96cf492a',
     'pholio-edit-css' => 'b9e59b6d',
     'pholio-inline-comments-css' => '3d14984a',
     'phortune-credit-card-form' => '2290aeef',
@@ -1442,6 +1442,21 @@ return array(
       1 => 'javelin-dom',
       2 => 'javelin-reactor-dom',
     ),
+    '8818401f' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-util',
+      2 => 'javelin-stratcom',
+      3 => 'javelin-dom',
+      4 => 'javelin-vector',
+      5 => 'javelin-magical-init',
+      6 => 'javelin-request',
+      7 => 'javelin-history',
+      8 => 'javelin-workflow',
+      9 => 'javelin-mask',
+      10 => 'javelin-behavior-device',
+      11 => 'phabricator-keyboard-shortcut',
+    ),
     '8a3ed18b' =>
     array(
       0 => 'javelin-magical-init',
@@ -1963,21 +1978,6 @@ return array(
       0 => 'javelin-install',
       1 => 'javelin-util',
     ),
-    'efe81529' =>
-    array(
-      0 => 'javelin-behavior',
-      1 => 'javelin-util',
-      2 => 'javelin-stratcom',
-      3 => 'javelin-dom',
-      4 => 'javelin-vector',
-      5 => 'javelin-magical-init',
-      6 => 'javelin-request',
-      7 => 'javelin-history',
-      8 => 'javelin-workflow',
-      9 => 'javelin-mask',
-      10 => 'javelin-behavior-device',
-      11 => 'phabricator-keyboard-shortcut',
-    ),
     'f2441746' =>
     array(
       0 => 'javelin-dom',

webroot/rsrc/css/application/pholio/pholio.css

@@ -132,8 +132,6 @@
 .pholio-mock-reticle {
   position: absolute;
   display: none;
-  background-repeat: no-repeat;
-  background-position: center center;
   box-sizing: border-box;
 }
 
@@ -143,13 +141,17 @@
 }
 
 .pholio-mock-reticle-draft {
-  /* TODO: Replace with real icons. */
-  background-image: url('/rsrc/image/icon/fatcow/flag_yellow.png');
+  font-size: 2.2em;
+  color: {$yellow};
+  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
+  -webkit-text-stroke: 1px white;
 }
 
 .pholio-mock-reticle-final {
-  /* TODO: Replace with real icons. */
-  background-image: url('/rsrc/image/icon/fatcow/flag_pink.png');
+  font-size: 2.2em;
+  color: {$indigo};
+  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
+  -webkit-text-stroke: 1px white;
 }
 
 .pholio-mock-reticle-draft:hover,

webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js

@@ -455,9 +455,9 @@ JX.behavior('pholio-mock-view', function(config) {
 
       var classes = [];
       if (!inline.transactionPHID) {
-        classes.push('pholio-mock-reticle-draft');
+        classes.push('pholio-mock-reticle-draft phui-font-fa fa-comment');
       } else {
-        classes.push('pholio-mock-reticle-final');
+        classes.push('pholio-mock-reticle-final phui-font-fa fa-comment');
       }
 
       var inline_selection = render_reticle(classes);