Switch Pholio over to lighter layout.

Summary: Gets rid of all the dark css.

Test Plan:
Do it live.

{F166665}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

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

resources/celerity/map.php

@@ -80,8 +80,8 @@ return array(
     'rsrc/css/application/people/people-profile.css' => 'ba7b2762',
     '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-inline-comments.css' => '609c3320',
-    'rsrc/css/application/pholio/pholio.css' => '96cf492a',
+    'rsrc/css/application/pholio/pholio.css' => '72af321e',
     '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',
@@ -226,6 +226,7 @@ return array(
     'rsrc/image/avatar.png' => '3eb28cd9',
     'rsrc/image/checker_dark.png' => 'd8e65881',
     'rsrc/image/checker_light.png' => 'a0155918',
+    'rsrc/image/checker_lighter.png' => 'd5da91b6',
     'rsrc/image/credit_cards.png' => '72b8ede8',
     'rsrc/image/darkload.gif' => '1ffd3ec6',
     'rsrc/image/divot.png' => '94dded62',
@@ -389,7 +390,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' => '8818401f',
+    'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '09c4fe2d',
     '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 +614,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' => '8818401f',
+    'javelin-behavior-pholio-mock-view' => '09c4fe2d',
     'javelin-behavior-phui-object-box-tabs' => 'a3e2244e',
     'javelin-behavior-phui-timeline-dropdown-menu' => '4d94d9c3',
     'javelin-behavior-policy-control' => 'f3fef818',
@@ -739,9 +740,9 @@ return array(
     'phabricator-uiexample-reactor-sendproperties' => '551add57',
     'phabricator-zindex-css' => 'efb673ac',
     'phame-css' => '19ecc703',
-    'pholio-css' => '96cf492a',
+    'pholio-css' => '72af321e',
     'pholio-edit-css' => 'b9e59b6d',
-    'pholio-inline-comments-css' => '3d14984a',
+    'pholio-inline-comments-css' => '609c3320',
     'phortune-credit-card-form' => '2290aeef',
     'phortune-credit-card-form-css' => 'b25b4beb',
     'phrequent-css' => 'ffc185ad',
@@ -874,6 +875,21 @@ return array(
       7 => 'javelin-uri',
       8 => 'javelin-routable',
     ),
+    '09c4fe2d' =>
+    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',
+    ),
     '0a3f3021' =>
     array(
       0 => 'javelin-behavior',
@@ -1254,11 +1270,6 @@ return array(
       2 => 'javelin-util',
       3 => 'phabricator-shaped-request',
     ),
-    '7319e029' =>
-    array(
-      0 => 'javelin-behavior',
-      1 => 'javelin-dom',
-    ),
     '62e18640' =>
     array(
       0 => 'javelin-install',
@@ -1331,6 +1342,11 @@ return array(
       1 => 'javelin-stratcom',
       2 => 'javelin-dom',
     ),
+    '7319e029' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-dom',
+    ),
     '76f4ebed' =>
     array(
       0 => 'javelin-install',
@@ -1442,21 +1458,6 @@ 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',

src/applications/pholio/controller/PholioMockViewController.php

@@ -94,6 +94,10 @@ final class PholioMockViewController extends PholioController {
       ->setMock($mock)
       ->setImageID($this->imageID);
 
+    $output = id(new PHUIObjectBoxView())
+      ->setHeaderText(pht('Image'))
+      ->appendChild($output);
+
     $xaction_view = id(new PholioTransactionView())
       ->setUser($this->getRequest()->getUser())
       ->setObjectPHID($mock->getPHID())

src/applications/pholio/view/PholioMockThumbGridView.php

@@ -88,12 +88,13 @@ final class PholioMockThumbGridView extends AphrontView {
       ),
       $grid);
 
-    return phutil_tag(
+    $grid = id(new PHUIBoxView())
-      'div',
+      ->addClass('pholio-mock-thumb-grid-container')
-      array(
+      ->appendChild($grid);
-        'class' => 'pholio-mock-thumb-grid-container',
+
-      ),
+    return id(new PHUIObjectBoxView())
-      $grid);
+      ->setHeaderText(pht('Mock History'))
+      ->appendChild($grid);
   }
 
 

webroot/rsrc/css/application/pholio/pholio-inline-comments.css

@@ -5,70 +5,14 @@
 .pholio-inline-comment {
   margin: 0 0 4px 0;
   padding: 8px;
-  font-size: 12px;
 }
 
 .pholio-mock-inline-comments {
-  color: #cccccc;
+  background: #fff;
-  background: #282828;
+  border-top: 1px solid {$thinblueborder};
-  overflow-x: auto;
   text-align: left;
 }
 
-.pholio-inline-comment-header {
-  color: #fff;
-  font-weight: bold;
-  margin-bottom: 4px;
-}
-
-.pholio-inline-comment-dialog-title {
-  font-weight: bold;
-  color: #fff;
-  padding-bottom: 2px;
-  margin-bottom: 6px;
-  text-align: left;
-}
-
-.pholio-inline-comment-dialog-buttons button {
-  float: right;
-  margin-left: 6px;
-}
-
-.pholio-inline-comment-dialog {
-  padding: 4px;
-}
-
-.pholio-inline-comment-dialog-textarea {
-  width: 254px;
-  height: 6em;
-  margin-bottom: 5px;
-}
-
-.pholio-new-inline-comment {
-  position: absolute;
-  border: 1px solid #000;
-  background: rgb(60, 60, 60);
-  padding: 8px 10px 8px 12px;
-  width: 260px;
-  box-shadow: 0 2px 10px 1px {$lightgreytext};
-}
-
-.pholio-inline-comment-dialog-buttons a {
-  display: none;
-}
-
-.pholio-inline-comment-draft {
-  border-style: dashed;
-  border-color: {$greytext};
-  background: #464646;
-}
-
-.pholio-inline-head-links {
-  float: right;
-  font-weight: normal;
-  color: {$greytext};
-}
-
 .pholio-mock-inline-comments a {
   font-weight: normal;
   color: {$sky};

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

@@ -2,16 +2,13 @@
  * @provides pholio-css
  */
 .pholio-mock-image-container {
-  margin-top: 8px;
-  background-color: #282828;
   text-align: center;
   vertical-align: middle;
   position: relative;
-  background: url('/rsrc/image/texture/pholio-background.gif');
+  background: url('/rsrc/image/checker_lighter.png');
 }
 
 .pholio-mock-thumb-grid-container {
-  background-color: #282828;
   padding: 12px;
   overflow-x: auto;
   overflow-y: hidden;
@@ -26,17 +23,19 @@
   cursor: pointer;
   width: 100px;
   height: 100px;
-  padding: 5px;
+  padding: 4px;
-  margin: 3px;
+  margin: 4px;
-  background: #181818;
   vertical-align: middle;
-  border: 1px solid {$greyborder};
+  border: 1px solid {$lightgreyborder};
   position: relative;
+  background: url('/rsrc/image/checker_lighter.png');
+}
+
+.device-desktop .pholio-mock-thumb-grid-item:hover {
+  border-color: {$indigo};
 }
 
-.device-desktop .pholio-mock-thumb-grid-item:hover,
 .pholio-mock-thumb-grid-current {
-  background: #383838;
   border-color: {$sky};
 }
 
@@ -54,11 +53,6 @@
   cursor: crosshair;
 }
 
-.pholio-mock-image-panel {
-  padding: 0;
-  border-top: 1px solid #333;
-}
-
 .pholio-mock-image-viewport {
   position: relative;
   margin: auto;
@@ -76,15 +70,8 @@
 }
 
 .pholio-visible-size {
-  color: #fff;
+  color: {$sky};
-}
+  font-weight: bold;
-
-.pholio-image-description {
-  color: {$greytext};
-}
-
-.pholio-image-title {
-  color: #ffffff;
 }
 
 .pholio-device-lightbox {
@@ -153,8 +140,15 @@
 
 .pholio-mock-image-header {
   position: absolute;
-  top: 4px;
+  top: 0;
-  right: 8px;
+  right: 0;
   font-size: 14px;
-  color: {$lightgreytext};
+  padding: 4px 8px;
+  background: rgba(255,255,255,.6);
+  color: {$greytext};
+}
+
+.pholio-image-title {
+  font-weight: bold;
+  color: {$bluetext};
 }