Update Conpherence full for common colors / styles

Summary: Conpherence Full modernize pass, setting standard space and colors on all widget panels. Moved menu back to 240px as the narrow column wasn't really usefull. Removed 'subtitle' on menu, seems simpler but almost under-designed. Subtitle isn't particularly useful and I plan on adding audience icons next (single, group, project, public) so I think this is the right direction.

Test Plan:
Tested with and without number columns on the menu, test with files, calendar dates, removing participants.

{F337941}

{F337942}

{F337943}

Reviewers: epriestley, btrahan

Reviewed By: btrahan

Subscribers: Korvin, epriestley

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

resources/celerity/map.php

@@ -45,11 +45,11 @@ return array(
     'rsrc/css/application/config/setup-issue.css' => '22270af2',
     'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
     'rsrc/css/application/conpherence/durable-column.css' => 'a27580c5',
-    'rsrc/css/application/conpherence/menu.css' => 'c6ac5299',
+    'rsrc/css/application/conpherence/menu.css' => '9b37a261',
-    'rsrc/css/application/conpherence/message-pane.css' => '2526107d',
+    'rsrc/css/application/conpherence/message-pane.css' => 'e78e9d3c',
     'rsrc/css/application/conpherence/notification.css' => '04a6e10a',
     'rsrc/css/application/conpherence/update.css' => '1099a660',
-    'rsrc/css/application/conpherence/widget-pane.css' => '3d575438',
+    'rsrc/css/application/conpherence/widget-pane.css' => '9efbfed0',
     'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
     'rsrc/css/application/countdown/timer.css' => '86b7b0a0',
     'rsrc/css/application/dashboard/dashboard.css' => '17937d22',
@@ -514,12 +514,12 @@ return array(
     'config-options-css' => '7fedf08b',
     'config-welcome-css' => '6abd79be',
     'conpherence-durable-column-view' => 'a27580c5',
-    'conpherence-menu-css' => 'c6ac5299',
+    'conpherence-menu-css' => '9b37a261',
-    'conpherence-message-pane-css' => '2526107d',
+    'conpherence-message-pane-css' => 'e78e9d3c',
     'conpherence-notification-css' => '04a6e10a',
     'conpherence-thread-manager' => '6a9169bb',
     'conpherence-update-css' => '1099a660',
-    'conpherence-widget-pane-css' => '3d575438',
+    'conpherence-widget-pane-css' => '9efbfed0',
     'differential-changeset-view-css' => '6a8b172a',
     'differential-core-view-css' => '7ac3cabc',
     'differential-inline-comment-editor' => '0286a1db',

src/applications/conpherence/controller/ConpherenceWidgetController.php

@@ -67,7 +67,6 @@ final class ConpherenceWidgetController extends ConpherenceController {
         'class' => 'widgets-header',
       ),
       id(new PHUIActionHeaderView())
-      ->setHeaderColor(PHUIActionHeaderView::HEADER_GREY)
       ->setHeaderTitle(pht('Participants'))
       ->setHeaderHref('#')
       ->setDropdown(true)

webroot/rsrc/css/application/conpherence/menu.css

@@ -44,11 +44,11 @@
 }
 
 .conpherence-menu-pane.phabricator-side-menu .phui-list-item-type-label {
-  padding: 12px 0 8px 6px;
+  padding: 8px 0 6px 8px;
 }
 
 .device-desktop .conpherence-layout .conpherence-menu-pane {
-  width: 204px;
+  width: 240px;
 }
 
 .device .conpherence-menu-pane {
@@ -77,7 +77,7 @@
 }
 
 .device-desktop .conpherence-content-pane {
-  margin-left: 205px;
+  margin-left: 241px;
 }
 
 .conpherence-content-pane {
@@ -93,15 +93,16 @@
 
 .conpherence-menu .conpherence-menu-item-view {
   display: block;
-  height: 46px;
+  height: 38px;
-  width: 100%;
   overflow: hidden;
   position: relative;
   text-decoration: none;
+  border-left: 3px solid transparent;
 }
 
 .conpherence-menu .conpherence-selected {
   background: {$hovergrey};
+  border-left: 3px solid {$sky};
 }
 
 .device-desktop .conpherence-menu
@@ -118,44 +119,39 @@
 }
 
 .conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-image {
-  top: 6px;
+  top: 5px;
-  left: 8px;
+  left: 6px;
   display: block;
   position: absolute;
-  width: 30px;
+  width: 24px;
-  height: 30px;
+  height: 24px;
-  background-size: 30px;
+  background-size: 24px;
   border: 2px solid #fff;
-  border-radius: 2px;
 }
 
 .conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-title {
   display: block;
-  margin-top: 8px;
+  margin-top: 10px;
-  margin-left: 50px;
+  margin-left: 40px;
   text-align: left;
   font-weight: bold;
   font-size: 13px;
   color: {$darkbluetext};
   text-shadow: 0px 1px 1px #fff;
   overflow: hidden;
-  width: 150px;
+  width: 175px;
   text-overflow: ellipsis;
 }
 
 .conpherence-menu .conpherence-menu-item-view .conpherence-menu-item-subtitle {
-  display: block;
+  display: none;
-  color: {$bluetext};
-  font-size: 11px;
-  margin-top: 2px;
-  margin-left: 50px;
 }
 
 .conpherence-menu .conpherence-menu-item-view
 .conpherence-menu-item-unread-count {
   position: absolute;
-  right: 8px;
+  right: 4px;
-  top: 15px;
+  top: 11px;
   background: {$blue};
   border-radius: 2px;
   color: #fff;

webroot/rsrc/css/application/conpherence/message-pane.css

@@ -7,7 +7,7 @@
 .loading .messages-loading-icon,
 .conpherence-layout .conpherence-no-threads {
   position: fixed;
-  left: 205px;
+  left: 241px;
   right: 241px;
   top: 76px;
   bottom: 0px;
@@ -52,7 +52,7 @@
 
 .conpherence-message-pane .conpherence-messages {
   position: fixed;
-  left: 205px;
+  left: 241px;
   right: 241px;
   top: 76px;
   bottom: 172px;
@@ -86,7 +86,7 @@
   position: fixed;
   bottom: 0;
   border-top: 1px solid {$thinblueborder};
-  left: 205px;
+  left: 241px;
   right: 241px;
 }
 

webroot/rsrc/css/application/conpherence/widget-pane.css

@@ -42,8 +42,7 @@
 }
 
 .conpherence-widget-pane .widgets-header {
-  background: #F5F5F5;
+  border-bottom: 1px solid {$thinblueborder};
-  border-bottom: 1px solid #ccc;
 }
 
 .device .conpherence-widget-pane .widgets-header {
@@ -85,28 +84,39 @@
   width: 200px;
   padding: 20px;
   text-align: center;
-  color: #555;
+  color: {$greytext};
 }
+
 .device .conpherence-widget-pane #widgets-files .no-files {
   width: 60px;
-  margin: 0px auto 0px auto;
+  margin: 0 auto 0 auto;
 }
+
 .conpherence-widget-pane #widgets-files .file-entry {
-  padding: 10px 0;
+  padding: 8px 0;
-  margin: 0 5px 0 10px;
+  margin: 0 4px 0 8px;
-  border-bottom: 1px solid #e7e7e7;
+  border-bottom: 1px solid {$thinblueborder};
 }
