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

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

commit 4b893148137d876620faf2787b2f62e7f5439803
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 32f1a5674c..1b84064037 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -1153,6 +1153,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 4dcdb6d7fd..45f2963c48 100644
--- a/js/ui/messageList.js
+++ b/js/ui/messageList.js
@@ -333,7 +333,10 @@ var Message = class Message {
 
         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 });