adjust bar colour, add some padding to sys tray icons

2 files changed, 7 insertions, 3 deletions

diff --git a/style.scss b/style.scss
index 1dcf729..f028f45 100644
--- a/style.scss
+++ b/style.scss
@@ -1,6 +1,6 @@
 @use "sass:color";
 
-$bg: #212223;
+$bg: #081221;
 $fg: #f1f1f1;
 $accent: #378DF7;
 $radius: 7px;
@@ -8,7 +8,7 @@ $radius: 7px;
 window.Bar {
     border: none;
     box-shadow: none;
-    background-color: $bg;
+    background-color: color.adjust($bg, $alpha: -0.3);
     color: $fg;
     font-size: 1.1em;
     font-weight: bold;
@@ -89,4 +89,8 @@ window.Bar {
             margin: -.2em;
         }
     }
+
+    .SysTray button {
+        padding-right: 1em;
+    }
 }
diff --git a/widget/Bar.tsx b/widget/Bar.tsx
index efc065a..14ed54b 100644
--- a/widget/Bar.tsx
+++ b/widget/Bar.tsx
@@ -11,7 +11,7 @@ import Tray from "gi://AstalTray"
 function SysTray() {
     const tray = Tray.get_default()
 
-    return <box>
+    return <box className="SysTray">
         {bind(tray, "items").as(items => items.map(item => {
             if (item.iconThemePath)
                 App.add_icons(item.iconThemePath)