Replace Widget.Icon with Label to fix stuttering icons.

modules/menus/bluetooth/devices/devicelist.js

@@ -1,4 +1,5 @@
 import { connectedControls } from "./connectedControls.js";
+import { getBluetoothIcon } from "../utils.js";
 
 const devices = (bluetooth, self) => {
   return self.hook(bluetooth, () => {
@@ -81,13 +82,14 @@ const devices = (bluetooth, self) => {
                     hpack: "start",
                     class_name: "menu-button-container",
                     children: [
-                      Widget.Icon({
+                      Widget.Label({
-                        vpack: "center",
+                        vpack: "start",
                         class_name: `menu-button-icon bluetooth ${conDevNames.includes(device.address) ? "active" : ""}`,
-                        icon: `${device["icon-name"]}-symbolic`,
+                        label: getBluetoothIcon(`${device["icon-name"]}-symbolic`),
                       }),
                       Widget.Box({
                         vertical: true,
+                        vpack: "center",
                         children: [
                           Widget.Label({
                             vpack: "center",

modules/menus/bluetooth/devices/label.js

@@ -14,7 +14,7 @@ const label = (bluetooth) => {
     children: [
       Widget.Label({
         class_name: "menu-label",
-        vpack: "start",
+        vpack: "center",
         hpack: "start",
         label: "Bluetooth",
       }),

modules/menus/bluetooth/utils.js

@@ -0,0 +1,31 @@
+const getBluetoothIcon = (iconName) => {
+  const deviceIconMap = [
+    ["^audio-card*", "󰎄"],
+    ["^audio-headphones*", "󰋋"],
+    ["^audio-headset*", "󰋎"],
+    ["^audio-input*", "󰍬"],
+    ["^audio-speakers*", "󰓃"],
+    ["^bluetooth*", "󰂯"],
+    ["^camera*", "󰄀"],
+    ["^computer*", "󰟀"],
+    ["^input-gaming*", "󰍬"],
+    ["^input-keyboard*", "󰌌"],
+    ["^input-mouse*", "󰍽"],
+    ["^input-tablet*", "󰓶"],
+    ["^media*", "󱛟"],
+    ["^modem*", "󱂇"],
+    ["^network*", "󱂇"],
+    ["^phone*", "󰄞"],
+    ["^printer*", "󰐪"],
+    ["^scanner*", "󰚫"],
+    ["^video-camera*", "󰕧"],
+  ];
+
+  const foundMatch = deviceIconMap.find((icon) =>
+    RegExp(icon[0]).test(iconName.toLowerCase()),
+  );
+
+  return foundMatch ? foundMatch[1] : "󰂯";
+};
+
+export { getBluetoothIcon };

modules/menus/network/wifi/WirelessAPs.js

@@ -26,6 +26,7 @@ const renderWAPs = (self, network, staging, connecting) => {
     failed: "Connection Failed",
   };
   self.hook(network, () => {
+    console.log(JSON.stringify(network, null, 2));
     Utils.merge(
       [staging.bind("value"), connecting.bind("value")],
       () => {

scss/menus/bluetooth.scss

@@ -40,7 +40,7 @@
     }
 
     .bluetooth-element-item {
-            margin-bottom: 0.7em;
+        margin-bottom: 0.4em;
         &:hover {
             color: $sky;
         }
@@ -60,9 +60,17 @@
             font-size: 1em;
         }
 
+        .menu-button-icon {
+            font-size: 1.5em;
+
+            &.active {
+                color: $sky;
+            }
+        }
+
         .connection-status {
             font-size: 0.9em;
-            margin-left: 1rem;
+            margin-left: 0.6rem;
         }
     }
 

scss/menus/media.scss

@@ -1,8 +1,8 @@
 @import "../colors";
 
 .menu-items-container.media {
-  min-width: 36.5em;
+  min-width: 30.5em;
-  min-height: 18em;
+  min-height: 15em;
 
   .menu-section-container {
     margin: 1em 0em;

scss/menus/menu.scss

@@ -32,7 +32,7 @@
 }
 
 .menu-switch {
-    font-size: 1.3rem;
+    font-size: 1.3em;
     background-color: $surface0;
     border-radius: 0.2em;
 
@@ -221,7 +221,7 @@ tooltip label {
 .menu-button-name {
     font-size: 0.95em;
     font-weight: bold;
-    margin-left: 1rem;
+    margin-left: 0.5em;
     margin-right: 1.2rem;
 }
 

style.css

@@ -289,7 +289,6 @@ spinner:checked {
 }
 
 .media {
-  font-size: 1rem;
   color: #b4befe;
 }
 
@@ -468,7 +467,7 @@ spinner:checked {
 }
 
 .menu-switch {
-  font-size: 1.3rem;
+  font-size: 1.3em;
   background-color: #313244;
   border-radius: 0.2em;
 }
@@ -630,7 +629,7 @@ tooltip label {
 .menu-button-name {
   font-size: 0.95em;
   font-weight: bold;
-  margin-left: 1rem;
+  margin-left: 0.5em;
   margin-right: 1.2rem;
 }
 
@@ -955,10 +954,12 @@ window#powermenu .powermenu.box {
   color: #cba6f7;
 }
 .menu-items-container.network .menu-icon-button.network.disconnect {
-  margin-bottom: 0.4em;
+  margin: 0em;
+  margin-top: -0.2em;
+  margin-left: 1em;
 }
 .menu-items-container.network .menu-icon-button.network.disconnect label {
-  font-size: 1.3em;
+  font-size: 1.4em;
 }
 .menu-items-container.network .menu-icon-button.network.disconnect:hover {
   color: #cba6f7;
@@ -997,7 +998,7 @@ window#powermenu .powermenu.box {
   color: #89dceb;
 }
 .menu-items-container.bluetooth .bluetooth-element-item {
-  margin-bottom: 0.7em;
+  margin-bottom: 0.4em;
 }
 .menu-items-container.bluetooth .bluetooth-element-item:hover {
   color: #89dceb;
@@ -1014,9 +1015,15 @@ window#powermenu .powermenu.box {
 .menu-items-container.bluetooth .bluetooth-element-item label {
   font-size: 1em;
 }
+.menu-items-container.bluetooth .bluetooth-element-item .menu-button-icon {
+  font-size: 1.5em;
+}
+.menu-items-container.bluetooth .bluetooth-element-item .menu-button-icon.active {
+  color: #89dceb;
+}
 .menu-items-container.bluetooth .bluetooth-element-item .connection-status {
   font-size: 0.9em;
-  margin-left: 1em;
+  margin-left: 0.6rem;
 }
 .menu-items-container.bluetooth spinner {
   min-height: 1.3em;
@@ -1028,8 +1035,8 @@ window#powermenu .powermenu.box {
 }
 
 .menu-items-container.media {
-  min-width: 36.5em;
+  min-width: 30.5em;
-  min-height: 18em;
+  min-height: 15em;
 }
 .menu-items-container.media .menu-section-container {
   margin: 1em 0em;