updated waybar look and buggy clock

.config/waybar/config

@@ -8,7 +8,7 @@
     // Choose the order of the modules
     "modules-left": ["sway/workspaces", "sway/mode", "sway/scratchpad", "custom/media"],
     "modules-center": ["sway/window"],
-    "modules-right": ["idle_inhibitor", "pulseaudio", "network", "cpu", "memory", "temperature", "backlight", "keyboard-state", "sway/language", "battery", "battery#bat2", "clock", "tray"],
+    "modules-right": ["idle_inhibitor", "pulseaudio", "network", "cpu", "memory", "temperature", "backlight", "sway/language", "battery", "battery#bat2", "custom/clock", "tray"],
     // Modules configuration
     // "sway/workspaces": {
     //     "disable-scroll": true,
@@ -83,13 +83,16 @@
         "spacing": 10
     },
     "clock": {
-        // "timezone": "America/New_York",
+        "timezone": "Europe/Berlin",
         "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
         "format-alt": "{:%Y-%m-%d}"
     },
     "custom/clock": {
-        "exec": "echo '  '$(date +'%H:%M')'  '",
+        "exec": "$HOME/.config/waybar/scripts/custom_clock",
-        "format": "<big>{}</big>",
+        "on-click": "thunderbird -calendar",
+        "return-type": "json",
+        "format": "<b>{}</b>",
+        "tooltip": true,
         "interval": 5
     },
     "cpu": {
@@ -114,7 +117,6 @@
     },
     "battery": {
         "states": {
-            "good": 95,
             "warning": 30,
             "critical": 15
         },

.config/waybar/scripts/custom_clock

@@ -0,0 +1,17 @@
+#!/usr/bin/env python3
+
+import json
+import subprocess
+import sys
+
+cmd = ['date', "+%H:%M"]
+result = subprocess.run(cmd, capture_output=True, text=True)
+
+time = result.stdout.strip('\n')
+
+cmd = ['date', "+%a, %d.%m.%Y"]
+result = subprocess.run(cmd, capture_output=True, text=True)
+date = result.stdout.strip('\n')
+
+sys.stdout.write(json.dumps({'text': time, 'tooltip': date}))
+

.config/waybar/style.css

@@ -1,7 +1,7 @@
 @import "frappe.css";
 * {
     /* `otf-font-awesome` is required to be installed for icons */
-    font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif;
+    font-family: FontAwesome, Noto Sans, sans-serif;
     font-size: 16px;
 }
 
@@ -73,7 +73,7 @@ button:hover {
 #workspaces button.focused {
     background: alpha(@lavender, 0.1);
     color: @green;
-    box-shadow: inset 0 -3px @peach;
+    box-shadow: inset 0 -3px @green;
 }
 
 #workspaces button.urgent {
@@ -82,7 +82,7 @@ button:hover {
 
 #mode {
     background-color: @crust;
-    border-bottom: 3px solid @peach;
+    border-bottom: 3px solid @green;
 }
 
 #clock,
@@ -120,16 +120,26 @@ button:hover {
     margin-right: 0;
 }
 
-#clock {
+#clock, #custom-clock {
+    padding-left: 1ex;
+    padding-right: 1ex;
     background-color: @crust;
     color: @text;
 }
 
 #battery {
     background-color: @crust;
+    color: @green;
+}
+
+#battery.warning {
     color: @yellow;
 }
 
+#battery.critical {
+    color: @red;
+}
+
 #battery.charging, #battery.plugged {
     color: @blue;
     background-color: @crust;
@@ -158,27 +168,27 @@ label:focus {
 
 #cpu {
     background-color: @crust;
-    color: @peach;
+    color: @green;
 }
 
 #memory {
     background-color: @crust;
-    color: @peach;
+    color: @green;
 }
 
 #disk {
     background-color: @crust;
-    color: @peach;
+    color: @green;
 }
 
 #backlight {
     background-color: @crust;
-    color: @peach;
+    color: @green;
 }
 
 #network {
     background-color: @crust;
-    color: @peach;
+    color: @green;
 }
 
 #network.disconnected {
@@ -188,7 +198,7 @@ label:focus {
 
 #pulseaudio {
     background-color: @crust;
-    color: @peach;
+    color: @green;
 }
 
 #pulseaudio.muted {
@@ -198,7 +208,7 @@ label:focus {
 
 #wireplumber {
     background-color: @crust;
-    color: @peach;
+    color: @green;
 }
 
 #wireplumber.muted {
@@ -222,7 +232,7 @@ label:focus {
 
 #temperature {
     background-color: @crust;
-    color: @peach;
+    color: @green;
 }
 
 #temperature.critical {
@@ -244,7 +254,7 @@ label:focus {
 
 #idle_inhibitor {
     background-color: @crust;
-    color: @peach;
+    color: @green;
 }
 
 #idle_inhibitor.activated {
@@ -271,14 +281,14 @@ label:focus {
 
 #language {
     background: @crust;
-    color: @peach;
+    color: @green;
     padding: 0 5px;
     min-width: 16px;
 }
 
 #keyboard-state {
     background: @crust;
-    color: @peach;
+    color: @green;
     padding: 0 0px;
     min-width: 16px;
 }