more styling!!!

style.scss

@@ -13,7 +13,6 @@ $mauve: #8839ef;
 
 :root {
   font-family: JetBrainsMono Nerd Font;
-  color: $mauve;
 }
 
 button {
@@ -21,6 +20,10 @@ button {
 
   font-family: inherit;
 
+  label {
+    background: $mantle;
+  }
+
   label:hover {
     background: $crust;
   }
@@ -30,15 +33,17 @@ label {
   all: initial;
 
   font-family: inherit;
-  color: $mauve;
+  color: $rosewater;
-  padding: 4px 12px;
+  padding: 2px 12px;
-  background: $mantle;
+  background: $crust;
   border: 4px solid $crust;
   border-radius: 8px;
 }
 
 .no-styles {
   all: initial;
+
+  color: $rosewater;
 }
 
 .active {
@@ -49,12 +54,13 @@ label {
 
 .Arch {
   -gtk-icon-size: 24px;
-  padding: 4px 10px;
+  padding: 4px 8px;
   border-radius: 8px;
-  background: $crust;
+  border: 4px solid $crust;
+  background: $mantle;
 
   &:hover {
-    background: $surface0;
+    background: $crust;
   }
 }
 
@@ -65,6 +71,12 @@ label {
   }
 }
 
+.SwayNC {
+  label {
+    padding: 0 12px;
+  }
+}
+
 .Tray {
   margin: 0 4px;
 }
@@ -79,19 +91,22 @@ label {
 
 .Workspaces {
   background: $mantle;
-  padding: 2px;
-  margin: 2px;
   border-radius: 8px;
   border: 4px solid $crust;
 
   > * {
-    margin: 4px;
+    margin: 2px;
   }
 }
 
 .WirePlumberMenu {
   contents {
     all: initial;
+
+    padding: 4px 12px;
+    border-radius: 8px;
+    border: 4px solid $crust;
+    background: rgba($color: $base, $alpha: 0.75);
   }
 
   arrow {
@@ -101,12 +116,28 @@ label {
   button {
     margin: 4px 0;
   }
+}
+
+.CalendarMenu {
+  contents {
+    // all: initial;
+
+    grid button {
+      margin: 4px;
+    }
+
+    label {
+      margin: 4px;
+    }
 
-  box {
     padding: 4px 12px;
     border-radius: 8px;
     border: 4px solid $crust;
-    background: rgba($color: $mantle, $alpha: 0.9);
+    background: rgba($color: $base, $alpha: 0.75);
+  }
+
+  arrow {
+    all: initial;
   }
 }
 

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")} `)}
+      label={options().as((options) => `${Icon(options?.alt ?? "none")}`)}
-    ></button>
+    />
   );
 };