Conpherence CSS Widget Tweaks

Summary: Semi-decent pass at cleaning up the Conpherence dropdown and widgets. Will continue to update but have diff questions.

Test Plan: Testing Conpherence in my sb.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

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

src/__celerity_resource_map__.php

@@ -916,15 +916,6 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/application/config/config-options.css',
   ),
-  'conpherence-header-pane-css' =>
-  array(
-    'uri' => '/res/6d7bfc7e/rsrc/css/application/conpherence/header-pane.css',
-    'type' => 'css',
-    'requires' =>
-    array(
-    ),
-    'disk' => '/rsrc/css/application/conpherence/header-pane.css',
-  ),
   'conpherence-menu-css' =>
   array(
     'uri' => '/res/c955650e/rsrc/css/application/conpherence/menu.css',
@@ -954,7 +945,7 @@ celerity_register_resource_map(array(
   ),
   'conpherence-widget-pane-css' =>
   array(
-    'uri' => '/res/999e21da/rsrc/css/application/conpherence/widget-pane.css',
+    'uri' => '/res/d3829b07/rsrc/css/application/conpherence/widget-pane.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -2935,7 +2926,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-core-buttons-css' =>
   array(
-    'uri' => '/res/8853cc81/rsrc/css/core/buttons.css',
+    'uri' => '/res/073fc5eb/rsrc/css/core/buttons.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3983,7 +3974,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    '7b1cbdd9' =>
+    'c3ade478' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -4032,7 +4023,7 @@ celerity_register_resource_map(array(
         41 => 'phabricator-property-list-view-css',
         42 => 'phabricator-tag-view-css',
       ),
-      'uri' => '/res/pkg/7b1cbdd9/core.pkg.css',
+      'uri' => '/res/pkg/c3ade478/core.pkg.css',
       'type' => 'css',
     ),
     '77faef00' =>
@@ -4226,16 +4217,16 @@ celerity_register_resource_map(array(
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => '6b1fccc6',
-    'aphront-dialog-view-css' => '7b1cbdd9',
+    'aphront-dialog-view-css' => 'c3ade478',
-    'aphront-error-view-css' => '7b1cbdd9',
+    'aphront-error-view-css' => 'c3ade478',
-    'aphront-form-view-css' => '7b1cbdd9',
+    'aphront-form-view-css' => 'c3ade478',
-    'aphront-list-filter-view-css' => '7b1cbdd9',
+    'aphront-list-filter-view-css' => 'c3ade478',
-    'aphront-pager-view-css' => '7b1cbdd9',
+    'aphront-pager-view-css' => 'c3ade478',
-    'aphront-panel-view-css' => '7b1cbdd9',
+    'aphront-panel-view-css' => 'c3ade478',
-    'aphront-table-view-css' => '7b1cbdd9',
+    'aphront-table-view-css' => 'c3ade478',
-    'aphront-tokenizer-control-css' => '7b1cbdd9',
+    'aphront-tokenizer-control-css' => 'c3ade478',
-    'aphront-tooltip-css' => '7b1cbdd9',
+    'aphront-tooltip-css' => 'c3ade478',
-    'aphront-typeahead-control-css' => '7b1cbdd9',
+    'aphront-typeahead-control-css' => 'c3ade478',
     'differential-changeset-view-css' => 'dd27a69b',
     'differential-core-view-css' => 'dd27a69b',
     'differential-inline-comment-editor' => '9488bb69',
@@ -4249,7 +4240,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => 'dd27a69b',
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => '7b1cbdd9',
+    'global-drag-and-drop-css' => 'c3ade478',
     'inline-comment-summary-css' => 'dd27a69b',
     'javelin-aphlict' => '77faef00',
     'javelin-behavior' => 'c1359b5d',
@@ -4323,56 +4314,56 @@ celerity_register_resource_map(array(
     'javelin-util' => 'c1359b5d',
     'javelin-vector' => 'c1359b5d',
     'javelin-workflow' => 'c1359b5d',
-    'lightbox-attachment-css' => '7b1cbdd9',
+    'lightbox-attachment-css' => 'c3ade478',
     'maniphest-task-summary-css' => '6b1fccc6',
     'maniphest-transaction-detail-css' => '6b1fccc6',
-    'phabricator-action-list-view-css' => '7b1cbdd9',
+    'phabricator-action-list-view-css' => 'c3ade478',
-    'phabricator-application-launch-view-css' => '7b1cbdd9',
+    'phabricator-application-launch-view-css' => 'c3ade478',
     'phabricator-busy' => '77faef00',
     'phabricator-content-source-view-css' => 'dd27a69b',
-    'phabricator-core-buttons-css' => '7b1cbdd9',
+    'phabricator-core-buttons-css' => 'c3ade478',
-    'phabricator-core-css' => '7b1cbdd9',
+    'phabricator-core-css' => 'c3ade478',
-    'phabricator-crumbs-view-css' => '7b1cbdd9',
+    'phabricator-crumbs-view-css' => 'c3ade478',
-    'phabricator-directory-css' => '7b1cbdd9',
+    'phabricator-directory-css' => 'c3ade478',
     'phabricator-drag-and-drop-file-upload' => '9488bb69',
     'phabricator-dropdown-menu' => '77faef00',
     'phabricator-file-upload' => '77faef00',
-    'phabricator-filetree-view-css' => '7b1cbdd9',
+    'phabricator-filetree-view-css' => 'c3ade478',
-    'phabricator-flag-css' => '7b1cbdd9',
+    'phabricator-flag-css' => 'c3ade478',
-    'phabricator-form-view-css' => '7b1cbdd9',
+    'phabricator-form-view-css' => 'c3ade478',
-    'phabricator-header-view-css' => '7b1cbdd9',
+    'phabricator-header-view-css' => 'c3ade478',
     'phabricator-hovercard' => '77faef00',
-    'phabricator-jump-nav' => '7b1cbdd9',
+    'phabricator-jump-nav' => 'c3ade478',
     'phabricator-keyboard-shortcut' => '77faef00',
     'phabricator-keyboard-shortcut-manager' => '77faef00',
-    'phabricator-main-menu-view' => '7b1cbdd9',
+    'phabricator-main-menu-view' => 'c3ade478',
     'phabricator-menu-item' => '77faef00',
-    'phabricator-nav-view-css' => '7b1cbdd9',
+    'phabricator-nav-view-css' => 'c3ade478',
     'phabricator-notification' => '77faef00',
-    'phabricator-notification-css' => '7b1cbdd9',
+    'phabricator-notification-css' => 'c3ade478',
-    'phabricator-notification-menu-css' => '7b1cbdd9',
+    'phabricator-notification-menu-css' => 'c3ade478',
-    'phabricator-object-item-list-view-css' => '7b1cbdd9',
+    'phabricator-object-item-list-view-css' => 'c3ade478',
     'phabricator-object-selector-css' => 'dd27a69b',
     'phabricator-phtize' => '77faef00',
     'phabricator-prefab' => '77faef00',
     'phabricator-project-tag-css' => '6b1fccc6',
-    'phabricator-property-list-view-css' => '7b1cbdd9',
+    'phabricator-property-list-view-css' => 'c3ade478',
-    'phabricator-remarkup-css' => '7b1cbdd9',
+    'phabricator-remarkup-css' => 'c3ade478',
     'phabricator-shaped-request' => '9488bb69',
-    'phabricator-side-menu-view-css' => '7b1cbdd9',
+    'phabricator-side-menu-view-css' => 'c3ade478',
-    'phabricator-standard-page-view' => '7b1cbdd9',
+    'phabricator-standard-page-view' => 'c3ade478',
-    'phabricator-tag-view-css' => '7b1cbdd9',
+    'phabricator-tag-view-css' => 'c3ade478',
     'phabricator-textareautils' => '77faef00',
     'phabricator-tooltip' => '77faef00',
-    'phabricator-transaction-view-css' => '7b1cbdd9',
+    'phabricator-transaction-view-css' => 'c3ade478',
-    'phabricator-zindex-css' => '7b1cbdd9',
+    'phabricator-zindex-css' => 'c3ade478',
-    'phui-form-css' => '7b1cbdd9',
+    'phui-form-css' => 'c3ade478',
-    'phui-icon-view-css' => '7b1cbdd9',
+    'phui-icon-view-css' => 'c3ade478',
-    'spacing-css' => '7b1cbdd9',
+    'spacing-css' => 'c3ade478',
-    'sprite-apps-large-css' => '7b1cbdd9',
+    'sprite-apps-large-css' => 'c3ade478',
-    'sprite-gradient-css' => '7b1cbdd9',
+    'sprite-gradient-css' => 'c3ade478',
-    'sprite-icons-css' => '7b1cbdd9',
+    'sprite-icons-css' => 'c3ade478',
-    'sprite-menu-css' => '7b1cbdd9',
+    'sprite-menu-css' => 'c3ade478',
-    'syntax-highlighting-css' => '7b1cbdd9',
+    'syntax-highlighting-css' => 'c3ade478',
   ),
 ));

src/applications/conpherence/controller/ConpherenceViewController.php

@@ -104,7 +104,6 @@ final class ConpherenceViewController extends
   }
 
   private function renderHeaderPaneContent() {
-    require_celerity_resource('conpherence-header-pane-css');
     $conpherence = $this->getConpherence();
     $header = $this->buildHeaderPaneContent($conpherence);
     return hsprintf('%s', $header);

src/applications/conpherence/controller/ConpherenceWidgetController.php

@@ -168,9 +168,9 @@ final class ConpherenceWidgetController extends
         'button',
         array(
           'type' => 'submit',
-          'class' => 'notifications-update grey',
+          'class' => 'notifications-update',
         ),
-        pht('Update Notifications'))
+        pht('Save'))
     );
 
     return phabricator_form(
@@ -263,18 +263,15 @@ final class ConpherenceWidgetController extends
               $user,
               $time_str);
 
+          $secondary_info = pht('%s, %s',
+            $handles[$status->getUserPHID()]->getName(), $epoch_range);
+
           $content[] = phutil_tag(
             'div',
             array(
-              'class' => 'user-status '.$status->getTextStatus(),
+              'class' => 'pm user-status '.$status->getTextStatus(),
             ),
             array(
-              phutil_tag(
-                'div',
-                array(
-                  'class' => 'epoch-range'
-                ),
-                $epoch_range),
               phutil_tag(
                 'div',
                 array(
@@ -286,17 +283,24 @@ final class ConpherenceWidgetController extends
                 array(
                   'class' => 'description'
                 ),
-                $status->getTerseSummary($user)),
-              phutil_tag(
-                'div',
                 array(
-                  'class' => 'participant'
+                  $status->getTerseSummary($user),
-                ),
+                  phutil_tag(
-                $handles[$status->getUserPHID()]->getName())
+                    'div',
+                    array(
+                      'class' => 'participant'
+                    ),
+                    $secondary_info)))
               ));
           $first_status_of_the_day = false;
+        } else {
+          $content[] = phutil_tag(
+            'div',
+            array('class' => 'no-events pmt pml'),
+            pht('No Events Scheduled.'));
         }
       }
