[gnome-shell] theme: Add message close button styling

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

commit 18421e8aedb2a5f2ca609f19c96b609ac47f2504
Author: Joonas Henriksson <joonas henriksson gmail com>
Date:   Tue Nov 19 19:40:09 2019 +0200

    theme: Add message close button styling
    
    Since the notification message close button had no border, or mouse
    over effect, there was no way to determine whether the mouse cursor
    were over the button.
    
    Improve this by adding a message-close-button class for the close
    button, and a styling for its hovered state, based on media control
    button styling.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/855

 data/theme/gnome-shell-sass/_common.scss | 5 +++++
 js/ui/messageList.js                     | 5 ++++-
 2 files changed, 9 insertions(+), 1 deletion(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index bddcedf242..cd6eea7d94 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -1152,6 +1152,11 @@ StScrollBar {
             padding: 10px;
           }
 
+          .message-close-button {
+            color: lighten($fg_color, 15%);
+            &:hover { color: darken($fg_color, 10%); }
+          }
+
           .message-media-control {
             padding: 12px;
             color: lighten($fg_color, 15%);
diff --git a/js/ui/messageList.js b/js/ui/messageList.js
index 3188d0377f..e798d0bfc3 100644
--- a/js/ui/messageList.js
+++ b/js/ui/messageList.js
@@ -357,7 +357,10 @@ var Message = GObject.registerClass({
 
         let closeIcon = new St.Icon({ icon_name: 'window-close-symbolic',
                                       icon_size: 16 });
-        this._closeButton = new St.Button({ child: closeIcon, opacity: 0 });
+        this._closeButton = new St.Button({
+            style_class: 'message-close-button',
+            child: closeIcon, opacity: 0,
+        });
         titleBox.add_actor(this._closeButton);
 
         this._bodyStack = new St.Widget({ x_expand: true });