Lay in more styles from "diff_full_view.png"

Summary: Aligns more styles to the `diff_full_view.png` mock.

Test Plan: {F26859}

Reviewers: chad, btrahan

Reviewed By: chad

CC: aran

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

src/applications/macro/controller/PhabricatorMacroViewController.php

@@ -68,7 +68,7 @@ final class PhabricatorMacroViewController
         id(new PhabricatorTagView())
           ->setType(PhabricatorTagView::TYPE_STATE)
           ->setName(pht('Macro Disabled'))
-          ->setBackgroundColor(PhabricatorTagView::COLOR_RED));
+          ->setBackgroundColor(PhabricatorTagView::COLOR_BLACK));
     }
 
     $is_serious = PhabricatorEnv::getEnvConfig('phabricator.serious-business');
@@ -147,22 +147,6 @@ final class PhabricatorMacroViewController
 
     $view = new PhabricatorPropertyListView();
 
-    $view->addProperty(
-      pht('Name'),
-      phutil_escape_html($macro->getName()));
-
-    $view->addProperty(
-      pht('Status'),
-      $macro->getIsDisabled()
-        ? pht('Disabled')
-        : pht('Enabled'));
-
-    $view->addProperty(
-      pht('Created'),
-      phabricator_date(
-        $macro->getDateCreated(),
-        $this->getRequest()->getUser()));
-
     if ($subscribers) {
       $sub_view = array();
       foreach ($subscribers as $subscriber) {

src/view/layout/PhabricatorHeaderView.php

@@ -37,7 +37,7 @@ final class PhabricatorHeaderView extends AphrontView {
 
     if ($this->tags) {
       $header .= phutil_render_tag(
-        'div',
+        'span',
         array(
           'class' => 'phabricator-header-tags',
         ),
@@ -45,11 +45,16 @@ final class PhabricatorHeaderView extends AphrontView {
     }
 
     return phutil_render_tag(
-      'h1',
+      'div',
       array(
-        'class' => 'phabricator-header-view',
+        'class' => 'phabricator-header-shell',
       ),
-      $header);
+      phutil_render_tag(
+        'h1',
+        array(
+          'class' => 'phabricator-header-view',
+        ),
+        $header));
   }
 
 

src/view/layout/PhabricatorTimelineView.php

@@ -12,17 +12,20 @@ final class PhabricatorTimelineView extends AphrontView {
   public function render() {
     require_celerity_resource('phabricator-timeline-view-css');
 
+    $spacer = phutil_render_tag(
+      'div',
+      array(
+        'class' => 'phabricator-timeline-event-view '.
+                   'phabricator-timeline-spacer',
+      ),
+      '');
+
     $events = array();
     foreach ($this->events as $event) {
-      $events[] = phutil_render_tag(
-        'div',
-        array(
-          'class' => 'phabricator-timeline-event-view '.
-                     'phabricator-timeline-spacer',
-        ),
-        '');
+      $events[] = $spacer;
       $events[] = $this->renderSingleView($event);
     }
+    $events[] = $spacer;
 
     return phutil_render_tag(
       'div',

webroot/rsrc/css/core/remarkup.css

@@ -314,6 +314,6 @@
 }
 
 .phabricator-image-macro-hero {
-  margin: 2em auto;
-  max-width: 90%;
+  margin: auto;
+  max-width: 95%;
 }

webroot/rsrc/css/layout/phabricator-action-list-view.css

@@ -7,17 +7,25 @@
 }
 
 .device-desktop .phabricator-action-list-view {
-  border: 1px solid #dcdcdc;
+  border: 1px solid #c0c5d1;
   padding: .5em 0;
 
   float: right;
   margin-top: 0px;
   margin-right: 1%;
   width: 20%;
-  border-radius: 2px;
+  border-radius: 3px;
   font-size: 12px;
 
-  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.10);
+  box-shadow: 0 0 1px 1px rgba(192, 197, 209, 0.5);
+}
+
+.device-desktop .phabricator-header-shell + .phabricator-action-list-view {
+  margin-top: -28px;
+}
+
+.device .phabricator-header-shell + .phabricator-action-list-view {
+  margin-top: -1px;
 }
 
 .device .phabricator-action-list-view {

webroot/rsrc/css/layout/phabricator-header-view.css

@@ -2,10 +2,21 @@
  * @provides phabricator-header-view-css
  */
 
+.phabricator-header-shell {
+  background: #e0e3ec;
+  border-width: 1px 0;
+  border-style: solid;
+  border-color: #c0c5d1;
+}
+
+.phabricator-header-shell + .phabricator-form-view {
+  border-top-width: 0;
+}
+
 .phabricator-header-view {
-  padding: 1em 2%;
+  padding: 1.25em 2%;
   font-size: 15px;
-  color: #333333;
+  color: #111111;
 }
 
 .device-desktop .phabricator-header-view {
@@ -13,6 +24,6 @@
 }
 
 .phabricator-header-tags {
+  margin-left: 1em;
   font-size: 13px;
-  float: right;
 }

webroot/rsrc/css/layout/phabricator-property-list-view.css

@@ -3,16 +3,19 @@
  */
 
 .phabricator-property-list-view {
-  border-color: #dbdbdb;
+  border-color: #c0c5d1;
   border-style: solid;
   border-width: 1px 0 0 0;
+
+  box-shadow: 0 0 1px 1px rgba(192, 197, 209, 0.3);
+  margin-top: -1px;
 }
 
 .phabricator-property-list-container {
-  border-color: #dbdbdb;
+  border-color: #c0c5d1;
   border-style: solid;
   border-width: 0 0 1px;
-  background-color: #f9f9f9;
+  background-color: #f6f6f6;
 }
 
 .device-desktop .phabricator-property-list-container {
@@ -77,16 +80,6 @@
   border-bottom: 1px solid #dbdbdb;
 }
 
-/* When we follow an action list view on the Desktop, move down 30px so the
-   action list can start slightly above the property list. This is an unusual
-   case where we have something between the header and the action/property
-   lists and we want to give it space. */
-.device-desktop .phabricator-action-list-view +
-  .phabricator-property-list-view {
-  clear: left;
-  margin-top: 30px;
-}
-
 
 /* In the common case where we immediately follow a header, move back up 30px
    so we snuggle next to the header. */

webroot/rsrc/css/layout/phabricator-timeline-view.css

@@ -2,10 +2,15 @@
  * @provides phabricator-timeline-view-css
  */
 
+.phabricator-timeline-view {
+  background: #eeedf0;
+}
+
 .phabricator-timeline-event-view {
   border-width: 0 0 0 3px;
   border-style: solid;
   border-color: #c0c5d1;
+
 }
 
 .device-desktop .phabricator-timeline-event-view {
@@ -15,7 +20,7 @@
 }
 
 .device-desktop .phabricator-timeline-spacer {
-  min-height: 10px;
+  min-height: 20px;
   border-right-width: 0;
 }
 
@@ -27,12 +32,7 @@
 .device-desktop .phabricator-timeline-wedge {
   border-bottom: 3px solid #c0c5d1;
   position: absolute;
-  width: 10px;
-}
-
-.device-desktop .phabricator-timeline-major-event
-  .phabricator-timeline-content {
-  min-height: 70px;
+  width: 20px;
 }
 
 .phabricator-timeline-content {
@@ -42,22 +42,21 @@
   border-width: 1px 0;
 }
 
-.device-desktop .phabricator-timeline-minor-event
-  .phabricator-timeline-content {
-  min-height: 23px;
-}
-
 .phabricator-timeline-title {
-  line-height: 23px;
-  min-height: 23px;
+  line-height: 27px;
+  min-height: 28px;
   position: relative;
 }
 
+.phabricator-timeline-title a {
+  font-weight: bold;
+}
+
 .device-desktop .phabricator-timeline-wedge {
-  left: -10px;
+  left: -20px;
 }
 .device-desktop .phabricator-timeline-major-event .phabricator-timeline-wedge {
-  top: 34px;
+  top: 24px;
 }
 
 .device-desktop .phabricator-timeline-minor-event .phabricator-timeline-wedge {
@@ -73,15 +72,16 @@
 .device-desktop .phabricator-timeline-major-event .phabricator-timeline-image {
   width: 50px;
   height: 50px;
-  top: 10px;
-  left: -60px;
+  top: 0px;
+  left: -70px;
 }
 
 .device-desktop .phabricator-timeline-minor-event .phabricator-timeline-image {
-  width: 25px;
-  height: 25px;
-  background-size: 25px auto;
-  left: -35px;
+  width: 30px;
+  height: 30px;
+  background-size: 30px auto;
+  left: -45px;
+  z-index: 2;
 }
 
 .phabricator-timeline-major-event .phabricator-timeline-title {
@@ -93,12 +93,12 @@
 }
 
 .phabricator-timeline-title-with-icon {
-  padding-left: 28px;
+  padding-left: 36px;
 }
 
 .phabricator-timeline-major-event .phabricator-timeline-content
   .phabricator-timeline-core-content {
-  padding: 5px;
+  padding: 10px 15px;
 }
 
 .device .phabricator-timeline-event-view {
@@ -122,8 +122,8 @@
 
 .phabricator-timeline-icon-fill {
   position: absolute;
-  width: 25px;
-  height: 25px;
+  width: 30px;
+  height: 30px;
   background-color: #c0c5d1;
   top: -1px;
   left: -3px;
@@ -131,14 +131,15 @@
 
 .phabricator-timeline-icon {
   position: absolute;
-  left: 6px;
-  top: 5px;
+  left: 8px;
+  top: 8px;
   height: 14px;
   width: 14px;
 }
 
 .phabricator-timeline-extra, .phabricator-timeline-extra a {
   font-size: 11px;
+  font-weight: normal;
   color: #888888;
 }