+
       // we didn't get a status on this day so add a spacer
       if ($first_status_of_the_day) {
         $content[] = phutil_tag(

src/applications/conpherence/view/ConpherenceFileWidgetView.php

@@ -32,7 +32,7 @@ final class ConpherenceFileWidgetView extends ConpherenceWidgetView {
       // system generated files don't have authors
       if ($file->getAuthorPHID()) {
         $who_done_it_text = pht(
-          'by %s ',
+          'By %s ',
           $files_authors[$file->getPHID()]->renderLink());
       }
       $date_text = phabricator_relative_date(
@@ -44,32 +44,7 @@ final class ConpherenceFileWidgetView extends ConpherenceWidgetView {
         array(
           'class' => 'file-uploaded-by'
         ),
-        pht('Uploaded %s%s.', $who_done_it_text, $date_text));
+        pht('%s%s.', $who_done_it_text, $date_text));
-
-      $extra = '';
-      if ($file->isViewableImage()) {
-        $meta = $file_view->getMetadata();
-        $extra = javelin_tag(
-          'a',
-          array(
-            'sigil' => 'lightboxable',
-            'meta' => $meta,
-            'class' => 'file-extra',
-          ),
-          phutil_tag(
-            'img',
-            array(
-              'src' => $file->getThumb160x120URI()
-            ),
-            ''));
-      }
-
-      $divider = phutil_tag(
-        'div',
-        array(
-          'class' => 'divider'
-        ),
-        '');
 
       $files_html[] = phutil_tag(
         'div',
@@ -79,9 +54,7 @@ final class ConpherenceFileWidgetView extends ConpherenceWidgetView {
         array(
           $icon_view,
           $file_view,
-          $who_done_it,
+          $who_done_it
-          $extra,
-          $divider
         ));
     }
 

src/applications/conpherence/view/ConpherencePeopleWidgetView.php

@@ -49,13 +49,7 @@ final class ConpherencePeopleWidgetView extends ConpherenceWidgetView {
           array(
             'class' => 'add-people-widget',
           ),
-          $add_widget),
+          $add_widget)
-        phutil_tag(
-          'div',
-          array(
-            'class' => 'divider'
-          ),
-          '')
       ));
 
     $body = array();

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

