From 9712b9e0ea2bc4f4f6d271028e828b61940832c6 Mon Sep 17 00:00:00 2001
From: tux <t@tux.rs>
Date: Sat, 31 May 2025 18:38:40 +0530
Subject: [PATCH] style: add style for time and tray widget

---
 style.scss              | 38 +++++++++++++++++++++++++++-----------
 widget/bar/launcher.tsx | 11 +++++------
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/style.scss b/style.scss
index 905c7ce..a38a9b8 100644
--- a/style.scss
+++ b/style.scss
@@ -16,16 +16,14 @@ window.Bar {
   padding: 10px;
 
   .launcher {
-    button {
-      background-color: $inactive-color;
-      border-radius: $rounded;
-      transition: all 0.15s ease-out;
-      padding: 0px;
-      margin: 0px;
+    background-color: $inactive-color;
+    border-radius: $rounded;
+    transition: all 0.15s ease-out;
+    padding: 0px;
+    margin: 0px;
 
-      &:hover {
-        background-color: $bg-color;
-      }
+    &:hover {
+      background-color: $bg-color;
     }
   }
 
@@ -77,7 +75,16 @@ window.Bar {
     color: $bg-color;
     background-color: $inactive-color;
     border-radius: $rounded;
-    padding: 10px;
+    padding: 0px 10px;
+  }
+
+  .tray {
+    font-size: $font-size;
+    font-weight: 900;
+    color: #fff;
+    background-color: $inactive-color;
+    border-radius: $rounded;
+    padding: 0px 10px;
   }
 
   .battery {
@@ -86,7 +93,16 @@ window.Bar {
     color: $bg-color;
     background-color: $inactive-color;
     border-radius: $rounded;
-    padding: 10px;
+    padding: 0px 10px;
+  }
+
+  .time {
+    font-size: $font-size;
+    font-weight: 900;
+    color: $bg-color;
+    background-color: $inactive-color;
+    border-radius: $rounded;
+    padding: 0px 10px;
   }
 }
 
diff --git a/widget/bar/launcher.tsx b/widget/bar/launcher.tsx
index 9e2d08a..7118140 100644
--- a/widget/bar/launcher.tsx
+++ b/widget/bar/launcher.tsx
@@ -5,12 +5,11 @@ import { WINDOW_NAME } from "../app-launcher";
 
 export const Launcher = () => {
   return (
-    <Gtk.ScrolledWindow
-      heightRequest={40}
-      widthRequest={40}
-      cssClasses={["launcher"]}
-    >
-      <button onClicked={() => App.toggle_window(WINDOW_NAME)}>
+    <Gtk.ScrolledWindow heightRequest={40} widthRequest={40}>
+      <button
+        cssClasses={["launcher"]}
+        onClicked={() => App.toggle_window(WINDOW_NAME)}
+      >
         <Picture
           file={Gio.file_new_for_path("/home/tux/Wallpapers/avatar.png")}
           contentFit={Gtk.ContentFit.CONTAIN}