[gnome-shell/wip/fmuellner/calendar-refresh: 13/15] Refine notification style

[Florian Müllner <fmuellner src gnome org>]

commit 70e18ac9b5acb45ef5dffda41e17240bcf8c2a66
Author: Florian Müllner <fmuellner gnome org>
Date:   Sun Feb 26 01:54:45 2017 +0100

    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 |   37 ++++++++++++++---------------
 data/theme/gnome-shell.css               |   37 ++++++++++++++---------------
 js/ui/calendar.js                        |    5 ++-
 js/ui/messageList.js                     |    1 +
 4 files changed, 40 insertions(+), 40 deletions(-)
---
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index 2714b92..6a3f875 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/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; }
-
-.message-secondary-bin:ltr {
-  padding-left: 8px; }
-.message-secondary-bin:rtl {
-  padding-right: 8px; }
+  color: #cccccc;
+  icon-size: 16px;
+  -st-icon-style: symbolic; }
 
 .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;
-  font-size: 1.1em; }
+  color: #f2f2f2; }
 
 .message-content {
-  padding: 8px;
-  font-size: .9em; }
+  color: #cccccc;
+  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;
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index efac28f..58a7656 100644
--- a/data/theme/gnome-shell.css
+++ b/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; }
-
-.message-secondary-bin:ltr {
-  padding-left: 8px; }
-.message-secondary-bin:rtl {
-  padding-right: 8px; }
+  color: #bebeb6;
+  icon-size: 16px;
+  -st-icon-style: symbolic; }
 
 .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;
-  font-size: 1.1em; }
+  color: #e2e2df; }
 
 .message-content {
-  padding: 8px;
-  font-size: .9em; }
+  color: #bebeb6;
+  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;
diff --git a/js/ui/calendar.js b/js/ui/calendar.js
index 9bafc03..d7d0b4b 100644
--- a/js/ui/calendar.js
+++ b/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;
@@ -957,7 +957,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);
diff --git a/js/ui/messageList.js b/js/ui/messageList.js
index 66d911d..8175711 100644
--- a/js/ui/messageList.js
+++ b/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);