Implemented configurable and toggleable button borders. (#279)

* Implemented configurable and toggleable button borders.

* Improve and simplify border logic

* Fix hidden label icon borders.

* Removed button hover property from bar buttons, they dim on hover now by default.

* Rename file.

* Update catppuccin normal theme's storage module color.

* update mocha items

* update mochas

* Update themes to account for borders

modules/bar/battery/index.ts

@@ -54,7 +54,7 @@ const BatteryLabel = (): BarBoxChild => {
                         wave: 'style3',
                         wave2: 'style3',
                     };
-                    return `battery ${styleMap[style]} ${!showLabel ? 'no-label' : ''}`;
+                    return `battery-container ${styleMap[style]} ${!showLabel ? 'no-label' : ''}`;
                 },
             ),
             visible: battery.bind('available'),

modules/bar/bluetooth/index.ts

@@ -33,7 +33,7 @@ const Bluetooth = (): BarBoxChild => {
                         wave: 'style3',
                         wave2: 'style3',
                     };
-                    return `bluetooth ${styleMap[style]} ${!showLabel ? 'no-label' : ''}`;
+                    return `bluetooth-container ${styleMap[style]} ${!showLabel ? 'no-label' : ''}`;
                 },
             ),
             children: options.bar.bluetooth.label.bind('value').as((showLabel) => {

modules/bar/clock/index.ts

@@ -39,7 +39,7 @@ const Clock = (): BarBoxChild => {
                         wave2: 'style3',
                     };
 
-                    return `bluetooth ${styleMap[btnStyle]} ${!shwLbl ? 'no-label' : ''} ${!shwIcn ? 'no-icon' : ''}`;
+                    return `clock-container ${styleMap[btnStyle]} ${!shwLbl ? 'no-label' : ''} ${!shwIcn ? 'no-icon' : ''}`;
                 },
             ),
             children: Utils.merge([showIcon.bind('value'), showTime.bind('value')], (shIcn, shTm) => {

modules/bar/media/index.ts

@@ -75,7 +75,7 @@ const Media = (): BarBoxChild => {
                             wave: 'style3',
                             wave2: 'style3',
                         };
-                        return `media ${styleMap[style]}`;
+                        return `media-container ${styleMap[style]}`;
                     },
                 ),
                 child: Widget.Box({

modules/bar/network/index.ts

@@ -31,12 +31,12 @@ const Network = (): BarBoxChild => {
                         wave: 'style3',
                         wave2: 'style3',
                     };
-                    return `network ${styleMap[style]}${!showLabel ? ' no-label' : ''}`;
+                    return `network-container ${styleMap[style]}${!showLabel ? ' no-label' : ''}`;
                 },
             ),
             children: [
                 Widget.Icon({
-                    class_name: 'bar-button-icon network',
+                    class_name: 'bar-button-icon network-icon',
                     icon: Utils.merge(
                         [network.bind('primary'), network.bind('wifi'), network.bind('wired')],
                         (pmry, wfi, wrd) => {
@@ -48,7 +48,6 @@ const Network = (): BarBoxChild => {
                     ),
                 }),
                 Widget.Box({
-                    vpack: 'center',
                     child: Utils.merge(
                         [
                             network.bind('primary'),
@@ -63,12 +62,12 @@ const Network = (): BarBoxChild => {
                             }
                             if (pmry === 'wired') {
                                 return Widget.Label({
-                                    class_name: 'bar-button-label network',
+                                    class_name: 'bar-button-label network-label',
                                     label: 'Wired'.substring(0, tSize),
                                 });
                             }
                             return Widget.Label({
-                                class_name: 'bar-button-label network',
+                                class_name: 'bar-button-label network-label',
                                 label: wfi.ssid ? `${trunc ? wfi.ssid.substring(0, tSize) : wfi.ssid}` : '--',
                             });
                         },

modules/bar/notifications/index.ts

@@ -25,7 +25,7 @@ export const Notifications = (): BarBoxChild => {
                         wave: 'style3',
                         wave2: 'style3',
                     };
-                    return `notifications ${styleMap[style]} ${!showTotal ? 'no-label' : ''}`;
+                    return `notifications-container ${styleMap[style]} ${!showTotal ? 'no-label' : ''}`;
                 },
             ),
             child: Widget.Box({

modules/bar/systray/index.ts

@@ -31,7 +31,7 @@ const SysTray = (): BarBoxChild => {
 
     return {
         component: Widget.Box({
-            class_name: 'systray',
+            class_name: 'systray-container',
             children: items,
         }),
         isVisible: true,

modules/bar/volume/index.ts

@@ -65,7 +65,7 @@ const Volume = (): BarBoxChild => {
                         wave: 'style3',
                         wave2: 'style3',
                     };
-                    return `volume ${styleMap[style]} ${!showLabel ? 'no-label' : ''}`;
+                    return `volume-container ${styleMap[style]} ${!showLabel ? 'no-label' : ''}`;
                 },
             ),
             children: options.bar.volume.label.bind('value').as((showLabel) => {

modules/bar/window_title/index.ts

@@ -170,7 +170,7 @@ const ClientTitle = (): BarBoxChild => {
                         wave: 'style3',
                         wave2: 'style3',
                     };
-                    return `windowtitle ${styleMap[style]} ${!showLabel ? 'no-label' : ''}`;
+                    return `windowtitle-container ${styleMap[style]} ${!showLabel ? 'no-label' : ''}`;
                 },
             ),
             children: Utils.merge(

modules/bar/workspaces/index.ts

@@ -15,7 +15,7 @@ const Workspaces = (monitor = -1): BarBoxChild => {
 
     return {
         component: Widget.Box({
-            class_name: 'workspaces',
+            class_name: 'workspaces-box-container',
             child: options.bar.workspaces.hideUnoccupied
                 .bind('value')
                 .as((hideUnoccupied) => (hideUnoccupied ? occupiedWses(monitor) : defaultWses(monitor))),