From 5056577a0085df2ce36153c89f3e0efbeb42d14c Mon Sep 17 00:00:00 2001
From: EliverLara <eliverlara@gmail.com>
Date: Sat, 29 Apr 2023 14:41:49 -0600
Subject: [PATCH] Gnome-shell 44: Quick settings -  Fix toggle buttons
 appearance

---
 gnome-shell/_common.scss    | 34 ++++++++++++++++++++++++++++++----
 gnome-shell/gnome-shell.css | 35 ++++++++++++++++++++++++++++-------
 2 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/gnome-shell/_common.scss b/gnome-shell/_common.scss
index e365fb2..85fbbeb 100644
--- a/gnome-shell/_common.scss
+++ b/gnome-shell/_common.scss
@@ -2202,6 +2202,7 @@ $slider_size: 16px;
   border-radius: 12px;
 
   .icon-button, .button {
+    color: $fg_color;
     padding: 6px*1.75;
   }
 }
@@ -2212,11 +2213,13 @@ $base_padding: 6px;
   border-radius: 99px;
 
   &:checked { 
-    @include gradient(transparentize($g1, 0.3), transparentize($g2, 0.3));
-    color: lighten($fg_color, 30%);
+    @include gradient($g1, $g2);
+    color: $selected_fg_color;
     text-shadow: none;
   }
 
+  &, &:hover, &:checked { border: none; }
+
   & > StBoxLayout { spacing: $base_padding; }
 
   /* Move padding into the box; this is to allow menu arrows
@@ -2234,9 +2237,28 @@ $base_padding: 6px;
   &:ltr > StBoxLayout { padding-right: 0; }
   &:rtl > StBoxLayout { padding-left: 0; }
 
+  & .quick-toggle {
+    min-width: auto;
+    max-width: auto;
+
+    &:ltr { border-radius: 99px 0 0 99px; }
+    &:rtl { border-radius: 0 99px 99px 0; }
+
+    &:ltr:last-child { border-radius: 99px; }
+    &:rtl:last-child { border-radius: 99px; }
+  }
+
+
   & .quick-toggle-arrow {
-    background-color: transparentize($fg_color, 0.9);
+    background-color: transparentize(lighten($base_color, 3%), 0.3);
     padding: $base_padding $base_padding*1.75;
+    border-width: 0;
+    &:checked { 
+      background-color: $g2;
+      color: $selected_fg_color;
+      border-width: 0;
+    }
+  
 
     &:ltr { border-radius: 0 99px 99px 0; }
     &:rtl { border-radius: 99px 0 0 99px; }
@@ -2248,6 +2270,7 @@ $base_padding: 6px;
   border-radius: 12px;
   padding: $base_padding*2;
   margin: $base_padding*2 $base_padding*3 0;
+  color: $fg_color;
 
   .popup-menu-item > StIcon { -st-icon-style: symbolic; }
 
@@ -2262,7 +2285,10 @@ $base_padding: 6px;
       padding: 1.5 * $base_padding;
       background-color: lighten($bg_color, 10%);
 
-      &.active { background-color: $selected_bg_color; }
+      &.active { 
+        background-color: $selected_bg_color; 
+        color: $selected_fg_color;
+      }
     }
   }
 }
diff --git a/gnome-shell/gnome-shell.css b/gnome-shell/gnome-shell.css
index dfdc2f2..4504ef2 100644
--- a/gnome-shell/gnome-shell.css
+++ b/gnome-shell/gnome-shell.css
@@ -2003,6 +2003,7 @@ StScrollBar {
   padding: 14px;
   border-radius: 12px; }
   .quick-settings .icon-button, .quick-settings .button {
+    color: #C3C7D1;
     padding: 10.5px; }
 
 .quick-toggle {
@@ -2010,11 +2011,13 @@ StScrollBar {
   /* Move padding into the box; this is to allow menu arrows
      to extend to the border */ }
   .quick-toggle:checked {
-    background-gradient-start: rgba(0, 232, 183, 0.7) !important;
-    background-gradient-end: rgba(0, 232, 183, 0.7) !important;
+    background-gradient-start: #00e8b7 !important;
+    background-gradient-end: #00e8b7 !important;
     background-gradient-direction: horizontal;
-    color: white;
+    color: #272727;
     text-shadow: none; }
+  .quick-toggle, .quick-toggle:hover, .quick-toggle:checked {
+    border: none; }
   .quick-toggle > StBoxLayout {
     spacing: 6px; }
   .quick-toggle.button {
@@ -2032,9 +2035,25 @@ StScrollBar {
   padding-right: 0; }
 .quick-menu-toggle:rtl > StBoxLayout {
   padding-left: 0; }
+.quick-menu-toggle .quick-toggle {
+  min-width: auto;
+  max-width: auto; }
+  .quick-menu-toggle .quick-toggle:ltr {
+    border-radius: 99px 0 0 99px; }
+  .quick-menu-toggle .quick-toggle:rtl {
+    border-radius: 0 99px 99px 0; }
+  .quick-menu-toggle .quick-toggle:ltr:last-child {
+    border-radius: 99px; }
+  .quick-menu-toggle .quick-toggle:rtl:last-child {
+    border-radius: 99px; }
 .quick-menu-toggle .quick-toggle-arrow {
-  background-color: rgba(195, 199, 209, 0.1);
-  padding: 6px 10.5px; }
+  background-color: rgba(36, 48, 53, 0.7);
+  padding: 6px 10.5px;
+  border-width: 0; }
+  .quick-menu-toggle .quick-toggle-arrow:checked {
+    background-color: #00e8b7;
+    color: #272727;
+    border-width: 0; }
   .quick-menu-toggle .quick-toggle-arrow:ltr {
     border-radius: 0 99px 99px 0; }
   .quick-menu-toggle .quick-toggle-arrow:rtl {
@@ -2044,7 +2063,8 @@ StScrollBar {
   background-color: #24313c;
   border-radius: 12px;
   padding: 12px;
-  margin: 12px 18px 0; }
+  margin: 12px 18px 0;
+  color: #C3C7D1; }
   .quick-toggle-menu .popup-menu-item > StIcon {
     -st-icon-style: symbolic; }
   .quick-toggle-menu .header {
@@ -2056,7 +2076,8 @@ StScrollBar {
       padding: 9px;
       background-color: #354859; }
       .quick-toggle-menu .header .icon.active {
-        background-color: #00e8b7; }
+        background-color: #00e8b7;
+        color: #272727; }
 
 .quick-settings-system-item > StBoxLayout {
   spacing: 12px; }