@@ -1,6 +0,0 @@
-/**
- * @provides conpherence-header-pane-css
- */
-
-.device .conpherence-header-pane {
-}

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

@@ -22,7 +22,7 @@
 
 .conpherence-widget-pane .aphront-form-input {
   margin: 0;
-  width: 85%;
+  width: 100%;
 }
 
 .conpherence-widget-pane .aphront-form-inset {
@@ -45,15 +45,14 @@
   margin-right: 0px;
   border-top-color: #000;
 }
-.conpherence-widget-pane .widgets-header  a:hover {
+
-  text-decoration: none;
-}
 .device-desktop .conpherence-layout .device-widgets-selector {
   display: none;
 }
 
 .dropdown-menu-frame {
-  width: 229px !important;
+  width: 200px !important;
+  margin-top: 4px;
 }
 
 .conpherence-widget-pane .widgets-body {
@@ -64,9 +63,13 @@
   top: 74px;
 }
 
+#widgets-settings {
+ padding: 3px 6px;
+}
+
 .device-desktop .conpherence-widget-pane .widgets-body {
-  top: 104px;
+  top: 106px;
-  width: 280px;
+  width: 240px;
 }
 
 /* files widget */
@@ -78,12 +81,11 @@
   color: #555;
 }
 .conpherence-widget-pane #widgets-files .file-entry {
