Update notification UI a little

Summary: Fixes T8944. Adds a small dot if notification is new along with color. Goes away when clicked. Increased font and padding for readability.

Test Plan: Send notifications from test account, review them in menu, application search, and in real-time display.

Reviewers: epriestley

Reviewed By: epriestley

Spies: Korvin

Maniphest Tasks: T8944

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

webroot/rsrc/css/aphront/notification.css

@@ -11,7 +11,7 @@
 
 .jx-notification {
   width: 240px;
-  padding: 8px 16px;
+  padding: 8px 12px;
 
   font-size: 11px;
   overflow: hidden;

webroot/rsrc/css/application/base/notification-menu.css

@@ -4,7 +4,8 @@
 
 .phabricator-notification-menu {
   background: {$page.content};
-  font-size: {$smallestfontsize};
+  font-size: {$smallerfontsize};
+  line-height: 18px;
   word-wrap: break-word;
   overflow-y: auto;
   box-shadow: {$dropshadow};
@@ -12,9 +13,8 @@
   border-radius: 3px;
 }
 
-.phabricator-notification .phabricator-notification-date {
-  margin-left: 8px;
-  color: {$lightgreytext};
+.phabricator-notification {
+  padding: 8px 12px;
 }
 
 .phabricator-notification-menu-loading {
@@ -44,11 +44,7 @@
 }
 
 .phabricator-notification-list .phabricator-notification {
-  padding: 10px 4px;
-}
-
-.phabricator-notification {
-  padding: 6px 8px;
+  padding: 8px;
 }
 
 .phabricator-notification-menu .phabricator-notification {
@@ -56,7 +52,7 @@
 }
 
 .device-desktop .phabricator-notification-menu .phabricator-notification:hover {
-  background: {$hoverblue};
+  background: {$lightgreybackground};
 }
 
 .device-desktop .phabricator-notification-menu
@@ -81,9 +77,34 @@
   color: {$lightgreytext};
 }
 
+.phabricator-notification-foot {
+  color: {$lightgreytext};
+  font-size: {$smallestfontsize};
+  line-height: 18px;
+  position: relative;
+}
+
+.phabricator-notification-unread .phabricator-notification-foot {
+  padding-left: 10px;
+}
+
+.phabricator-notification-foot .phabricator-notification-status {
+  display: none;
+}
+
+.phabricator-notification-unread .phabricator-notification-foot
+  .phabricator-notification-status {
+    font-size: 7px;
+    color: {$lightgreytext};
+    position: absolute;
+    display: inline-block;
+    top: 6px;
+    left: 0;
+}
+
 .phabricator-notification-header {
   font-weight: bold;
-  padding: 10px 8px;
+  padding: 10px 12px;
   font-size: {$smallerfontsize};
   border-bottom: 1px solid {$thinblueborder};
 }