Polish bar spacing and clock module with custom clock icon

modules/home/ags/app/style.scss

@@ -43,7 +43,7 @@ $module-bg: transparentize($base02, 0.4);
 .bar .end,
 .bar .last {
     background: $module-bg;
-    padding: 0 10px;
+    padding: 2px 10px;
 
     &:hover {
         background: $base03;
@@ -57,12 +57,12 @@ $module-bg: transparentize($base02, 0.4);
 
 .bar .center {
     border-radius: $radius;
-    margin: 0 2px;
+    margin: 2px;
 }
 
 .bar .end {
     border-radius: ($radius * 0.75) ($radius * 2) ($radius * 0.75) ($radius * 2);
-    margin: 0 2px;
+    margin: 2px;
 }
 
 .bar .last {
@@ -79,6 +79,10 @@ $module-bg: transparentize($base02, 0.4);
     font-weight: bold;
 }
 
+.clock icon {
+    font-size: 12px;
+}
+
 .ws {
     min-width: 20px;
     border-radius: 6px;
@@ -95,10 +99,12 @@ $module-bg: transparentize($base02, 0.4);
     background: transparentize($base05, 0.88);
 }
 
-.quicksettings icon,
+.quicksettings icon {
+    font-size: 12px;
+}
+
 .wifi icon,
-.wifi-header icon,
-.battery icon {
+.wifi-header icon {
     font-size: 16px;
 }
 

modules/home/ags/app/widget/Clock.tsx

@@ -8,5 +8,10 @@ const time = Variable("").poll(1000, () => {
 })
 
 export default function Clock() {
-    return <label className="clock" label={bind(time)} />
+    return (
+        <box spacing={6}>
+            <icon icon="clock-hands-symbolic" />
+            <label className="clock" label={bind(time)} />
+        </box>
+    )
 }

modules/home/ags/default.nix

@@ -77,6 +77,16 @@ in
       pkgs.nixos-icons
     ];
 
+    # clock face with hands at 12 and 3; adwaita has no such icon.
+    # fill-only paths: gtk symbolic recoloring turns stroke shapes into solids
+    xdg.dataFile."icons/hicolor/scalable/actions/clock-hands-symbolic.svg".text = ''
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+        <path fill="currentColor" fill-rule="evenodd" d="M8 1.5A6.5 6.5 0 1 0 8 14.5A6.5 6.5 0 1 0 8 1.5ZM8 3A5 5 0 1 0 8 13A5 5 0 1 0 8 3Z"/>
+        <rect x="7.4" y="3.8" width="1.2" height="4.8" rx="0.6" fill="currentColor"/>
+        <rect x="7.4" y="7.4" width="3.4" height="1.2" rx="0.6" fill="currentColor"/>
+      </svg>
+    '';
+
     wayland.windowManager.hyprland = mkIf hyprlandCfg.enable {
       settings.exec-once = [ "ags-bar" ];
     };