From 18421e8aedb2a5f2ca609f19c96b609ac47f2504 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 bddcedf24..cd6eea7d9 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 3188d0377..e798d0bfc 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 });