Refine notification style

Update the notification style according to the latest mockups:
 - make notification icons smaller and prefer symbolic variants
 - remove background box when not hovered/focused
 - increase spacing between elements
 - use normal text sizes

https://bugzilla.gnome.org/show_bug.cgi?id=775763

data/theme/gnome-shell-high-contrast.css

@@ -868,54 +868,53 @@ StScrollBar {
     background-color: #0d0d0d; }
 
 .message-list-sections {
-  spacing: 1.5em; }
+  spacing: 1em; }
 
 .message-list-section,
 .message-list-section-list {
-  spacing: 0.7em; }
+  spacing: 0.4em; }
 
 .message {
-  background-color: #0d0d0d;
   border-radius: 3px; }
   .message:hover, .message:focus {
-    background-color: #262626; }
+    background-color: #0d0d0d; }
 
 .message-icon-bin {
-  padding: 8px 0px 8px 8px; }
+  padding: 10px 3px 10px 10px; }
   .message-icon-bin:rtl {
-    padding: 8px 8px 8px 0px; }
+    padding: 10px 10px 10px 3px; }
 
 .message-icon-bin > StIcon {
-  icon-size: 32px; }
+  color: #cccccc;
-
+  icon-size: 16px;
-.message-secondary-bin:ltr {
+  -st-icon-style: symbolic; }
-  padding-left: 8px; }
-.message-secondary-bin:rtl {
-  padding-right: 8px; }
 
 .message-secondary-bin {
-  color: #999999; }
+  padding: 0 12px; }
+
+.message-secondary-bin > .event-time {
+  color: #999999;
+  font-size: 0.7em; }
 
 .message-secondary-bin > StIcon {
   icon-size: 16px; }
 
 .message-title {
-  font-weight: bold;
+  color: #f2f2f2; }
-  font-size: 1.1em; }
 
 .message-content {
-  padding: 8px;
+  color: #cccccc;
-  font-size: .9em; }
+  padding: 10px; }
 
 .message-media-control {
-  padding: 6px; }
+  padding: 12px; }
   .message-media-control:last-child:ltr {
     padding-right: 18px; }
   .message-media-control:last-child:rtl {
     padding-left: 18px; }
 
 .media-message-cover-icon {
-  icon-size: 32px; }
+  icon-size: 48px !important; }
   .media-message-cover-icon.fallback {
     color: #1a1a1a;
     background-color: #000;

data/theme/gnome-shell-sass

@@ -1 +1 @@
-Subproject commit 7f6d89bfcd5fa1c4238eed83dcab75949df72a4d
+Subproject commit a172894788ec73c82be9aa6d29243809fdb0111d

data/theme/gnome-shell.css

@@ -868,54 +868,53 @@ StScrollBar {
     background-color: #454c4c; }
 
 .message-list-sections {
-  spacing: 1.5em; }
+  spacing: 1em; }
 
 .message-list-section,
 .message-list-section-list {
-  spacing: 0.7em; }
+  spacing: 0.4em; }
 
 .message {
-  background-color: #454c4c;
   border-radius: 3px; }
   .message:hover, .message:focus {
-    background-color: #5d6767; }
+    background-color: #454c4c; }
 
 .message-icon-bin {
-  padding: 8px 0px 8px 8px; }
+  padding: 10px 3px 10px 10px; }
   .message-icon-bin:rtl {
-    padding: 8px 8px 8px 0px; }
+    padding: 10px 10px 10px 3px; }
 
 .message-icon-bin > StIcon {
-  icon-size: 32px; }
+  color: #bebeb6;
-
+  icon-size: 16px;
-.message-secondary-bin:ltr {
+  -st-icon-style: symbolic; }
-  padding-left: 8px; }
-.message-secondary-bin:rtl {
-  padding-right: 8px; }
 
 .message-secondary-bin {
-  color: #8e8e80; }
+  padding: 0 12px; }
+
+.message-secondary-bin > .event-time {
+  color: #8e8e80;
+  font-size: 0.7em; }
 
 .message-secondary-bin > StIcon {
   icon-size: 16px; }
 
 .message-title {
-  font-weight: bold;
+  color: #e2e2df; }
-  font-size: 1.1em; }
 
 .message-content {
-  padding: 8px;
+  color: #bebeb6;
-  font-size: .9em; }
+  padding: 10px; }
 
 .message-media-control {
-  padding: 6px; }
+  padding: 12px; }
   .message-media-control:last-child:ltr {
     padding-right: 18px; }
   .message-media-control:last-child:rtl {
     padding-left: 18px; }
 
 .media-message-cover-icon {
-  icon-size: 32px; }
+  icon-size: 48px !important; }
   .media-message-cover-icon.fallback {
     color: #515a5a;
     background-color: #393f3f;

js/ui/calendar.js

@@ -20,7 +20,7 @@ const MSECS_IN_DAY = 24 * 60 * 60 * 1000;
 const SHOW_WEEKDATE_KEY = 'show-weekdate';
 const ELLIPSIS_CHAR = '\u2026';
 
-const MESSAGE_ICON_SIZE = 32;
+const MESSAGE_ICON_SIZE = 16;
 
 // alias to prevent xgettext from picking up strings translated in GTK+
 const gtk30_ = Gettext_gtk30.gettext;
@@ -958,7 +958,8 @@ const NotificationSection = new Lang.Class({
 
     _createTimeLabel: function(datetime) {
         let label = new St.Label({ style_class: 'event-time',
-                                   x_align: Clutter.ActorAlign.START });
+                                   x_align: Clutter.ActorAlign.START,
+                                   y_align: Clutter.ActorAlign.END });
         label.connect('notify::mapped', () => {
             if (label.mapped)
                 label.text = Util.formatTimeSpan(datetime);

js/ui/messageList.js

@@ -318,6 +318,7 @@ const Message = new Lang.Class({
 
         this._iconBin = new St.Bin({ style_class: 'message-icon-bin',
                                      y_expand: true,
+                                     y_align: St.Align.START,
                                      visible: false });
         hbox.add_actor(this._iconBin);