3 files changed, 42 insertions, 38 deletions

diff --git a/examples/vala/simple-bar/meson.build b/examples/vala/simple-bar/meson.build
index 10f5dd2..5a0ef4c 100644
--- a/examples/vala/simple-bar/meson.build
+++ b/examples/vala/simple-bar/meson.build
@@ -21,22 +21,15 @@ pkgconfig_deps = [
 # needed for GLib.Math
 deps = pkgconfig_deps + meson.get_compiler('c').find_library('m')
 
-custom_target(
-  'style.css',
-  command: [
-    find_program('sass'),
-    meson.project_source_root() / 'style.scss',
-    '@OUTPUT@',
-  ],
-  output: 'style.css',
-  install: true,
-  install_dir: libdir,
-)
-
 main = configure_file(
   input: 'app.in.vala',
   output: 'app.vala',
-  configuration: {'STYLE': libdir / 'style.css'},
+  configuration: {
+    'STYLE': run_command(
+      find_program('sass'),
+      meson.project_source_root() / 'style.scss',
+    ).stdout(),
+  },
 )
 
 sources = files(
diff --git a/examples/vala/simple-bar/style.scss b/examples/vala/simple-bar/style.scss
index 1dcf729..f5f771a 100644
--- a/examples/vala/simple-bar/style.scss
+++ b/examples/vala/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/vala/simple-bar/widget/Bar.vala b/examples/vala/simple-bar/widget/Bar.vala
index 3893ec5..ba9f06c 100644
--- a/examples/vala/simple-bar/widget/Bar.vala
+++ b/examples/vala/simple-bar/widget/Bar.vala
@@ -103,6 +103,7 @@ class SysTray : Gtk.Box {
     AstalTray.Tray tray = AstalTray.get_default();
 
     public SysTray() {
+        Astal.widget_set_class_names(this, { "SysTray" });
         tray.item_added.connect(add_item);
         tray.item_removed.connect(remove_item);
     }
@@ -112,23 +113,19 @@ class SysTray : Gtk.Box {
             return;
 
         var item = tray.get_item(id);
-
-        var btn = new Gtk.MenuButton() {
-          use_popover = false
-        };
-        var icon = new Astal.Icon();
+        var btn = new Gtk.MenuButton() { use_popover = false, visible = true };
+        var icon = new Astal.Icon() { visible = true };
 
         item.bind_property("tooltip-markup", btn, "tooltip-markup", BindingFlags.SYNC_CREATE);
         item.bind_property("gicon", icon, "g-icon", BindingFlags.SYNC_CREATE);
         item.bind_property("menu-model", btn, "menu-model", BindingFlags.SYNC_CREATE);
         btn.insert_action_group("dbusmenu", item.action_group);
         item.notify["action-group"].connect(() => {
-          btn.insert_action_group("dbusmenu", item.action_group);
+            btn.insert_action_group("dbusmenu", item.action_group);
         });
 
         btn.add(icon);
         add(btn);
-        btn.show_all();
         items.set(id, btn);
     }