[gnome-shell] quickSettings: Color header icon if checked

[Marge Bot <marge-bot src gnome org>]

commit 3ce3034fdd1268507a025b5e71aa5c12454b47a6
Author: Florian Müllner <fmuellner gnome org>
Date:   Sat Jul 30 00:06:49 2022 +0200

    quickSettings: Color header icon if checked
    
    ... as requested by the design team.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2393>

 data/theme/gnome-shell-sass/widgets/_quick-settings.scss |  2 ++
 js/ui/quickSettings.js                                   | 11 +++++++++++
 2 files changed, 13 insertions(+)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss 
b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index eeb7420e0c..4f8a62f275 100644
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -35,6 +35,8 @@
       border-radius: 999px;
       padding: 1.5 * $base_padding;
       background-color: lighten($bg_color, 10%);
+
+      &.active { background-color: $selected_bg_color; }
     }
 
     & .title {
diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js
index a7ae84088c..634a0703f9 100644
--- a/js/ui/quickSettings.js
+++ b/js/ui/quickSettings.js
@@ -154,6 +154,10 @@ class QuickToggleMenu extends PopupMenu.PopupMenuBase {
             this._headerTitle, side, 1, 1);
         headerLayout.attach_next_to(this._headerSubtitle,
             this._headerTitle, Clutter.GridPosition.BOTTOM, 1, 1);
+
+        sourceActor.connect('notify::checked',
+            () => this._syncChecked());
+        this._syncChecked();
     }
 
     setHeader(icon, title, subtitle = '') {
@@ -238,6 +242,13 @@ class QuickToggleMenu extends PopupMenu.PopupMenuBase {
         this.emit('open-state-changed', false);
     }
 
+    _syncChecked() {
+        if (this.sourceActor.checked)
+            this._headerIcon.add_style_class_name('active');
+        else
+            this._headerIcon.remove_style_class_name('active');
+    }
+
     // expected on toplevel menus
     _setOpenedSubMenu(submenu) {
         this._openedSubMenu?.close(true);