Fix spacing between icons on Waybar (#1411)

* Update style.css

Fixes the uneven spacing between icons on waybar by updating styling.css with Propo font family.
However, Propo introduces a small issue as the volume icons don't have the same with. As a consequence, icons left of volume will move based on the displayed volume icon. To solve this, I added a non-Propo font to the pipewire module as well - this way the volume icons have fixed length but eats a bit into the spacing towards the CPU icon. But I see this as the best trade-off.

* Update waybar config.jsonc

* Update tray spacing in waybar config

* Modify margins in style.css

Adjusted margins for various elements.

* Update waybar css for even spacing

* Update Waybar config tray spacing

config/waybar/config.jsonc

@@ -133,6 +133,6 @@
   },
   "tray": {
     "icon-size": 12,
-    "spacing": 12
+    "spacing": 17
   }
 }

config/waybar/style.css

@@ -7,7 +7,7 @@
   border: none;
   border-radius: 0;
   min-height: 0;
-  font-family: CaskaydiaMono Nerd Font;
+  font-family: 'CaskaydiaMono Nerd Font';
   font-size: 12px;
 }
 
@@ -30,11 +30,8 @@
   opacity: 0.5;
 }
 
-#tray,
 #cpu,
 #battery,
-#network,
-#bluetooth,
 #pulseaudio,
 #custom-omarchy,
 #custom-screenrecording-indicator,
@@ -43,8 +40,20 @@
   margin: 0 7.5px;
 }
 
+#tray {
+  margin-right: 16px;
+}
+
+#bluetooth {
+  margin-right: 17px;
+}
+
+#network {
+  margin-right: 13px;
+}
+
 #custom-expand-icon {
-  margin-right: 7px;
+  margin-right: 20px;
 }
 
 tooltip {