more styling!!!

widget/Calendar.tsx

@@ -12,7 +12,7 @@ function Calendar() {
         label={time().as((t) => ` ${t}`)}
         tooltip_text={date().as((d) => `󰸗  ${d}`)}
       />
-      <popover>
+      <popover cssClasses={["CalendarMenu"]}>
         <Gtk.Calendar />
       </popover>
     </menubutton>

widget/OS.tsx

@@ -1,9 +1,10 @@
 import { GLib } from "astal";
-import { Gtk } from "astal/gtk4";
+import { Gdk, Gtk } from "astal/gtk4";
 
 const OS = function () {
   return (
     <button
+      cursor={Gdk.Cursor.new_from_name("pointer", null)}
       onClicked="echo hello"
       hexpand
       halign={Gtk.Align.START}

widget/SwayNC.tsx

@@ -35,10 +35,11 @@ const SwayNC = function () {
 
   return (
     <button
+      cssClasses={["SwayNC"]}
       cursor={Gdk.Cursor.new_from_name("pointer", null)}
       onClicked={() => exec("swaync-client -t -sw")}
-      label={options().as((options) => ` ${Icon(options?.alt ?? "none")} `)}
-    ></button>
+      label={options().as((options) => `${Icon(options?.alt ?? "none")}`)}
+    />
   );
 };