style: Fix bg color weirdness on background apps close button

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3140>

data/theme/gnome-shell-sass/widgets/_quick-settings.scss

@@ -198,9 +198,14 @@
     icon-size: $large_icon_size !important;
     -st-icon-style: regular !important;
   }
-  & .close-button {
-    @extend .icon-button;
+  & .icon-button {
     padding: $base_padding;
+
+    // override some background colors since it's a button on an already styled background
+    // FIXME: may need a generic drawing method for button in menu item in future
+    background-color: transparentize($fg_color, 0.87);
+    &:hover { background-color: transparentize($fg_color, 0.78);}
+    &:active { background-color: transparentize($fg_color, 0.69);}
   }
   & .spinner {
     padding: $base_padding;

js/ui/status/backgroundApps.js

@@ -81,7 +81,7 @@ const BackgroundAppMenuItem = GObject.registerClass({
 
         const closeButton = new St.Button({
             iconName: 'window-close-symbolic',
-            styleClass: 'close-button',
+            styleClass: 'icon-button',
             x_expand: true,
             y_expand: false,
             x_align: Clutter.ActorAlign.END,