Rename bar.js file to index.js and fix styling for switches and media progress bar.

config.js

@@ -1,5 +1,5 @@
 import { exec } from "resource:///com/github/Aylur/ags/utils.js";
-import { Bar, BarAlt } from "./modules/bar/bar.js";
+import { Bar, BarAlt } from "./modules/bar/index.js";
 import DirectoryMonitorService from "./directoryMonitorService.js";
 import MenuWindows from "./modules/menus/main.js";
 import Notifications from "./modules/notifications/index.js";

modules/bar/battery/index.js

@@ -1,5 +1,5 @@
 const battery = await Service.import("battery");
-import { closeAllMenus } from "../bar.js";
+import { closeAllMenus } from "../index.js";
 
 const BatteryLabel = () => {
   const isVis = Variable(battery.available);

modules/bar/bluetooth/index.js

@@ -1,5 +1,5 @@
 const bluetooth = await Service.import('bluetooth')
-import { closeAllMenus } from "../bar.js";
+import { closeAllMenus } from "../index.js";
 
 const Bluetooth = () => {
   const btIcon = Widget.Label({

modules/bar/clock/index.js

@@ -1,4 +1,4 @@
-import { closeAllMenus } from "../bar.js";
+import { closeAllMenus } from "../index.js";
 
 const date = Variable("", {
   poll: [1000, 'date "+󰃭  %a %b %d    %I:%M:%S %p"'],

modules/bar/media/index.js

@@ -1,5 +1,5 @@
 const mpris = await Service.import("mpris");
-import { closeAllMenus } from "../bar.js";
+import { closeAllMenus } from "../index.js";
 
 const Media = () => {
   const activePlayer = Variable(mpris.players[0]);

modules/bar/network/index.js

@@ -1,5 +1,5 @@
 const network = await Service.import("network");
-import { closeAllMenus } from "../bar.js";
+import { closeAllMenus } from "../index.js";
 
 import { globalMousePos } from "../../../globals.js";
 

modules/bar/volume/index.js

@@ -1,5 +1,5 @@
 const audio = await Service.import("audio");
-import { closeAllMenus } from "../bar.js";
+import { closeAllMenus } from "../index.js";
 
 import { globalMousePos } from "../../../globals.js";
 

modules/menus/media/components/bar.js

@@ -10,18 +10,22 @@ const Bar = (curPlayer) => {
           tooltip_text: "yoyo",
           class_name: "menu-slider media progress",
           draw_value: false,
-          on_change: ({ value }) =>
+          on_change: ({ value }) => {
-            (curPlayer.position = value * curPlayer.length),
+            return (curPlayer.position = value * curPlayer.length);
+          },
           setup: (self) => {
             const update = () => {
               if (
                 typeof curPlayer.position === "number" &&
-                curPlayer.position > 0
+                curPlayer.position > 0 &&
+                typeof curPlayer.length === "number" &&
+                curPlayer.length > 0
               ) {
                 const value = curPlayer.position / curPlayer.length;
                 self.value = value > 0 ? value : 0;
+              } else {
+                self.value = 0;
               }
-              return 0;
             };
             self.hook(curPlayer, update);
             self.hook(curPlayer, update, "position");

modules/menus/media/media.js

@@ -39,7 +39,7 @@ const Media = () => {
                   AlbumCover(curPlayer),
                   Widget.Box({
                     class_name: "media-indicator-right-section",
-                    hpack: "center",
+                    hpack: "fill",
                     hexpand: true,
                     vertical: true,
                     children: [

modules/menus/network/wifi/WirelessAPs.js

@@ -29,7 +29,9 @@ const renderWAPs = (self, network, staging, connecting) => {
     Utils.merge(
       [network.bind("wifi"), staging.bind("value"), connecting.bind("value")],
       () => {
-        const WAPs = network.wifi.access_points;
+        // Sometimes the network service will yield a "this._device is undefined" when 
+        // trying to access the "access_points" property. So we must check if it exists.
+        const WAPs = Object.hasOwnProperty.call(network.wifi, "access_points") ? network.wifi.access_points : [];
 
         const isInStaging = (wap) => {
           if (Object.keys(staging.value).length === 0) {

modules/menus/notifications/index.js

@@ -188,7 +188,7 @@ export default () => {
                   if (notifs.notifications.length <= 0) {
                     return (self.children = [
                       Widget.Box({
-                        vpack: "center",
+                        vpack: "start",
                         hpack: "center",
                         expand: true,
                         child: Widget.Label({

scss/menus/menu.scss

@@ -32,8 +32,9 @@
 }
 
 .menu-switch {
+    font-size: 1.3rem;
     background-color: $surface0;
-    border-radius: 0.3rem;
+    border-radius: 0.2em;
 
     &:checked {
         background: $sky;
@@ -43,18 +44,18 @@
         highlight,
         progress {
             background-color: $peach;
-            border-radius: 0.3rem;
+            border-radius: 0.3em;
         }
     }
 
     slider {
         box-shadow: none;
         background-color: $overlay0;
-        min-height: 1.2rem;
+        min-height: 1em;
-        min-width: 1.2rem;
+        min-width: 1em;
-        border: 0rem solid transparent;
+        border: 0em solid transparent;
-        border-radius: 0.3rem;
+        border-radius: 0.2em;
-        margin: 0.1rem 0.2rem;
+        margin: 0.1em 0.15em;
     }
 
     &:hover {

style.css

@@ -1,7 +1,7 @@
 * {
   all: unset;
   font-family: "Ubuntu Nerd Font";
-  font-size: 1.1rem;
+  font-size: 1.175rem;
   font-weight: 600;
 }
 
@@ -461,8 +461,9 @@ spinner:checked {
 }
 
 .menu-switch {
+  font-size: 1.3rem;
   background-color: #313244;
-  border-radius: 0.3rem;
+  border-radius: 0.2em;
 }
 .menu-switch:checked {
   background: #89dceb;
@@ -470,16 +471,16 @@ spinner:checked {
 .menu-switch trough highlight,
 .menu-switch trough progress {
   background-color: #fab387;
-  border-radius: 0.3rem;
+  border-radius: 0.3em;
 }
 .menu-switch slider {
   box-shadow: none;
   background-color: #6c7086;
-  min-height: 1.2rem;
+  min-height: 1em;
-  min-width: 1.2rem;
+  min-width: 1em;
-  border: 0rem solid transparent;
+  border: 0em solid transparent;
-  border-radius: 0.3rem;
+  border-radius: 0.2em;
-  margin: 0.1rem 0.2rem;
+  margin: 0.1em 0.15em;
 }
 .menu-switch:hover trough {
   background: #313244;
@@ -505,13 +506,13 @@ tooltip label {
   background: #11111b;
   border: 0.13em solid #313244;
   border-radius: 0.7rem;
-  min-width: 250px;
+  min-width: 400px;
   color: #cdd6f4;
 }
 
 .menu-items-container {
   border-radius: 0.4em;
-  min-width: 250px;
+  min-width: 400px;
 }
 
 .menu-section-container {
@@ -1078,13 +1079,14 @@ window#powermenu .powermenu.box {
 
 .menu-content-container.notifications {
   margin: 1.35em;
+  margin-bottom: 0em;
   min-height: 4em;
 }
 
 .notification-menu-controls {
   background: #1e1e2e;
   margin: 1em 1.3em;
-  margin-bottom: 0em;
+  margin-bottom: 0.5em;
   border-radius: 0.4em;
   padding: 0.4em 0.75em;
 }
@@ -1092,14 +1094,13 @@ window#powermenu .powermenu.box {
 .notification-card.menu {
   background: #1e1e2e;
   border: 0.15em solid #1e1e2e;
-  border-radius: 0.4em;
+  border-radius: 0em;
+  border-bottom-left-radius: 0.4em;
+  border-top-left-radius: 0.4em;
   margin: 0em;
 }
 
-.notification-card-content-container:first-child {
+.notification-card-content-container {
-  margin-top: 0.5em;
-}
-.notification-card-content-container:not(:last-child) {
   margin-bottom: 1em;
 }
 
@@ -1307,6 +1308,18 @@ window#powermenu .powermenu.box {
 .menu-items-container.energy .brightness-container {
   padding-bottom: 1em;
 }
+.menu-items-container.energy .brightness-slider-icon {
+  font-size: 1.4em;
+  min-width: 1em;
+  min-height: 1em;
+  color: #9399b2;
+}
+.menu-items-container.energy .brightness-slider-label {
+  font-size: 0.9em;
+  min-width: 2.5em;
+  font-weight: bold;
+  margin-bottom: 0.2em;
+}
 
 .notification-card-container {
   margin-top: 3.5rem;