Clean up some Conpherence header CSS

Summary: Darkens the topic, adds fun colors to action icons.

Test Plan: Hover over new action icons. See darker topic text.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

Author: Chad Little

resources/celerity/map.php

@@ -7,9 +7,9 @@
  */
 return array(
   'names' => array(
-    'conpherence.pkg.css' => '7bddd31a',
+    'conpherence.pkg.css' => 'a9b238ee',
     'conpherence.pkg.js' => '5fafd1ff',
-    'core.pkg.css' => 'dc6d08e3',
+    'core.pkg.css' => 'ee276281',
     'core.pkg.js' => '1d376fa9',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '3fb7f532',
@@ -47,7 +47,7 @@
     'rsrc/css/application/config/setup-issue.css' => 'f794cfc3',
     'rsrc/css/application/config/unhandled-exception.css' => '4c96257a',
     'rsrc/css/application/conpherence/durable-column.css' => '194ac487',
-    'rsrc/css/application/conpherence/header-pane.css' => 'bdba8a5b',
+    'rsrc/css/application/conpherence/header-pane.css' => '517de9fe',
     'rsrc/css/application/conpherence/menu.css' => '8344d122',
     'rsrc/css/application/conpherence/message-pane.css' => 'c075e8fe',
     'rsrc/css/application/conpherence/notification.css' => '6cdcc253',
@@ -144,7 +144,7 @@
     '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' => 'b1dbd620',
+    'rsrc/css/phui/phui-icon.css' => '9bab6f02',
     'rsrc/css/phui/phui-image-mask.css' => 'a8498f9c',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-info-view.css' => '28efab79',
@@ -619,7 +619,7 @@
     'config-options-css' => '0ede4c9b',
     'config-page-css' => '8798e14f',
     'conpherence-durable-column-view' => '194ac487',
-    'conpherence-header-pane-css' => 'bdba8a5b',
+    'conpherence-header-pane-css' => '517de9fe',
     'conpherence-menu-css' => '8344d122',
     'conpherence-message-pane-css' => 'c075e8fe',
     'conpherence-notification-css' => '6cdcc253',
@@ -921,7 +921,7 @@
     'phui-hovercard' => '1bd28176',
     'phui-hovercard-view-css' => 'de1a2119',
     'phui-icon-set-selector-css' => '1ab67aad',
-    'phui-icon-view-css' => 'b1dbd620',
+    'phui-icon-view-css' => '9bab6f02',
     'phui-image-mask-css' => 'a8498f9c',
     'phui-info-panel-css' => '27ea50a1',
     'phui-info-view-css' => '28efab79',

src/applications/conpherence/controller/ConpherenceController.php

@@ -72,6 +72,7 @@ protected function buildHeaderPaneContent(
             $this->getApplicationURI('update/'.$conpherence->getID()).'/')
           ->setIcon('fa-pencil')
           ->addClass('hide-on-device')
+          ->setColor('violet')
           ->setWorkflow(true));
 
       $header->addActionItem(
@@ -81,6 +82,7 @@ protected function buildHeaderPaneContent(
             '?action='.ConpherenceUpdateActions::NOTIFICATIONS)
           ->setIcon('fa-gear')
           ->addClass('hide-on-device')
+          ->setColor('pink')
           ->setWorkflow(true));
 
       $widget_key = PhabricatorConpherenceWidgetVisibleSetting::SETTINGKEY;

src/view/phui/PHUIIconCircleView.php

@@ -45,7 +45,9 @@ protected function getTagAttributes() {
     $classes[] = 'phui-icon-circle';
 
     if ($this->color) {
-      $classes[] = 'phui-icon-circle-'.$this->color;
+      $classes[] = 'hover-'.$this->color;
+    } else {
+      $classes[] = 'hover-sky';
     }
 
     if ($this->size) {
@@ -60,8 +62,7 @@ protected function getTagAttributes() {
 
   protected function getTagContent() {
     return id(new PHUIIconView())
-      ->setIcon($this->icon)
-      ->addClass($this->color);
+      ->setIcon($this->icon);
   }
 
 }

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

@@ -17,7 +17,7 @@
 }
 
 .conpherence-header-pane .phui-header-subheader {
-  color: {$lightgreyborder};
+  color: {$lightgreytext};
   padding: 0;
   font-size: 12px;
   margin: 0;
@@ -44,25 +44,22 @@
   vertical-align: middle;
 }
 
-.conpherence-header-pane .conpherence-participant-toggle.phui-icon-circle {
+.conpherence-participant-toggle.phui-icon-circle {
   text-decoration: none;
   border-color: {$sky};
   cursor: pointer;
 }
 
-.conpherence-header-pane .conpherence-participant-toggle.phui-icon-circle
-  .phui-icon-view {
+.conpherence-participant-toggle.phui-icon-circle .phui-icon-view {
     color: {$sky};
 }
 
-.hide-widgets .conpherence-header-pane
-  .conpherence-participant-toggle.phui-icon-circle {
+.hide-widgets .conpherence-participant-toggle.phui-icon-circle {
   text-decoration: none;
   border-color: {$lightblueborder};
   cursor: pointer;
 }
 
-.hide-widgets .conpherence-header-pane
-  .conpherence-participant-toggle.phui-icon-circle .phui-icon-view {
+.hide-widgets .conpherence-participant-toggle.phui-icon-circle .phui-icon-view {
     color: {$lightblueborder};
 }

webroot/rsrc/css/phui/phui-icon.css

@@ -71,16 +71,36 @@ a.phui-icon-view:hover {
   line-height: 36px;
 }
 
-a.phui-icon-circle:hover {
+a.phui-icon-circle.hover-sky:hover {
   text-decoration: none;
   border-color: {$sky};
   cursor: pointer;
 }
 
-a.phui-icon-circle:hover .phui-icon-view {
+a.phui-icon-circle.hover-sky:hover .phui-icon-view {
   color: {$sky};
 }
 
+a.phui-icon-circle.hover-violet:hover {
+  text-decoration: none;
+  border-color: {$violet};
+  cursor: pointer;
+}
+
+a.phui-icon-circle.hover-violet:hover .phui-icon-view {
+  color: {$violet};
+}
+
+a.phui-icon-circle.hover-pink:hover {
+  text-decoration: none;
+  border-color: {$pink};
+  cursor: pointer;
+}
+
+a.phui-icon-circle.hover-pink:hover .phui-icon-view {
+  color: {$pink};
+}
+
 /* - Icon in a Square ------------------------------------------------------- */
 
 .phui-icon-view.phui-icon-square {