tray icons fixed

style.scss

@@ -20,19 +20,19 @@ button {
   all: initial;
 
   font-family: inherit;
+  background: $base100;
+  transition:
+    border 0.35s,
+    background 0.35s,
+    color 0.35s;
+  border-radius: 8px;
+  padding: 0 8px;
+}
 
+button:hover {
+  background: $primary;
   label {
-    transition:
-      border 0.35s,
-      background 0.35s,
-      color 0.35s;
-    background: $base100;
-  }
-
-  label:hover {
-    background: $primary;
     color: $base300;
-    // border: 3px solid $primary;
   }
 }
 
@@ -42,9 +42,6 @@ label {
   font-family: inherit;
   font-size: 14px;
   color: $basecontent;
-  padding: 0 12px;
-  // background: $base200;
-  border-radius: 8px;
 }
 
 popover > contents {
@@ -77,7 +74,7 @@ popover > contents {
 .Pywal {
   label {
     font-size: 16px;
-    padding: 4px 16px 4px 10px;
+    padding: 4px 6px 4px 2px;
   }
 }
 
@@ -97,10 +94,10 @@ popover > contents {
 }
 
 .Tray > * {
-  margin: 0 6px;
+  margin: 0 2px;
 
   image {
-    -gtk-icon-size: 20px;
+    -gtk-icon-size: 18px;
   }
 }
 
@@ -123,6 +120,27 @@ popover > contents {
   }
 }
 
+.TrayMenu {
+  all: initial;
+
+  contents {
+    button {
+      margin: 4px;
+      padding: 4px;
+      border-radius: 8px;
+      background: $base200;
+      transition:
+        border 0.5s,
+        background 0.5s;
+
+      &:hover {
+        color: $base300;
+        background: $primary;
+      }
+    }
+  }
+}
+
 .CalendarMenu {
   contents {
     button {

widget/Tray.tsx

@@ -5,13 +5,15 @@ import AstalTray from "gi://AstalTray";
 const TrayItem = function ({ item }: { item: AstalTray.TrayItem }) {
 	const popover = Gtk.PopoverMenu.new_from_model(item.menu_model);
 	popover.insert_action_group("dbusmenu", item.action_group);
+	popover.add_css_class("TrayItem");
 
 	return (
 		<menubutton
 			cursor={Gdk.Cursor.new_from_name("pointer", null)}
-			icon_name={item.icon_name}
 			popover={popover}
-		/>
+		>
+			<image gicon={item.gicon} cssClasses={["Label"]} />
+		</menubutton>
 	);
 };