From cb5d4fd76d0cc39e7826b9d08e091467bd63e70b Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Sun, 6 Apr 2025 10:06:12 -0400
Subject: [PATCH] update styling

---
 style.scss                 | 145 ++++++++++++++++++-------------------
 widget/Calendar.tsx        |   3 +-
 widget/Hyprland/client.tsx |   1 +
 widget/Internet.tsx        |   3 +-
 widget/Memory.tsx          |   7 +-
 widget/SwayNC.tsx          |   1 -
 widget/Tray.tsx            |   2 +-
 widget/WirePlumber.tsx     |   4 +-
 8 files changed, 78 insertions(+), 88 deletions(-)

diff --git a/style.scss b/style.scss
index 7dc2236..a266392 100644
--- a/style.scss
+++ b/style.scss
@@ -7,19 +7,88 @@ $surface1: #494d64;
 $surface2: #5b6078;
 
 $rosewater: #f4dbd6;
+$flamingo: #dd7878;
+$pink: #ea76cb;
+$mauve: #8839ef;
 
-* {
-  color: $rosewater;
+:root {
   font-family: JetBrainsMono Nerd Font;
+  color: $mauve;
 }
 
 button {
   all: initial;
+
+  font-family: inherit;
+
+  label:hover {
+    color: $base;
+    background: $rosewater;
+  }
+}
+
+label {
+  all: initial;
+
+  font-family: inherit;
+  color: $mauve;
+  padding: 4px 12px;
+  background: $surface0;
+  border-radius: 8px;
+}
+
+.no-styles {
+  all: initial;
+}
+
+.active {
+  label {
+    background: $rosewater;
+    color: $base;
+  }
+}
+
+.Arch {
+  -gtk-icon-size: 24px;
+  padding: 4px 8px 4px 8px;
+  border-radius: 8px;
+  background: $surface0;
+
+  &:hover {
+    background: $rosewater;
+    color: $base;
+  }
+}
+
+.Pywal {
+  label {
+    font-size: 18px;
+    padding: 6px 16px 6px 10px;
+  }
+}
+
+.Tray > * {
+  margin: 0 4px;
+}
+
+.WirePlumberMenu {
+  contents {
+    all: initial;
+  }
+
+  arrow {
+    all: initial;
+  }
+
+  box {
+    padding: 12px;
+    border-radius: 8px;
+    background: rgba($color: $base, $alpha: 0.9);
+  }
 }
 
 window.Bar {
   background: transparent;
-  font-weight: bold;
 
   > centerbox {
     background: rgba($color: $base, $alpha: 0.75);
@@ -32,74 +101,4 @@ window.Bar {
       }
     }
   }
-
-  .Arch {
-    -gtk-icon-size: 24px;
-    padding: 4px 8px 4px 8px;
-    border-radius: 8px;
-    background: $surface0;
-
-    &:hover {
-      background: $rosewater;
-      color: $base;
-    }
-  }
-
-  .Pywal {
-    font-size: 18px;
-    padding: 4px 18px 4px 12px;
-    border-radius: 8px;
-    background: $surface0;
-
-    &:hover {
-      background: $rosewater;
-      color: $base;
-    }
-  }
-
-  .Tray > * {
-    margin: 0 4px;
-  }
-
-  .Button {
-    padding: 4px 12px;
-    border-radius: 8px;
-    background: $surface0;
-
-    &:hover {
-      background: $rosewater;
-      color: $base;
-    }
-  }
-
-  .Label {
-    padding: 4px 12px;
-    border-radius: 8px;
-    background: $surface0;
-  }
-
-  .Button-Active {
-    background: $rosewater;
-    color: $base;
-  }
-
-  .WirePlumberMenu {
-    contents {
-      all: initial;
-    }
-
-    arrow {
-      all: initial;
-    }
-
-    box {
-      padding: 12px;
-      border-radius: 8px;
-      background: rgba($color: $base, $alpha: 0.9);
-
-      & > * {
-        margin: 2px 0;
-      }
-    }
-  }
 }
diff --git a/widget/Calendar.tsx b/widget/Calendar.tsx
index 3510f17..b1455bc 100644
--- a/widget/Calendar.tsx
+++ b/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>
diff --git a/widget/Hyprland/client.tsx b/widget/Hyprland/client.tsx
index 270e1f8..97d2854 100644
--- a/widget/Hyprland/client.tsx
+++ b/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)}
     />
   );
diff --git a/widget/Internet.tsx b/widget/Internet.tsx
index 078defa..88e6339 100644
--- a/widget/Internet.tsx
+++ b/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)}
diff --git a/widget/Memory.tsx b/widget/Memory.tsx
index cfcc464..391c8be 100644
--- a/widget/Memory.tsx
+++ b/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;
diff --git a/widget/SwayNC.tsx b/widget/SwayNC.tsx
index 2b98c6b..057db28 100644
--- a/widget/SwayNC.tsx
+++ b/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>
diff --git a/widget/Tray.tsx b/widget/Tray.tsx
index 3110b86..940e06a 100644
--- a/widget/Tray.tsx
+++ b/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 (
diff --git a/widget/WirePlumber.tsx b/widget/WirePlumber.tsx
index e7d4f62..9902d2f 100644
--- a/widget/WirePlumber.tsx
+++ b/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)}