update styling

widget/Calendar.tsx

@@ -8,9 +8,8 @@ function Calendar() {
   return (
     <menubutton hexpand halign={Gtk.Align.END}>
       <label
-        cssClasses={["Button"]}
         cursor={Gdk.Cursor.new_from_name("pointer", null)}
-        label={time().as((t) => `  ${t}`)}
+        label={time().as((t) => ` ${t}`)}
         tooltip_text={date().as((d) => `󰸗  ${d}`)}
       />
       <popover>

widget/Hyprland/client.tsx

@@ -6,6 +6,7 @@ const hyprland = Hyprland.get_default();
 function Client() {
   return (
     <label
+      cssClasses={["no-styles"]}
       label={bind(hyprland, "focused_client").as((fc) => fc.initialTitle)}
     />
   );

widget/Internet.tsx

@@ -23,9 +23,8 @@ function Internet() {
   return (
     <box>
       <label
-        cssClasses={["Label"]}
         label={bind(network, "wifi").as(
-          (w) => `${icon(w.strength)}  ${w.strength}%`,
+          (w) => `${icon(w.strength)} ${w.strength}%`,
         )}
         hasTooltip={true}
         tooltip_text={bind(network, "wifi").as((w) => w.ssid)}

widget/Memory.tsx

@@ -7,12 +7,7 @@ const Memory = function () {
     (value) => Number(value),
   );
 
-  return (
-    <label
-      cssClasses={["Label"]}
-      label={bind(usage).as((usage) => `  ${usage.toFixed()} %`)}
-    />
-  );
+  return <label label={bind(usage).as((usage) => ` ${usage.toFixed()}%`)} />;
 };
 
 export default Memory;

widget/SwayNC.tsx

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

widget/Tray.tsx

@@ -12,7 +12,7 @@ const Tray = function () {
   }
 
   return (
-    <box cssClasses={["Tray", "Label"]}>
+    <box cssClasses={["Tray"]}>
       {bind(trayItems).as((items) =>
         items.map((item) => {
           return (

widget/WirePlumber.tsx

@@ -30,7 +30,6 @@ const WirePlumber = function () {
           label={bind(defaultSpeaker, "volume").as(
             (volume) => `  ${Math.floor(volume * 100)}%`,
           )}
-          cssClasses={["Button"]}
           hasTooltip={true}
           tooltipText={bind(defaultSpeaker, "description").as(
             (description) => description,
@@ -41,8 +40,7 @@ const WirePlumber = function () {
             {speakers.map((speaker) => (
               <button
                 cssClasses={bind(speaker, "is_default").as((is_default) => [
-                  "Button",
-                  is_default ? "Button-Active" : "",
+                  is_default ? "active" : "",
                 ])}
                 cursor={Gdk.Cursor.new_from_name("pointer", null)}
                 onClicked={() => speaker.set_is_default(true)}