-  padding: 12px 0px 14px 0px;
+  padding: 10px 0;
+  margin: 0 5px 0 10px;
+  border-bottom: 1px solid #e7e7e7;
 }
 .conpherence-widget-pane #widgets-files .file-icon {
-  position: relative;
-  top: 0px;
-  left: 8px;
   width: 32px;
   height: 32px;
   float: left;
@@ -92,38 +94,21 @@
   display: block;
   position: relative;
   top: -4px;
-  left: 20px;
+  left: 10px;
   overflow-x: hidden;
-  width: 170px;
+  width: 165px;
   font-weight: bold;
+  text-overflow: ellipsis;
 }
 .conpherence-widget-pane #widgets-files .file-uploaded-by {
   color: #a1a5a9;
   position: relative;
   top: 0px;
-  left: 20px;
+  left: 10px;
   width: 170px;
   font-size: 11px;
 }
 
-.conpherence-widget-pane #widgets-files .file-extra {
-  display: block;
-  height: 120px;
-  width: 120px;
-  margin: 8px 0px 8px 52px;
-  border: 1px solid #7289b7;
-  box-shadow: 0 0px 5px rgba(0,0,0,.25);
-  background: #fff;
-}
-
-.conpherence-widget-pane #widgets-files .divider {
-  float: left;
-  clear: both;
-  width: 170px;
-  margin: 8px 0px 0px 50px;
-  border: 1px dashed #bfbfbf;
-}
-
 .device .conpherence-widget-pane #widgets-files .file-title,
 .device .conpherence-widget-pane #widgets-files .file-uploaded-by {
   width: 82%;
