Update font and power icon.

modules/bar/bluetooth/index.js

@@ -3,12 +3,12 @@ import { closeAllMenus } from "../bar.js";
 
 const Bluetooth = () => {
   const btIcon = Widget.Label({
-    label: bluetooth.bind("enabled").as((v) => v ? "󰂯 " : "󰂲 "),
+    label: bluetooth.bind("enabled").as((v) => v ? "󰂯" : "󰂲"),
     class_name: "bar-bt_icon",
   });
 
   const btText = Widget.Label({
-    label: bluetooth.bind("enabled").as((v) => v ? "On" : "Off"),
+    label: bluetooth.bind("enabled").as((v) => v ? " On" : " Off"),
     class_name: "bar-bt_label",
   });
 

modules/bar/clock/index.js

@@ -1,5 +1,5 @@
 const date = Variable("", {
-  poll: [1000, 'date "+󰃭 %a %b %d  󱑍 %I:%M:%S %p"'],
+  poll: [1000, 'date "+󰃭  %a %b %d    %I:%M:%S %p"'],
 });
 
 const Clock = () => {

modules/bar/media/index.js

@@ -31,14 +31,14 @@ const Media = () => {
 
   const getIconForPlayer = (playerName) => {
     const windowTitleMap = [
-      ["Mozilla Firefox", "󰈹"],
-      ["Microsoft Edge", "󰇩"],
-      ["(.*)Discord(.*)", ""],
-      ["Plex", "󰚺  Plex"],
-      ["(.*) Spotify Free", "󰓇"],
-      ["(.*)Spotify Premium", "󰓇"],
-      ["Spotify", "󰓇"],
-      ["(.*)", "󰝚"],
+      ["Mozilla Firefox", "󰈹 "],
+      ["Microsoft Edge", "󰇩 "],
+      ["(.*)Discord(.*)", " "],
+      ["Plex", "󰚺 "],
+      ["(.*) Spotify Free", "󰓇 "],
+      ["(.*)Spotify Premium", "󰓇 "],
+      ["Spotify", "󰓇 "],
+      ["(.*)", "󰝚 "],
     ];
 
     const foundMatch = windowTitleMap.find((wt) =>

modules/bar/network/index.js

@@ -17,12 +17,13 @@ const Network = () => {
 
   const wiredIndicator = [
     Widget.Label({
-      label: network.bind("wired").as(() => "󰈀 Wired"),
+      label: network.bind("wired").as(() => "󰈀  Wired"),
     }),
   ];
 
   return {
     component: Widget.Box({
+      vpack: "center",
       class_name: "bar-network",
       children: network
         .bind("primary")

modules/bar/power/index.js

@@ -3,9 +3,9 @@ export const Power = () => {
     component: Widget.Box({
       child: Widget.Button({
         class_name: "bar-powermenu",
-        child: Widget.Label({
+        child: Widget.Icon({
           class_name: "bar-power_label",
-          label: "⏻",
+          icon: "system-shutdown-symbolic",
         }),
       }),
     }),

modules/bar/volume/index.js

@@ -26,17 +26,20 @@ const Volume = () => {
   };
 
   const volIcn = Widget.Label({
+    vpack: "center",
     label: getIcon(),
     class_name: "bar-volume_icon",
   });
 
   const volPct = Widget.Label({
-    label: audio.speaker.bind("volume").as((v) => ` ${Math.floor(v * 100)}%`),
+    vpack: "center",
+    label: audio.speaker.bind("volume").as((v) => `  ${Math.floor(v * 100)}%`),
     class_name: "bar-volume_percentage",
   });
 
   return {
     component: Widget.Box({
+      vpack: "center",
       class_name: "volume",
       children: [volIcn, volPct],
     }),

modules/bar/window_title/index.js

@@ -2,17 +2,17 @@ const hyprland = await Service.import("hyprland");
 
 const filterTitle = (windowtitle) => {
   const windowTitleMap = [
-    ["kitty", "󰄛  Kitty Terminal"],
-    ["firefox", "󰈹  Firefox"],
-    ["microsoft-edge", "󰇩  Edge"],
-    ["discord", "  Discord"],
-    ["org.kde.dolphin", "  Dolphin"],
-    ["plex", "󰚺  Plex"],
-    ["steam", "  Steam"],
-    ["", "󰇄  Desktop"],
-    ["spotify", "󰓇  Spotify"],
-    ["obsidian", "󱓧  Obsidian"],
-    ["(.+)", `󰣆  ${windowtitle.class.charAt(0).toUpperCase() + windowtitle.class.slice(1)}`],
+    ["kitty", "󰄛   Kitty Terminal"],
+    ["firefox", "󰈹   Firefox"],
+    ["microsoft-edge", "󰇩   Edge"],
+    ["discord", "    Discord"],
+    ["org.kde.dolphin", "   Dolphin"],
+    ["plex", "󰚺   Plex"],
+    ["steam", "   Steam"],
+    ["", "󰇄   Desktop"],
+    ["spotify", "󰓇   Spotify"],
+    ["obsidian", "󱓧   Obsidian"],
+    ["(.+)", `󰣆   ${windowtitle.class.charAt(0).toUpperCase() + windowtitle.class.slice(1)}`],
   ];
 
   const foundMatch = windowTitleMap.find((wt) =>

scss/bar/bluetooth.scss

@@ -1,7 +1,7 @@
 @import '../colors';
 
 .bar-bt_icon {
-  font-size: 1.2em;
+  font-size: 1.15em;
   color: $sky;
 }
 

scss/bar/power.scss

@@ -2,5 +2,5 @@
 
 .bar-power_label {
   color: $red;
-  margin-right: 0.2rem;
+  margin-top: 0.2rem;
 }

scss/main.scss

@@ -1,8 +1,8 @@
 * {
   all: unset;
-  font-family: "JetBrains Mono Nerd Font";
-  font-size: 1.15rem;
-  font-weight: bold;
+  font-family: "Ubuntu";
+  font-size: 1.2rem;
+  font-weight: 600;
 }
 
 //general

scss/menus/media.scss

@@ -1,7 +1,7 @@
 @import "../colors";
 
 .media-indicator-container {
-  min-width: 41rem;
+  min-width: 40rem;
   min-height: 10rem;
   background: $mantle;
   border: 0.25rem solid $surface0; 

style.css

@@ -1,8 +1,8 @@
 * {
   all: unset;
-  font-family: "JetBrains Mono Nerd Font";
-  font-size: 1.15rem;
-  font-weight: bold;
+  font-family: "Ubuntu";
+  font-size: 1.2rem;
+  font-weight: 600;
 }
 
 menu {
@@ -304,7 +304,7 @@ spinner:checked {
 }
 
 .bar-bt_icon {
-  font-size: 1.2em;
+  font-size: 1.15em;
   color: #89dceb;
 }
 
@@ -387,7 +387,7 @@ spinner:checked {
 
 .bar-power_label {
   color: #f38ba8;
-  margin-right: 0.2rem;
+  margin-top: 0.2rem;
 }
 
 .bar {
@@ -896,7 +896,7 @@ window#powermenu .powermenu.box {
 }
 
 .media-indicator-container {
-  min-width: 41rem;
+  min-width: 40rem;
   min-height: 10rem;
   background: #181825;
   border: 0.25rem solid #313244;