little style tweaks to css and content

app/assets/stylesheets/apps.css.erb

@@ -131,9 +131,9 @@
 }
 
 .back-to-mapping {
-  margin: 1em;
+  margin: 1em auto;
   width: auto;
-  max-width: 100%;
+  max-width: 960px;
   box-sizing: border-box;
 }
 

app/assets/stylesheets/clean.css.erb

@@ -215,6 +215,9 @@
     background-position: -128px 0;
     margin-right: 10px; // make it look more natural next to the account menu icon
 }
+.notificationsIcon:hover {
+    background-position: -128px -32px;
+}
 .importDialog:hover {
     background-position: 0 -32px;
 }
@@ -226,7 +229,6 @@
 }
 .addMap:hover {
     background-position: -96px -32px;
-    margin-right:10px;
 }
 
 
@@ -474,7 +476,7 @@
     background-position: -32px 0;
 }
 
-.zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .takeScreenshot:hover .tooltips, .sidebarFilterIcon:hover .tooltipsUnder, .sidebarForkIcon:hover .tooltipsUnder, .addMap:hover .tooltipsUnder, .authenticated .sidebarAccountIcon:hover .tooltipsUnder,
+.zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .takeScreenshot:hover .tooltips, .sidebarFilterIcon:hover .tooltipsUnder, .sidebarForkIcon:hover .tooltipsUnder, .notificationsIcon:hover .tooltipsUnder, .addMap:hover .tooltipsUnder, .authenticated .sidebarAccountIcon:hover .tooltipsUnder,
  .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove, .chat-button:hover .tooltips, .importDialog:hover .tooltipsUnder, .starMap:hover .tooltipsAbove, .openMetacodeSwitcher:hover .tooltipsAbove, .pinCarousel:not(.isPinned):hover .tooltipsAbove.helpPin, .pinCarousel.isPinned:hover .tooltipsAbove.helpUnpin  {
     display: block;
 }
@@ -538,6 +540,9 @@
 .sidebarFilterIcon .tooltipsUnder {
     margin-left: -4px;
 }
+.notificationsIcon .tooltipsUnder {
+  left: -20px;
+}
 
 .sidebarForkIcon .tooltipsUnder {
     margin-left: -34px;
@@ -615,7 +620,7 @@
     border-bottom: 5px solid transparent;
 }
 
-.importDialog div:after, .sidebarFilterIcon div:after, .sidebarForkIcon div:after, .addMap div:after, .sidebarAccountIcon .tooltipsUnder:after {
+.importDialog div:after, .sidebarFilterIcon div:after, .sidebarForkIcon div:after, .addMap div:after, .sidebarAccountIcon .tooltipsUnder:after, .notificationsIcon div:after {
     content: '';
     position: absolute;
     right: 40%;
@@ -629,6 +634,9 @@
 .sidebarFilterIcon div:after {
     right: 37% !important;
 }
+.notificationsIcon div:after {
+  right: 46% !important;
+}
 
 .mapInfoIcon div:after, .openCheatsheet div:after, .starMap div:after, .openMetacodeSwitcher div:after, .pinCarousel div:after {
    content: '';
@@ -785,8 +793,8 @@
     background-position: -96px 0;
 }
 .exploreMapsCenter .notificationsLink .exploreMapsIcon {
-    background-image: url(<%= asset_path 'user_sprite.png' %>);
+    background-image: url(<%= asset_path 'topright_sprite.png' %>);
-    background-position: 0 -128px;
+    background-position: -128px 0;
 }
 .authedApps:hover .exploreMapsIcon, .authedApps.active .exploreMapsIcon {
     background-position-x: -32px;
@@ -807,7 +815,7 @@
     background-position: -128px -32px;
 }
 .notificationsLink:hover .exploreMapsIcon, .notificationsLink.active .exploreMapsIcon {
-    background-position-x: -32px;
+    background-position-y: -32px;
 }
 
 .mapsWrapper {

app/assets/stylesheets/notifications.scss.erb

@@ -24,10 +24,11 @@ $unread_notifications_dot_size: 8px;
   .notificationPage,
   .notificationsPage {
     width: auto;
-    max-width: 100%;
+    max-width: 960px;
     box-sizing: border-box;
-    margin: 1em;
+    margin: 1em auto;
     margin-top: 1em + $menu_bar_height;
+    font-family: 'din-regular', Sans-Serif;
 
     & > .title {
       border-bottom: 1px solid #eee;
@@ -57,14 +58,13 @@ $unread_notifications_dot_size: 8px;
     .notification-read-unread {
       display: inline-block;
       vertical-align: top;
-      font-weight: 300;
     }
 
     &.unread {
       .notification-body,
       .notification-subject,
       .notification-read-unread {
-        font-weight: bold;
+        font-family: 'din-medium', Sans-Serif;
       }
     }
   }

app/views/layouts/_upperelements.html.erb

@@ -72,7 +72,7 @@
   <% end %>
 
   <% if current_user.present? %>
-    <%= link_to notifications_path, target: '_blank', class: "notificationsIcon upperRightEl upperRightIcon #{user_has_unread_notifications? ? 'unread' : 'read'}" do %>
+    <%= link_to notifications_path, class: "notificationsIcon upperRightEl upperRightIcon #{user_has_unread_notifications? ? 'unread' : 'read'}" do %>
       <div class="tooltipsUnder">
         Notifications
       </div>

app/views/notifications/index.html.erb

@@ -25,6 +25,9 @@
           </div>
         </li>
       <% end %>
+      <% if @notifications.count == 0 %>
+        You have ZERO unread notifications. Huzzah!
+      <% end %>
     </ul>
   </div>
   <%= render partial: 'shared/back_to_mapping' %>