config/ags/js/bar/bar.js

@@ -8,7 +8,6 @@ import { Heart }          from './heart.js';
 import { TabletToggle }   from './tablet-toggle.js';
 import { QsToggle }       from './quick-settings.js';
 import { NotifButton }    from './notif-button.js';
-import { Clock }    from './clock.js';
 
 export const Bar = Window({
   name: 'left-bar',
@@ -53,10 +52,6 @@ export const Bar = Window({
       Box({
         halign: 'end',
         children: [
-          Clock,
-
-          Separator(12),
-
           NotifButton,
 
           Separator(12),

config/ags/js/bar/clock.js

@@ -1,18 +0,0 @@
-const { Box, Label } = ags.Widget;
-const { execAsync } = ags.Utils;
-const { DateTime } = imports.gi.GLib;
-
-const ClockModule = ({
-    format = '%a. %e %b. %H:%M',
-    interval = 1000,
-    ...props
-}) => Label({
-    ...props,
-    className: 'clock',
-    connections: [[interval, label => label.label = DateTime.new_now_local().format(format)]],
-});
-
-export const Clock = Box({
-  className: 'toggle-off',
-  child: ClockModule({}),
-});

config/ags/js/bar/current-window.js

@@ -6,7 +6,6 @@ const { Gtk } = imports.gi;
 
 const currentWindow = () => Label({
   style: 'color: #CBA6F7; font-size: 18px',
-  truncate: 'end',
   connections: [
     [Hyprland, label => {
       label.label = Hyprland.active.client.title;

config/ags/scss/widgets/traybuttons.scss

@@ -22,6 +22,15 @@
   }
 }
 
+.filler {
+  border-left: 2px solid $contrastbg;
+  border-right: 2px solid $contrastbg;
+  min-height: 14px;
+  min-width: 105px;
+  background-color: $bg;
+  transition: all 0.5s;
+}
+
 .quick-settings-toggle {
   font-size: 24px;
   min-height: 40px;
@@ -53,12 +62,3 @@
   transition: background-color 0.5s ease-in-out,
               border 0.5s ease-in-out;
 }
-
-.clock {
-  font-size: 20px;
-  padding-left: 10px;
-  padding-right: 10px;
-  min-width: 230px;
-  border: 2px solid rgba(#382c4a, 0.8);
-  border-radius: 80px;
-}

config/ags/style.css

@@ -58,6 +58,14 @@
     border-bottom-right-radius: 0px;
     border-bottom: 0px solid rgba(40, 42, 54, 0.8); }
 
+.filler {
+  border-left: 2px solid rgba(189, 147, 249, 0.8);
+  border-right: 2px solid rgba(189, 147, 249, 0.8);
+  min-height: 14px;
+  min-width: 105px;
+  background-color: rgba(40, 42, 54, 0.8);
+  transition: all 0.5s; }
+
 .quick-settings-toggle {
   font-size: 24px;
   min-height: 40px;
@@ -83,14 +91,6 @@
   background-color: rgba(127, 132, 156, 0.4);
   transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
 
-.clock {
-  font-size: 20px;
-  padding-left: 10px;
-  padding-right: 10px;
-  min-width: 230px;
-  border: 2px solid rgba(56, 44, 74, 0.8);
-  border-radius: 80px; }
-
 .workspaces {
   background-color: rgba(40, 42, 54, 0.8);
   border-radius: 80px;