From 4b893148137d876620faf2787b2f62e7f5439803 Mon Sep 17 00:00:00 2001
From: Joonas Henriksson <joonas.henriksson@gmail.com>
Date: Tue, 19 Nov 2019 19:40:09 +0200
Subject: [PATCH] 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 32f1a5674..1b8406403 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 4dcdb6d7f..45f2963c4 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 });