✨ feat(swaync): add new buttons to buttons-grid and fix others

swaync/config.json

@@ -69,7 +69,7 @@
     },
     "label": {
       "max-lines": 5,
-      "text": "Label Text"
+      "text": "Label"
     },
     "mpris": {
       "image-size": 96,
@@ -86,20 +86,34 @@
     "buttons-grid": {
       "actions": [
           {
-              "label": "   Power Menu",
+              "label": "  Internet",
-              "type": "normal",
-              "command": "wlogout -b 4"
-          },
-          {
-              "label": "󰒲   Do Not Disturb",
               "type": "toggle",
-              "command": "swaync-client -d",
+              "active": true,
-              "update-command": "swaync-client -D"
+              "command": "sh -c '[[ $SWAYNC_TOGGLE_STATE == true ]] && nmcli n on || nmcli n off'",
+              "update-command": "sh -c '[[ $(nmcli n c) == full ]] && echo true || echo false'"
           },
           {
-              "label": "Change Wallpaper",
+              "label": "  Bluetooth",
+              "type": "toggle",
+              "active": false,
+              "command": "sh -c '[[ $SWAYNC_TOGGLE_STATE == true ]] && bluetoothctl power on || bluetoothctl power off'",
+              "update-command": "sh -c '[[ $(bluetoothctl show | grep Powered | sed 's/Powered: //') == yes ]] && echo true || echo false'"
+          },
+          {
+              "label": "󰒲   DNDisturb",
+              "type": "toggle",
+              "command": "sh -c '[[ $SWAYNC_TOGGLE_STATE == true ]] && swaync-client -dn || swaync-client -df'",
+              "update-command": "sh -c '[[ $(swaync-client -D) == true ]] && echo true || echo false'"
+          },
+          {
+              "label": "󰸉   Wallpaper",
               "type": "normal",
-              "command": "bash -c '$(swaync-client -cp; bash $HOME/.config/hypr/scripts/change-wallpaper.sh)'"
+              "command": "bash -c 'swaync-client -cp; bash $HOME/.config/hypr/scripts/change-wallpaper.sh'"
+          },
+          {
+              "label": "󰗽   Logout",
+              "type": "normal",
+              "command": "wlogout -b 5"
           }
       ]
     } 

swaync/style.css

@@ -51,18 +51,20 @@ tooltip {
 
 .notification-row .notification-background .notification .notification-content .body {
   color: @foreground;
+  margin-bottom: .6em;
 }
 
 .notification-row .notification-background .notification > *:last-child > * {
   min-height: 3.4em;
 }
 
-.notification-row .notification .notification-action {
+.notification .notification-action {
   border-radius: 16px;
   color: @text;
-  background-color: @button-bg;
+  font-weight: 600;
+  background-color: @bg-button;
   border: .6px solid @background;
-  margin: 5px;
+  margin: .3em 0;
 }
 
 .notification-row .notification .notification-action:hover {
@@ -76,11 +78,11 @@ tooltip {
 
 .close-button {
   border-radius: 8px;
-  margin: 6px;
+  margin: 4px;
   padding: 2.5px;
   border-radius: 8px;
   color: @crust;
-  background-color: @button-bg;
+  background-color: @bg-button;
 }
 
 .close-button:hover {
@@ -233,7 +235,7 @@ tooltip {
 }
 
 .widget-mpris .widget-mpris-title {
-    font-family: "Cantarell";
+    font-family: "Cantarell", "Noto Sans";
     font-weight: 700;
     font-size: 1.2rem;
     text-shadow: 1px 1px 2px black;
@@ -278,10 +280,6 @@ tooltip {
     margin: 2px;
 }
 
-.widget-buttons-grid button.active {
-    background: @active;
-}
-
 .widget-buttons-grid button:hover {
     background: @hover;
 }
@@ -296,28 +294,32 @@ tooltip {
     font-weight: 600;
 }
 
+.toggle:checked {
+    color: blue;
+}
+
 .widget-volume trough,
 .widget-backlight trough { /* slider's background */
-    margin: 0rem 1rem;
+    margin: 0 1.2rem;
     background-color: @background-alt;
     min-height: 8px;
     min-width: 70px;
-    border-radius: 10px;
+    border-radius: 14px;
-    padding: 2px;
+    padding: 4px;
 }
 
 .widget-volume trough:hover, 
 .widget-volume trough:active,
 .widget-backlight trough:hover,
 .widget-backlight trough:active {
-    padding: 4px;
+    padding: 6px;
     border-radius: 10.5px;
 }
 .widget-volume trough slider,
 .widget-backlight trough slider { /* slider's dot indicator */
     background: shade(@text, .9);
     border-radius: 50%;
-    padding: 8px;
+    padding: 10px;
     box-shadow: inset 0 0 1px .5px @background-alt;
 }
 .widget-volume trough slider:active,
@@ -328,8 +330,8 @@ tooltip {
 
 .widget-volume trough highlight,
 .widget-backlight trough highlight { /* slider bar */
-    border-top-left-radius: 8px;
+    border-top-left-radius: 14px;
-    border-bottom-left-radius: 8px;
+    border-bottom-left-radius: 14px;
     background: shade(@highlight, .9);
 }