✨ feat(swaync): put title widget on notifications section with clear button

swaync/_colors.css

@@ -4,7 +4,7 @@
 @define-color highlight @color1;
 @define-color bg-slider shade(@highlight, .2);
 @define-color bg-button shade(@highlight, .72);
-@define-color background-alt shade(@highlight, .6);
+@define-color background-alt shade(@color2, .6);
 @define-color hover shade(@highlight, .6);
-@define-color active shade(@highlight, .58);
-@define-color text rgb(255, 255, 255);
+@define-color active @color8;
+@define-color text @foreground;

swaync/config.json

@@ -48,18 +48,19 @@
     }
   },
   "widgets": [
-    "title",
+    "label",
     "volume",
     "backlight",
     "buttons-grid",
     "mpris",
     "inhibitors",
+    "title",
     "notifications"
   ],
   "widget-config": {
     "title": {
-      "text": "Control Center",
-      "clear-all-button": false
+      "text": "Notifications",
+      "clear-all-button": true
     },
     "inhibitors": {
       "text": "Inhibitors"
@@ -69,7 +70,7 @@
     },
     "label": {
       "max-lines": 5,
-      "text": "Label"
+      "text": "Control Center"
     },
     "mpris": {
       "image-size": 96,

swaync/style.css

@@ -155,14 +155,15 @@ tooltip {
 
 .control-center .widget-title > label {
   color: @text;
-  font-size: 1.5em;
+  font-size: 1.6em;
   font-weight: 600;
   margin-bottom: 10px;
 }
 
-.control-center .widget-title button label {
-    color: @text;
-    border: 1px solid @yellow;
+.control-center .widget-title button {
+    border-radius: 8px;
+    background: @bg-button;
+    padding: 6px 8px;
 }
 
 .control-center .widget-title button:hover {
@@ -173,6 +174,11 @@ tooltip {
   background-color: @active;
 }
 
+.control-center .widget-title button label {
+    color: @foreground;
+    font-weight: 600;
+}
+
 .control-center-dnd {
   margin-top: 5px;
   border-radius: 8px;
@@ -264,8 +270,9 @@ tooltip {
 }
 
 .control-center .widget-label > label {
-  color: #cdd6f4;
-  font-size: 2rem;
+  color: @foreground;
+  font-weight: 600;
+  font-size: 1.6em;
 }
 
 
@@ -309,13 +316,6 @@ tooltip {
     padding: 4px;
 }
 
-.widget-volume trough:hover, 
-.widget-volume trough:active,
-.widget-backlight trough:hover,
-.widget-backlight trough:active {
-    padding: 6px;
-    border-radius: 10.5px;
-}
 .widget-volume trough slider,
 .widget-backlight trough slider { /* slider's dot indicator */
     background: shade(@text, .9);