Implement styling options for all the bar components (not menus) through options variables.

modules/bar/network/index.js

@@ -1,14 +1,14 @@
 const network = await Service.import("network");
 import { openMenu } from "../utils.js";
 
-import { globalMousePos } from "../../../globals.js";
-
 const Network = () => {
   const wifiIndicator = [
     Widget.Icon({
+      class_name: "bar-network-icon",
       icon: network.wifi.bind("icon_name"),
     }),
     Widget.Label({
+      class_name: "bar-network-label",
       label: network.wifi
         .bind("ssid")
         .as((ssid) => (ssid ? `  ${ssid}` : "  --").substring(0, 7)),
@@ -16,8 +16,13 @@ const Network = () => {
   ];
 
   const wiredIndicator = [
+    Widget.Icon({
+      class_name: "bar-network-icon",
+      icon: network.wired.bind("icon_name"),
+    }),
     Widget.Label({
-      label: network.bind("wired").as(() => "󰈀  Wired"),
+      class_name: "bar-network-label",
+      label: network.bind("wired").as(() => "  Wired"),
     }),
   ];
 
@@ -30,6 +35,7 @@ const Network = () => {
         .as((w) => (w === "wired" ? wiredIndicator : wifiIndicator)),
     }),
     isVisible: true,
+    boxClass: "network",
     props: {
       on_primary_click: (clicked, event) => {
         openMenu(clicked, event, "networkmenu");