@@ -156,6 +141,11 @@
   float: left;
   clear: none;
 }
+
+.conpherence-widget-pane .no-events {
+  color: #999;
+}
+
 .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
 .aphront-multi-column-column-last {
   border-right: 0;
@@ -206,8 +196,7 @@
   padding: 5px 0px 5px 0px;
 }
 .conpherence-widget-pane #widgets-calendar .day-header {
-  float: left;
+  overflow: hidden;
-  clear: both;
   background-color: #d8dce2;
   border-top: 1px solid #bfbfbf;
   border-bottom: 1px solid #bfbfbf;
@@ -220,11 +209,15 @@
 }
 .conpherence-widget-pane #widgets-calendar .day-header .day-name {
   float: left;
-  clear: none;
+  color: #555759;
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 11px;
 }
 .conpherence-widget-pane #widgets-calendar .day-header .day-date {
   float: right;
-  clear: none;
+  color: #555759;
+  font-size: 11px;
 }
 
 .conpherence-widget-pane #widgets-calendar .divider {
@@ -245,24 +238,12 @@
   width: 100%;
 }
 
-.conpherence-widget-pane #widgets-calendar .user-status {
-  float: left;
-  clear: both;
-  height: 60px;
-  width: 240px;
-}
-.device .conpherence-widget-pane #widgets-calendar .user-status {
-  width: 100%;
-}
-
 .conpherence-widget-pane #widgets-calendar .user-status .icon {
-  border-radius: 10px;
+  border-radius: 8px;
-  position: relative;
+  height: 14px;
-  top: 24px;
+  width: 14px;
-  left: 10px;
+  margin-top: 7px;
-  height: 16px;
+  float: left;
-  width: 16px;
-  box-shadow: 0px 0px 1px #000;
 }
 
 .conpherence-widget-pane #widgets-calendar .sporadic .icon {
@@ -273,29 +254,17 @@
   background-color: rgb(102, 204, 255);
 }
 
-.conpherence-widget-pane #widgets-calendar .user-status .epoch-range {
-  float: right;
-  font-style: italic;
-  position: relative;
-  top: 24px;
-  right: 10px;
-  font-size: 11px;
-}
-
 .conpherence-widget-pane #widgets-calendar .user-status .description {
-  position: relative;
+  width: 195px;
-  left: 40px;
+  float: left;
-  top: 0px;
+  text-overflow: ellipsis;
-  width: 220px;
+  margin: 0 0 10px 10px;
 }
 
 .conpherence-widget-pane #widgets-calendar .user-status .participant {
-  position: relative;
-  left: 40px;
-  top: 0px;
-  font-style: italic;
   font-size: 11px;
-  width: 220px;
+  color: #888;
+  padding-top: 2px;
 }
 
 .device .conpherence-widget-pane #widgets-calendar .user-status .description,
@@ -314,80 +283,51 @@
 }
 
 /* people widget */
-.conpherence-widget-pane .people-widget-header {
-  float: left;
-  width: 240px;
-}
-.conpherence-widget-pane .people-widget-header .divider {
-  float: left;
-  clear: both;
-  width: 220px;
-  margin: 0px 0px 0px 10px;
-  border: 1px dashed #bfbfbf;
-}
-.device .conpherence-widget-pane .people-widget-header .divider {
-  width: 96%;
-  margin: 0px 0px 0px 2%;
-}
 .conpherence-widget-pane .people-widget-header .add-people-widget {
-  float: left;
+  padding: 10px 0 5px 0;
-  padding: 10px 0px 10px 0px;
+  overflow: hidden;
-  width: 240px;
-}
-.device .conpherence-widget-pane .people-widget-header,
-.device .conpherence-widget-pane .people-widget-header .add-people-widget {
-  width: 100%;
-}
-.conpherence-widget-pane .add-people-widget .aphront-form-input {
-  width: 100%;
 }
+
 .conpherence-widget-pane .people-widget-header .add-people-widget
 .aphront-form-control-tokenizer {
   float: left;
-  width: 142px;
+  width: 150px;
   padding: 0px 0px 0px 10px
 }
