[gnome-shell/gnome-40] theme: Add focus indication for dnd switch in message list controls

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

commit 24e82e2bff7e1532262a3e7dd9946e984bbc99c8
Author: vanadiae <vanadiae35 gmail com>
Date:   Tue Jul 20 14:13:40 2021 +0200

    theme: Add focus indication for dnd switch in message list controls
    
    It currently is difficult to see what's being focused in the messages list
    currently because of that.
    
    Fixes #2447
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1920>
    (cherry picked from commit 25ece5853850683a2a29d514641a1a76d3504224)

 data/theme/gnome-shell-sass/widgets/_message-list.scss | 14 ++++++++++++++
 js/ui/calendar.js                                      |  2 ++
 2 files changed, 16 insertions(+)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss 
b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index 02d122b912..bb9239f494 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -25,6 +25,20 @@
   // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
   padding: $base_margin;
   spacing: $base_spacing * 2;
+
+  .dnd-button {
+    // We need this because the focus outline isn't inset like for the buttons
+    // so the dnd button would grow when it gets focus if we didn't change only
+    // its color when focusing.
+    border-width: 2px;
+    border-color: transparent;
+    border-radius: 99px;
+    border-style: solid;
+
+    &:focus {
+      border-color: transparentize($selected_bg_color, 0.4);
+    }
+  }
 }
 
 // message bubbles
diff --git a/js/ui/calendar.js b/js/ui/calendar.js
index 710efbac45..8ccc73d709 100644
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -954,10 +954,12 @@ class CalendarMessageList extends St.Widget {
 
         this._dndSwitch = new DoNotDisturbSwitch();
         this._dndButton = new St.Button({
+            style_class: 'dnd-button',
             can_focus: true,
             toggle_mode: true,
             child: this._dndSwitch,
             label_actor: dndLabel,
+            y_align: Clutter.ActorAlign.CENTER,
         });
         this._dndSwitch.bind_property('state',
             this._dndButton, 'checked',