+
+.conpherence-widget-pane #widgets-files .file-entry a {
+  color: {$darkbluetext};
+  font-weight: bold;
+}
+
 .conpherence-widget-pane #widgets-files .file-icon {
   width: 32px;
   height: 32px;
   float: left;
-  font-size: 30px;
+  font-size: 24px;
+  color: {$blue};
+  margin: 2px 0 2px 4px;
 }
+
 .conpherence-widget-pane #widgets-files .file-title {
   display: block;
   position: relative;
   top: -4px;
-  left: 2px;
+  left: 0;
   overflow-x: hidden;
   width: 180px;
   font-weight: bold;
@@ -114,11 +124,11 @@
   white-space: nowrap;
 }
 .conpherence-widget-pane #widgets-files .file-uploaded-by {
-  color: #a1a5a9;
+  color: {$lightgreytext};
   position: relative;
-  top: 0px;
+  top: 0;
-  left: 2px;
+  left: 0;
-  width: 170px;
+  width: 180px;
   font-size: 11px;
 }
 
@@ -147,7 +157,7 @@
 .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
 .aphront-multi-column-column {
   background: white;
-  border-right: 1px solid #bfbfbf;
+  border-right: 1px solid {$thinblueborder};
   text-align: center;
 }
 .device-phone .conpherence-widget-pane #widgets-calendar
@@ -220,28 +230,18 @@
 
 .conpherence-widget-pane #widgets-calendar .day-header {
   overflow: hidden;
-  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
+  border-top: 1px solid {$thinblueborder};
-  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+  padding: 8px 8px 0px 8px;
-  border-top: 1px solid #e7e7e7;
-  border-bottom: 1px solid #d7d7d7;
-  padding: 5px 10px 5px 10px;
-}
-
-.conpherence-widget-pane #widgets-calendar .day-header.today {
-  background-image: linear-gradient(to bottom, #3b86c4, #2b628f);
-  background-image: -webkit-linear-gradient(top, #3b86c4, #2b628f);
-  border-top: none;
-  border-bottom: none;
 }
 
 .conpherence-widget-pane #widgets-calendar .day-header.today .day-name,
 .conpherence-widget-pane #widgets-calendar .day-header.today .day-date {
-  color: #fff;
+  color: {$sky};
 }
 
 .conpherence-widget-pane #widgets-calendar .day-header .day-name {
   float: left;
-  color: #555759;
+  color: {$bluetext};
   font-weight: bold;
   text-transform: uppercase;
   font-size: 11px;
@@ -249,12 +249,12 @@
 
 .conpherence-widget-pane #widgets-calendar .day-header .day-date {
   float: right;
-  color: #555759;
+  color: {$lightbluetext};
   font-size: 11px;
 }
 
 .conpherence-widget-pane #widgets-calendar .top-border {
-  border-top: 1px solid #E7E7E7;
+  border-top: 1px solid {$thinblueborder};
 }
 
 .conpherence-widget-pane #widgets-calendar .user-status {
@@ -264,24 +264,24 @@
 
 .conpherence-widget-pane #widgets-calendar .user-status .icon {
   border-radius: 8px;
-  height: 14px;
+  height: 8px;
-  width: 14px;
+  width: 8px;
-  margin-top: 7px;
+  margin-top: 4px;
   float: left;
 }
 
 .conpherence-widget-pane #widgets-calendar .sporadic .icon {
-  background-color: rgb(222, 226, 232);
+  background-color: {$orange};
 }
 
 .conpherence-widget-pane #widgets-calendar .away .icon {
-  background-color: rgb(102, 204, 255);
+  background-color: {$red};
 }
 
 .conpherence-widget-pane #widgets-calendar .user-status .description {
   width: 195px;
   text-overflow: ellipsis;
-  margin: 0 0 0px 20px;
+  margin: 0 0 0 16px;
 }
 
 .conpherence-widget-pane #widgets-calendar .user-status .participant {