+
 .device .conpherence-widget-pane .people-widget-header .add-people-widget
 .aphront-form-control-tokenizer {
   width: 70%;
 }
+
 .conpherence-widget-pane .people-widget-header .add-people-widget
 .people-add-button {
   float: right;
   margin: 2px 8px 0px 0px;
   padding: 3px 16px 4px 16px;
 }
-@-moz-document url-prefix() {
-  .conpherence-widget-pane .people-widget-header .add-people-widget
-  .people-add-button {
-    margin: -1px 10px 0px 0px;
-  }
-}
-.conpherence-widget-pane .person-entry {
-  float: left;
-  width: 230px;
-  clear: both;
-  padding: 10px 0px 0px 8px;
-}
 
-.device .conpherence-widget-pane .person-entry {
+.conpherence-widget-pane .person-entry {
-  width: 98%;
+  clear: both;
-  padding: 10px 0px 0px 2%;
+  padding: 5px 0 0 10px;
 }
 
 .conpherence-widget-pane .person-entry a {
   float: left;
-  clear: none;
-  font-size: 14px;
   font-weight: bold;
-  width: 124px;
+  line-height: 20px;
+}
+
+.conpherence-widget-pane .person-entry a img {
+  height: 35px;
+  width: 35px;
 }
 
 .conpherence-widget-pane .person-entry .pic {
   float: left;
   clear: left;
-  margin: 0px 10px 0px 0px;
+  margin: 0 8px 0 0;
-  width: 50px;
+  width: 35px;
   padding: 0;
 }
 
@@ -395,12 +335,12 @@
   float: right;
   clear: right;
   margin: 0;
-  width: 34px;
+  width: 20px;
-  height: 36px;
+  height: 20px;
   text-align: center;
   font-size: 22px;
   font-weight: bold;
-  padding: 8px 0px 8px 0px;
+  padding: 8px 0 8px 0p
 }
 
 .conpherence-widget-pane .person-entry .remove:hover {
@@ -418,5 +358,5 @@
 /* settings widget */
 .conpherence-widget-pane .title-update,
 .conpherence-widget-pane .notifications-update {
-  margin: 2px 0px 0px 8px;
+  margin: 3px 0px 0px 4px;
 }

webroot/rsrc/css/core/buttons.css

@@ -82,9 +82,12 @@ body a.button:active {
 button.grey:active,
 a.grey:active,
 button.grey_active,
-a.dropdown-open {
+a.button.dropdown-open {
   background-color: #7d7d7d;
   box-shadow: inset 0 0 4px rgba(0,0,0,.2);
+}
+
+a.dropdown-open {
   color: #777;
 }
 
@@ -140,29 +143,36 @@ button.link:hover {
 .dropdown-menu-frame {
   position: absolute;
   width: 240px;
-  background: #f6f6f6;
+  background: #fff;
   border: 1px solid #999;
   margin-top: -1px;
+  padding: 5px 0;
 
-  box-shadow: 1px 3px 1px rgba(0, 0, 0, 0.25);
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
-  -moz-box-shadow: 1px 3px 1px rgba(0, 0, 0, 0.25);
+  border: 1px solid #d7d7d7;
-  -webkit-box-shadow: 1px 3px 1px rgba(0, 0, 0, 0.25);
+  border-radius: 3px;
 }
 
 .dropdown-menu-frame a,
 .dropdown-menu-frame span {
   display: block;
-  font-size: 11px;
+  padding: 2px 10px;
-  padding: 4px 8px;
+  clear: both;
+  line-height: 20px;
+  color: #333333;
+  white-space: nowrap;
 }
 
 .dropdown-menu-frame span {
-  color: #666666;
+  color: #999;
 }
 
 .dropdown-menu-frame a:hover {
   background: #005588;
+  background-image: linear-gradient(to bottom, #3b86c4, #2b628f);
+  background-image: -webkit-linear-gradient(top, #3b86c4, #2b628f);
   color: white;
+  cursor: pointer;
   text-decoration: none;
 }