Redesign Application Search

Summary: This moves aphront-side-nav to use same table css display as profile nav. Slightly less code to support. Cleans up AppSearch UI, think I've gotten all the edge cases here, but bang on it, can hold until after release cut.

Test Plan: Config, Maniphest, Differential, Diffusion, Home.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '8b87d014',
+    'core.pkg.css' => 'a90e12a7',
     'core.pkg.js' => '13c7e56a',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '3fb7f532',
@@ -24,7 +24,7 @@ return array(
     'rsrc/css/aphront/multi-column.css' => 'fd18389d',
     'rsrc/css/aphront/notification.css' => '3f6c89c9',
     'rsrc/css/aphront/panel-view.css' => '8427b78d',
-    'rsrc/css/aphront/phabricator-nav-view.css' => 'ac79a758',
+    'rsrc/css/aphront/phabricator-nav-view.css' => '370da55a',
     'rsrc/css/aphront/table-view.css' => '832656fd',
     'rsrc/css/aphront/tokenizer.css' => '056da01b',
     'rsrc/css/aphront/tooltip.css' => '1a07aea8',
@@ -99,6 +99,7 @@ return array(
     'rsrc/css/application/releeph/releeph-preview-branch.css' => 'b7a6f4a5',
     'rsrc/css/application/releeph/releeph-request-differential-create-dialog.css' => '8d8b92cd',
     'rsrc/css/application/releeph/releeph-request-typeahead.css' => '667a48ae',
+    'rsrc/css/application/search/application-search-view.css' => 'b3e0e5ef',
     'rsrc/css/application/search/search-results.css' => '7dea472c',
     'rsrc/css/application/slowvote/slowvote.css' => 'a94b7230',
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
@@ -113,22 +114,22 @@ return array(
     'rsrc/css/font/font-lato.css' => 'c7ccd872',
     'rsrc/css/font/phui-font-icon-base.css' => '6449bce8',
     'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
-    'rsrc/css/layout/phabricator-side-menu-view.css' => 'dd849797',
     'rsrc/css/layout/phabricator-source-code-view.css' => 'cbeef983',
     'rsrc/css/phui/calendar/phui-calendar-day.css' => '572b1893',
     'rsrc/css/phui/calendar/phui-calendar-list.css' => 'fcc9fb41',
     'rsrc/css/phui/calendar/phui-calendar-month.css' => '8e10e92c',
-    'rsrc/css/phui/calendar/phui-calendar.css' => 'daadaf39',
+    'rsrc/css/phui/calendar/phui-calendar.css' => '477acfaa',
     'rsrc/css/phui/phui-action-list.css' => 'c5eba19d',
     'rsrc/css/phui/phui-action-panel.css' => '91c7b835',
     'rsrc/css/phui/phui-badge.css' => '3baef8db',
+    'rsrc/css/phui/phui-basic-nav-view.css' => 'bfc71dd0',
     'rsrc/css/phui/phui-big-info-view.css' => 'bd903741',
     'rsrc/css/phui/phui-box.css' => '5c8387cf',
     'rsrc/css/phui/phui-button.css' => '4a5fbe3d',
     'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
-    'rsrc/css/phui/phui-crumbs-view.css' => 'b4fa5755',
+    'rsrc/css/phui/phui-crumbs-view.css' => '9dac418c',
     'rsrc/css/phui/phui-curtain-view.css' => '7148ae25',
-    'rsrc/css/phui/phui-document-pro.css' => 'a3730b94',
+    'rsrc/css/phui/phui-document-pro.css' => 'dc3d46ed',
     'rsrc/css/phui/phui-document-summary.css' => '9ca48bdf',
     'rsrc/css/phui/phui-document.css' => '715aedfb',
     'rsrc/css/phui/phui-feed-story.css' => 'aa49845d',
@@ -136,7 +137,7 @@ return array(
     'rsrc/css/phui/phui-form-view.css' => 'fab0a10f',
     'rsrc/css/phui/phui-form.css' => 'aac1d51d',
     'rsrc/css/phui/phui-head-thing.css' => 'fd311e5f',
-    'rsrc/css/phui/phui-header-view.css' => '4c7dd8f5',
+    'rsrc/css/phui/phui-header-view.css' => '06385974',
     'rsrc/css/phui/phui-hovercard.css' => 'de1a2119',
     'rsrc/css/phui/phui-icon-set-selector.css' => '1ab67aad',
     'rsrc/css/phui/phui-icon.css' => 'd0534b71',
@@ -148,7 +149,7 @@ return array(
     'rsrc/css/phui/phui-object-item-list-view.css' => '8d99e42b',
     'rsrc/css/phui/phui-pager.css' => 'bea33d23',
     'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
-    'rsrc/css/phui/phui-profile-menu.css' => 'c8557f33',
+    'rsrc/css/phui/phui-profile-menu.css' => '8a3fc181',
     'rsrc/css/phui/phui-property-list-view.css' => '6d8e58ac',
     'rsrc/css/phui/phui-remarkup-preview.css' => '1a8f2591',
     'rsrc/css/phui/phui-segment-bar-view.css' => '46342871',
@@ -541,6 +542,7 @@ return array(
     'aphront-tokenizer-control-css' => '056da01b',
     'aphront-tooltip-css' => '1a07aea8',
     'aphront-typeahead-control-css' => 'd4f16145',
+    'application-search-view-css' => 'b3e0e5ef',
     'auth-css' => '0877ed6e',
     'bulk-job-css' => 'df9c1d4a',
     'changeset-view-manager' => 'a2828756',
@@ -784,7 +786,7 @@ return array(
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => '4a021c10',
     'phabricator-main-menu-view' => 'b623169f',
-    'phabricator-nav-view-css' => 'ac79a758',
+    'phabricator-nav-view-css' => '370da55a',
     'phabricator-notification' => 'ccf1cbf8',
     'phabricator-notification-css' => '3f6c89c9',
     'phabricator-notification-menu-css' => 'f31c0bde',
@@ -794,7 +796,6 @@ return array(
     'phabricator-remarkup-css' => '523d34bb',
     'phabricator-search-results-css' => '7dea472c',
     'phabricator-shaped-request' => '7cbe244b',
-    'phabricator-side-menu-view-css' => 'dd849797',
     'phabricator-slowvote-css' => 'a94b7230',
     'phabricator-source-code-view-css' => 'cbeef983',
     'phabricator-standard-page-view' => 'e709f6d0',
@@ -824,26 +825,27 @@ return array(
     'phriction-document-css' => '4282e4ad',
     'phui-action-panel-css' => '91c7b835',
     'phui-badge-view-css' => '3baef8db',
+    'phui-basic-nav-view-css' => 'bfc71dd0',
     'phui-big-info-view-css' => 'bd903741',
     'phui-box-css' => '5c8387cf',
     'phui-button-css' => '4a5fbe3d',
-    'phui-calendar-css' => 'daadaf39',
+    'phui-calendar-css' => '477acfaa',
     'phui-calendar-day-css' => '572b1893',
     'phui-calendar-list-css' => 'fcc9fb41',
     'phui-calendar-month-css' => '8e10e92c',
     'phui-chart-css' => '6bf6f78e',
-    'phui-crumbs-view-css' => 'b4fa5755',
+    'phui-crumbs-view-css' => '9dac418c',
     'phui-curtain-view-css' => '7148ae25',
     'phui-document-summary-view-css' => '9ca48bdf',
     'phui-document-view-css' => '715aedfb',
-    'phui-document-view-pro-css' => 'a3730b94',
+    'phui-document-view-pro-css' => 'dc3d46ed',
     'phui-feed-story-css' => 'aa49845d',
     'phui-font-icon-base-css' => '6449bce8',
     'phui-fontkit-css' => '9cda225e',
     'phui-form-css' => 'aac1d51d',
     'phui-form-view-css' => 'fab0a10f',
     'phui-head-thing-view-css' => 'fd311e5f',
-    'phui-header-view-css' => '4c7dd8f5',
+    'phui-header-view-css' => '06385974',
     'phui-hovercard' => '1bd28176',
     'phui-hovercard-view-css' => 'de1a2119',
     'phui-icon-set-selector-css' => '1ab67aad',
@@ -857,7 +859,7 @@ return array(
     'phui-object-item-list-view-css' => '8d99e42b',
     'phui-pager-css' => 'bea33d23',
     'phui-pinboard-view-css' => '2495140e',
-    'phui-profile-menu-css' => 'c8557f33',
+    'phui-profile-menu-css' => '8a3fc181',
     'phui-property-list-view-css' => '6d8e58ac',
     'phui-remarkup-preview-css' => '1a8f2591',
     'phui-segment-bar-view-css' => '46342871',
@@ -2252,7 +2254,7 @@ return array(
       'phui-header-view-css',
       'phabricator-filetree-view-css',
       'phabricator-nav-view-css',
-      'phabricator-side-menu-view-css',
+      'phui-basic-nav-view-css',
       'phui-crumbs-view-css',
       'phui-object-item-list-view-css',
       'global-drag-and-drop-css',

resources/celerity/packages.php

@@ -113,7 +113,7 @@ return array(
     'phui-header-view-css',
     'phabricator-filetree-view-css',
     'phabricator-nav-view-css',
-    'phabricator-side-menu-view-css',
+    'phui-basic-nav-view-css',
     'phui-crumbs-view-css',
     'phui-object-item-list-view-css',
     'global-drag-and-drop-css',

src/applications/calendar/query/PhabricatorCalendarEventSearchEngine.php

@@ -369,13 +369,13 @@ final class PhabricatorCalendarEventSearchEngine
       ->setName($from->format('F Y'));
 
     $header = id(new PHUIHeaderView())
+      ->setProfileHeader(true)
       ->setHeader($from->format('F Y'));
 
     return id(new PhabricatorApplicationSearchResultView())
       ->setCrumbs($crumbs)
       ->setHeader($header)
-      ->setContent($month_view)
-      ->setCollapsed(true);
+      ->setContent($month_view);
   }
 
   private function buildCalendarDayView(
@@ -443,13 +443,13 @@ final class PhabricatorCalendarEventSearchEngine
     );
 
     $header = id(new PHUIHeaderView())
+      ->setProfileHeader(true)
       ->setHeader($from->format('D, F jS'));
 
     return id(new PhabricatorApplicationSearchResultView())
       ->setCrumbs($crumbs)
       ->setHeader($header)
-      ->setContent($day_view)
-      ->setCollapsed(true);
+      ->setContent($day_view);
   }
 
   private function getDisplayYearAndMonthAndDay(

src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php

@@ -194,6 +194,7 @@ final class CelerityDefaultPostprocessor
 
       // Background color for "most" themes.
       'page.background' => '#f8f8fb',
+      'page.sidenav' => '#f0f0f2',
 
       'menu.profile.text' => 'rgba(255,255,255,.8)',
       'menu.profile.text.selected' => 'rgba(255,255,255,1)',

src/applications/search/controller/PhabricatorApplicationSearchController.php

@@ -193,10 +193,12 @@ final class PhabricatorApplicationSearchController
     }
 
     $header = id(new PHUIHeaderView())
-      ->setHeader($title);
+      ->setHeader($title)
+      ->setProfileHeader(true);
 
     $box = id(new PHUIObjectBoxView())
-      ->setHeader($header);
+      ->setHeader($header)
+      ->addClass('application-search-results');
 
     if ($run_query || $named_query) {
       $box->setShowHide(
@@ -281,9 +283,8 @@ final class PhabricatorApplicationSearchController
 
           if ($pager->willShowPagingControls()) {
             $pager_box = id(new PHUIBoxView())
-              ->addPadding(PHUI::PADDING_MEDIUM)
-              ->addMargin(PHUI::MARGIN_LARGE)
-              ->setBorder(true)
+              ->setColor(PHUIBoxView::GREY)
+              ->addClass('application-search-pager')
               ->appendChild($pager);
             $body[] = $pager_box;
           }
@@ -308,7 +309,8 @@ final class PhabricatorApplicationSearchController
     }
 
     $crumbs = $parent
-      ->buildApplicationCrumbs();
+      ->buildApplicationCrumbs()
+      ->setBorder(true);
 
     if ($more_crumbs) {
       $query_uri = $engine->getQueryResultsPageURI($saved_query->getQueryKey());
@@ -321,12 +323,15 @@ final class PhabricatorApplicationSearchController
       $crumbs->addTextCrumb($title);
     }
 
+    require_celerity_resource('application-search-view-css');
+
     return $this->newPage()
       ->setApplicationMenu($this->buildApplicationMenu())
       ->setTitle(pht('Query: %s', $title))
       ->setCrumbs($crumbs)
       ->setNavigation($nav)
-      ->appendChild($body);
+      ->appendChild($body)
+      ->addClass('application-search-view');
   }
 
   private function processEditRequest() {
@@ -403,19 +408,28 @@ final class PhabricatorApplicationSearchController
 
     $crumbs = $parent
       ->buildApplicationCrumbs()
-      ->addTextCrumb(pht('Saved Queries'), $engine->getQueryManagementURI());
+      ->addTextCrumb(pht('Saved Queries'), $engine->getQueryManagementURI())
+      ->setBorder(true);
 
     $nav->selectFilter('query/edit');
 
+    $header = id(new PHUIHeaderView())
+      ->setHeader(pht('Saved Queries'))
+      ->setProfileHeader(true);
+
     $box = id(new PHUIObjectBoxView())
-      ->setHeaderText(pht('Saved Queries'))
-      ->setObjectList($list);
+      ->setHeader($header)
+      ->setObjectList($list)
+      ->addClass('application-search-results');
+
+    require_celerity_resource('application-search-view-css');
 
     return $this->newPage()
       ->setApplicationMenu($this->buildApplicationMenu())
       ->setTitle(pht('Saved Queries'))
       ->setCrumbs($crumbs)
       ->setNavigation($nav)
+      ->addClass('application-search-view')
       ->appendChild($box);
   }
 

src/view/control/AphrontCursorPagerView.php

@@ -148,7 +148,7 @@ final class AphrontCursorPagerView extends AphrontView {
         ->setHref($first_uri)
         ->setIcon($icon)
         ->addClass('mml')
-        ->setColor(PHUIButtonView::SIMPLE)
+        ->setColor(PHUIButtonView::GREY)
         ->setText(pht('First'));
     }
 
@@ -161,7 +161,7 @@ final class AphrontCursorPagerView extends AphrontView {
         ->setHref($prev_uri)
         ->setIcon($icon)
         ->addClass('mml')
-        ->setColor(PHUIButtonView::SIMPLE)
+        ->setColor(PHUIButtonView::GREY)
         ->setText(pht('Prev'));
     }
 
@@ -174,7 +174,7 @@ final class AphrontCursorPagerView extends AphrontView {
         ->setHref($next_uri)
         ->setIcon($icon, false)
         ->addClass('mml')
-        ->setColor(PHUIButtonView::SIMPLE)
+        ->setColor(PHUIButtonView::GREY)
         ->setText(pht('Next'));
     }
 

src/view/layout/AphrontSideNavFilterView.php

@@ -193,24 +193,18 @@ final class AphrontSideNavFilterView extends AphrontView {
       }
     }
 
-    require_celerity_resource('phabricator-side-menu-view-css');
+    require_celerity_resource('phui-basic-nav-view-css');
 
     return $this->renderFlexNav();
   }
 
   private function renderFlexNav() {
     require_celerity_resource('phabricator-nav-view-css');
+    require_celerity_resource('phui-profile-menu-css');
 
     $nav_classes = array();
     $nav_classes[] = 'phabricator-nav';
 
-    if ($this->getIsProfileMenu()) {
-      require_celerity_resource('phui-profile-menu-css');
-      // No class, we're going to put it on the shell instead.
-    } else {
-      $nav_classes[] = 'phabricator-basic-nav';
-    }
-
     $nav_id = null;
     $drag_id = null;
     $content_id = celerity_generate_unique_node_id();
@@ -284,16 +278,6 @@ final class AphrontSideNavFilterView extends AphrontView {
 
     $nav_classes = array_merge($nav_classes, $this->classes);
 
-    $footer = $this->footer;
-
-    if ($this->getIsProfileMenu()) {
-      $internal_footer = $footer;
-      $external_footer = null;
-    } else {
-      $internal_footer = null;
-      $external_footer = $footer;
-    }
-
     $menu = phutil_tag(
       'div',
       array(
@@ -312,26 +296,28 @@ final class AphrontSideNavFilterView extends AphrontView {
           array(
             $crumbs,
             $this->renderChildren(),
-            $internal_footer,
+            $this->footer,
           )),
       ));
 
+    $classes = array();
+    $classes[] = 'phui-navigation-shell';
+
     if ($this->getIsProfileMenu()) {
-      $shell = phutil_tag(
-        'div',
-        array(
-          'class' => 'phui-navigation-shell phui-profile-menu',
-        ),
-        array(
-          $menu,
-        ));
+      $classes[] = 'phui-profile-menu';
     } else {
-      $shell = array(
-        $menu,
-        $external_footer,
-      );
+      $classes[] = 'phui-basic-nav';
     }
 
+    $shell = phutil_tag(
+      'div',
+      array(
+        'class' => implode(' ', $classes),
+      ),
+      array(
+        $menu,
+      ));
+
     return $shell;
   }
 

src/view/phui/PHUIObjectBoxView.php

@@ -204,6 +204,7 @@ final class PHUIObjectBoxView extends AphrontTagView {
         ->addSigil('reveal-content')
         ->setID($hide_action_id)
         ->setStyle($hide_style)
+        ->setIcon('fa-search')
         ->setHref($this->showHideHref)
         ->setMetaData(
           array(
@@ -216,6 +217,7 @@ final class PHUIObjectBoxView extends AphrontTagView {
         ->setTag('a')
         ->addSigil('reveal-content')
         ->setStyle($show_style)
+        ->setIcon('fa-search')
         ->setHref('#')
         ->setID($show_action_id)
         ->setMetaData(

src/view/phui/PHUIPagerView.php

@@ -204,7 +204,7 @@ final class PHUIPagerView extends AphrontView {
       $rendered_links[] = id(new PHUIButtonView())
         ->setTag('a')
         ->setHref($link)
-        ->setColor(PHUIButtonView::SIMPLE)
+        ->setColor(PHUIButtonView::GREY)
         ->addClass('mml')
         ->addClass($class)
         ->setText($label);

src/view/phui/calendar/PHUICalendarDayView.php

@@ -191,6 +191,10 @@ final class PHUICalendarDayView extends AphrontView {
       ->addColumn($table_box, 'thirds phui-day-view-column')
       ->setFluidLayout(true);
 
+    $layout = id(new PHUIBoxView())
+      ->appendChild($layout)
+      ->addClass('phui-calendar-box');
+
     return $layout;
   }
 

src/view/phui/calendar/PHUICalendarMonthView.php

@@ -183,7 +183,8 @@ final class PHUICalendarMonthView extends AphrontView {
     $box = id(new PHUIObjectBoxView())
       ->setHeader($this->renderCalendarHeader($this->getDateTime()))
       ->appendChild($table)
-      ->setFormErrors($warnings);
+      ->setFormErrors($warnings)
+      ->addClass('phui-calendar-box');
     if ($this->error) {
       $box->setInfoView($this->error);
 

webroot/rsrc/css/aphront/phabricator-nav-view.css

@@ -20,23 +20,21 @@
   display: block;
 }
 
-.device-desktop .phabricator-side-menu-home .phabricator-nav-content,
-.device-tablet .phabricator-side-menu-home .phabricator-nav-content {
-  margin-left: 205px;
+/* Home Sidenav */
+.phui-basic-nav.phui-navigation-shell
+  .phabricator-side-menu-home .phabricator-nav-local {
+    padding-top: 16px;
+    padding-right: 0;
+    background-color: transparent;
+    width: 205px;
 }
 
-.phabricator-nav-local {
-  width: 205px;
-  position: absolute;
-  left: 0;
-  white-space: nowrap;
-  overflow-x: hidden;
-  overflow-y: auto;
-  margin-top: 8px;
-}
-
-.phabricator-side-menu-home .phabricator-nav-local {
-  margin-top: 16px;
+.device-phone .phui-basic-nav.phui-navigation-shell
+  .phabricator-side-menu-home .phabricator-nav-local {
+    padding-top: 0;
+    padding-right: 0;
+    background-color: transparent;
+    width: auto;
 }
 
 .phabricator-nav-drag {
@@ -68,8 +66,10 @@
   margin-left: 212px;
 }
 
-.device-desktop .has-local-nav .phabricator-nav-content {
-  margin-left: 205px;
+.device-desktop .phui-navigation-shell .has-drag-nav .phabricator-nav-local {
+  width: 205px;
+  padding: 0;
+  background: transparent;
 }
 
 .device-phone .phabricator-side-menu-home .phabricator-nav-content {

webroot/rsrc/css/application/search/application-search-view.css

@@ -0,0 +1,50 @@
+/**
+ * @provides application-search-view-css
+ */
+
+.application-search-view {
+  background-color: #fff;
+}
+
+.application-search-view .application-search-results.phui-object-box {
+  margin: 0;
+  padding: 0 16px 24px;
+}
+
+.application-search-view .application-search-results .phui-profile-header {
+  padding: 16px 8px;
+  border-bottom: 1px solid {$thinblueborder};
+}
+
+.application-search-results
+  .phui-profile-header.phui-header-shell .phui-header-header {
+  font-size: 20px;
+}
+
+.device-phone.application-search-view .application-search-results
+  .phui-profile-header {
+    padding: 12px 0;
+}
+
+.device-phone .application-search-results
+  .phui-profile-header.phui-header-shell .phui-header-header {
+  font-size: 16px;
+}
+
+.device-phone.application-search-view
+  .application-search-results.phui-object-box {
+    padding: 0 12px;
+  }
+
+.application-search-view .phui-box-border {
+  border: none;
+}
+
+.application-search-pager {
+  margin: 0 16px 16px 16px;
+  padding: 8px;
+}
+
+.device-phone .application-search-pager {
+  margin: 12px;
+}

webroot/rsrc/css/layout/phabricator-side-menu-view.css

@@ -1,59 +0,0 @@
-/**
- * @provides phabricator-side-menu-view-css
- */
-
-.phabricator-basic-nav .phabricator-side-menu .phui-list-item-view {
-  display: block;
-  white-space: nowrap;
-  text-decoration: none;
-  font-size: 13px;
-  -webkit-font-smoothing: antialiased;
-}
-
-.phabricator-basic-nav .phabricator-side-menu .phui-list-item-href {
-  display: block;
-  padding: 6px 8px 6px 24px;
-  color: {$darkbluetext};
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-
-.phabricator-basic-nav .phabricator-side-menu .phui-list-item-icon {
-  margin-left: -12px;
-  text-align: center;
-  width: 24px;
-}
-
-.phabricator-basic-nav .phabricator-side-menu .phui-list-item-selected {
-  background-color: rgba({$alphablack},.05);
-  border-left: 4px solid {$sky};
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-  font-weight: bold;
-}
-
-.device-desktop .phabricator-basic-nav .phabricator-side-menu
-  .phui-list-item-selected
-  a.phui-list-item-href:hover {
-  background-color: rgba({$alphablack},.05);
-}
-
-.phabricator-basic-nav .phabricator-side-menu .phui-list-item-selected
-  .phui-list-item-href {
-  padding-left: 20px;
-}
-
-.phabricator-basic-nav .phabricator-side-menu .phui-list-item-type-label {
-  padding: 6px 8px 4px 12px;
-  color: {$darkbluetext};
-  text-transform: uppercase;
-  font-size: 12px;
-  font-weight: bold;
-  border-style: solid;
-}
-
-.device-desktop .phabricator-basic-nav .phabricator-side-menu
-  a.phui-list-item-href:hover {
-  text-decoration: none;
-  background-color: rgba({$alphablack},.07);
-}

webroot/rsrc/css/phui/calendar/phui-calendar.css

@@ -8,6 +8,13 @@
   background: rgba(255, 255, 255, 0.75);
 }
 
+.application-search-view div.phui-calendar-box {
+  border-left: 1px solid {$thinblueborder};
+  border-right: 1px solid {$thinblueborder};
+  border-bottom: 1px solid {$lightblueborder};
+  border-radius: 0;
+}
+
 .phui-calendar-list a {
   color: {$greytext};
 }

webroot/rsrc/css/phui/phui-basic-nav-view.css

@@ -0,0 +1,107 @@
+/**
+ * @provides phui-basic-nav-view-css
+ */
+
+.device-desktop .phui-navigation-shell {
+  display: table;
+  width: 100%;
+  height: calc(100vh - {$menu.main.height});
+}
+
+.device-desktop .phui-navigation-shell .phabricator-nav {
+  display: table-row;
+}
+
+.device-desktop .phui-navigation-shell .phabricator-nav-local {
+  display: table-cell;
+  position: relative;
+  vertical-align: top;
+  width: {$menu.profile.width};
+  max-width: {$menu.profile.width};
+  margin-top: 0;
+  overflow: hidden;
+}
+
+.phui-basic-nav.phui-navigation-shell .phabricator-nav-local {
+  width: 205px;
+  padding-top: 4px;
+  padding-right: 8px;
+}
+
+.phui-basic-nav .phabricator-side-menu {
+  background-color: {$page.sidenav};
+}
+
+.phui-two-column-view .phui-basic-nav.phui-navigation-shell
+  .phabricator-nav-local {
+    width: {$menu.profile.width};
+    max-width: {$menu.profile.width};
+    padding-right: 0;
+    padding-top: 0;
+}
+
+.phui-two-column-view .phui-basic-nav .phabricator-side-menu {
+  background-color: #fff;
+}
+
+.phui-basic-nav .phabricator-side-menu {
+  background-color: {$page.sidenav};
+}
+
+.phui-basic-nav .phabricator-side-menu .phui-list-item-view {
+  display: block;
+  white-space: nowrap;
+  text-decoration: none;
+  font-size: 13px;
+  -webkit-font-smoothing: antialiased;
+}
+
+.phui-basic-nav .phabricator-side-menu .phui-list-item-href {
+  display: block;
+  padding: 6px 8px 6px 24px;
+  color: {$darkbluetext};
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis
+}
+
+.phui-basic-nav .phabricator-side-menu .phui-list-item-icon {
+  margin-left: -12px;
+  text-align: center;
+  width: 24px;
+}
+
+.phui-basic-nav .phabricator-side-menu .phui-list-item-selected {
+  background-color: rgba({$alphablack},.05);
+  border-left: 4px solid {$sky};
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  font-weight: bold;
+}
+
+.device-desktop .phui-basic-nav .phabricator-side-menu
+  .phui-list-item-selected
+  a.phui-list-item-href:hover {
+  background-color: rgba({$alphablack},.05);
+}
+
+.phui-basic-nav .phabricator-side-menu .phui-list-item-selected
+  .phui-list-item-href {
+  padding-left: 20px;
+}
+
+.phui-basic-nav .phabricator-side-menu .phui-list-item-type-label {
+  padding: 6px 8px 4px 12px;
+  color: {$darkbluetext};
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: bold;
+  border-style: solid;
+}
+
+.device-desktop .phui-basic-nav .phabricator-side-menu
+  a.phui-list-item-href:hover {
+  text-decoration: none;
+  background-color: rgba({$alphablack},.07);
+}

webroot/rsrc/css/phui/phui-crumbs-view.css

@@ -5,11 +5,12 @@
 .phui-crumbs-view {
   overflow: hidden;
   vertical-align: top;
-  padding: 0 20px 0 28px;
+  padding: 0 12px 0 20px;
   /* TODO: Position this over the slider for Differential's file tree view.
      Remove this once that gets sorted out. */
   position: relative;
   -webkit-font-smoothing: antialiased;
+  background-color: {$page.background};
 }
 
 .phui-crumbs-view,

webroot/rsrc/css/phui/phui-document-pro.css

@@ -37,7 +37,7 @@
 }
 
 .device-phone .phui-document-view.phui-document-view-pro {
-  padding: 0 8px;
+  padding: 0 12px;
   margin: 0 auto;
 }
 
@@ -132,6 +132,11 @@ a.button.phui-document-toc {
   color: #000;
 }
 
+.device-phone .phui-document-view.phui-document-view-pro .phui-header-tall
+  .phui-header-header {
+    font-size: 18px;
+  }
+
 .device-phone .phui-document-view-pro .phui-header-subheader {
   display: block;
   padding: 8px 0 0 0;

webroot/rsrc/css/phui/phui-header-view.css

@@ -323,6 +323,7 @@ body .phui-header-shell.phui-bleed-header
 .phui-profile-header.phui-header-shell .phui-header-header {
   font-family: 'Aleo', {$fontfamily};
   font-size: 24px;
+  color: #000;
 }
 
 .phui-profile-header .phui-header-col3 {

webroot/rsrc/css/phui/phui-profile-menu.css

@@ -2,26 +2,6 @@
  * @provides phui-profile-menu-css
  */
 
-.device-desktop .phui-navigation-shell.phui-profile-menu {
-  display: table;
-  width: 100%;
-  height: calc(100vh - {$menu.main.height});
-}
-
-.device-desktop .phui-profile-menu .phabricator-nav {
-  display: table-row;
-}
-
-.device-desktop .phui-profile-menu .phabricator-nav-local {
-  display: table-cell;
-  position: relative;
-  vertical-align: top;
-  width: {$menu.profile.width};
-  max-width: {$menu.profile.width};
-  margin-top: 0;
-  overflow: hidden;
-}
-
 .device-desktop .phui-profile-menu-collapsed .phabricator-nav-local {
   width: {$menu.profile.width.collapsed};
   max-width: {$menu.profile.width.collapsed};
@@ -32,9 +12,12 @@
   margin-left: 0;
 }
 
+.phui-profile-menu .phui-basic-nav {
+  width: 205px;
+}
+
 .phui-profile-menu .phabricator-side-menu {
   background: #525867;
-  box-shadow: inset -2px 0 2px rgba({$alphablack}, 0.150);
   width: 240px;
 }