update examples, fix styling

2 files changed, 38 insertions, 28 deletions

diff --git a/examples/lua/simple-bar/style.scss b/examples/lua/simple-bar/style.scss
index 1dcf729..f5f771a 100644
--- a/examples/lua/simple-bar/style.scss
+++ b/examples/lua/simple-bar/style.scss
@@ -13,31 +13,45 @@ window.Bar {
     font-size: 1.1em;
     font-weight: bold;
 
-    button {
-        all: unset;
-        background-color: transparent;
+    label {
+        margin: 0 8px;
+    }
+
+    .Workspaces  {
+        button {
+            all: unset;
+            background-color: transparent;
 
-        &:hover label {
-            background-color: color.adjust($fg, $alpha: -0.84);
-            border-color: color.adjust($accent, $alpha: -0.8);
+            &:hover label {
+                background-color: color.adjust($fg, $alpha: -0.84);
+                border-color: color.adjust($accent, $alpha: -0.8);
+            }
+
+            &:active label {
+                background-color: color.adjust($fg, $alpha: -0.8)
+            }
         }
 
-        &:active label {
-            background-color: color.adjust($fg, $alpha: -0.8)
+        label {
+            transition: 200ms;
+            padding: 0 8px;
+            margin: 2px;
+            border-radius: $radius;
+            border: 1pt solid transparent;
         }
-    }
 
-    label {
-        transition: 200ms;
-        padding: 0 8px;
-        margin: 2px;
-        border-radius: $radius;
-        border: 1pt solid transparent;
+        .focused label {
+            color: $accent;
+            border-color: $accent;
+        }
     }
 
-    .Workspaces .focused label {
-        color: $accent;
-        border-color: $accent;
+    .SysTray {
+        margin-right: 8px;
+
+        button {
+            padding: 0 4px;
+        }
     }
 
     .FocusedClient {
diff --git a/examples/lua/simple-bar/widget/Bar.lua b/examples/lua/simple-bar/widget/Bar.lua
index 843e292..e7bd4ff 100644
--- a/examples/lua/simple-bar/widget/Bar.lua
+++ b/examples/lua/simple-bar/widget/Bar.lua
@@ -1,8 +1,6 @@
 local astal = require("astal")
-local App = require("astal.gtk3.app")
 local Widget = require("astal.gtk3.widget")
 local Variable = astal.Variable
-local Gdk = astal.require("Gdk", "3.0")
 local GLib = astal.require("GLib")
 local bind = astal.bind
 local Mpris = astal.require("AstalMpris")
@@ -17,18 +15,16 @@ local function SysTray()
 	local tray = Tray.get_default()
 
 	return Widget.Box({
+        class_name = "SysTray",
 		bind(tray, "items"):as(function(items)
 			return map(items, function(item)
 				return Widget.MenuButton({
 					tooltip_markup = bind(item, "tooltip_markup"),
-          use_popover = false,
+					use_popover = false,
 					menu_model = bind(item, "menu-model"),
-          action_group = bind(item, "action-group"):as(function(ag)
-            return {
-              prefix = "dbusmenu",
-              action_group = ag
-            }
-          end),
+					action_group = bind(item, "action-group"):as(function(ag)
+						return { "dbusmenu", ag }
+					end),
 					Widget.Icon({
 						g_icon = bind(item, "gicon"),
 					}),
@@ -181,10 +177,10 @@ return function(gdkmonitor)
 			}),
 			Widget.Box({
 				halign = "END",
+                SysTray(),
 				Wifi(),
 				AudioSlider(),
 				BatteryLevel(),
-				SysTray(),
 				Time("%H:%M - %A %e."),
 			}),
 		}),