desktop: using dedicated svgs for the eww bar icons

7 files changed, 20 insertions, 12 deletions

diff --git a/assets/icons/bar/calendar.svg b/assets/icons/bar/calendar.svg
new file mode 100644
index 0000000..64cd923
--- /dev/null
+++ b/assets/icons/bar/calendar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#c8ccd4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-days-icon lucide-calendar-days"><path d="M8 2v3"/><path d="M16 2v3"/><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M8 13h.01"/><path d="M12 13h.01"/><path d="M16 13h.01"/><path d="M8 17h.01"/><path d="M12 17h.01"/><path d="M16 17h.01"/></svg>
diff --git a/assets/icons/bar/cpu.svg b/assets/icons/bar/cpu.svg
new file mode 100644
index 0000000..64d7a86
--- /dev/null
+++ b/assets/icons/bar/cpu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#c8ccd4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cpu-icon lucide-cpu"><path d="M12 20v2"/><path d="M12 2v2"/><path d="M17 20v2"/><path d="M17 2v2"/><path d="M2 12h2"/><path d="M2 17h2"/><path d="M2 7h2"/><path d="M20 12h2"/><path d="M20 17h2"/><path d="M20 7h2"/><path d="M7 20v2"/><path d="M7 2v2"/><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="8" y="8" width="8" height="8" rx="1"/></svg>
diff --git a/assets/icons/bar/ethernet.svg b/assets/icons/bar/ethernet.svg
new file mode 100644
index 0000000..51d0dfa
--- /dev/null
+++ b/assets/icons/bar/ethernet.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#c8ccd4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ethernet-port-icon lucide-ethernet-port"><path d="M10 8v1"/><path d="M14 8v1"/><path d="M18 8v1"/><path d="M19 17a2 2 0 00-1.765 1.059l-.47.882A2 2 0 0115 20H9a2 2 0 01-1.765-1.059l-.47-.882A2 2 0 005 17H4a2 2 0 01-2-2V6a2 2 0 012-2h16a2 2 0 012 2v9a2 2 0 01-2 2z"/><path d="M6 8v1"/></svg>
diff --git a/assets/icons/bar/ram.svg b/assets/icons/bar/ram.svg
new file mode 100644
index 0000000..5280ec8
--- /dev/null
+++ b/assets/icons/bar/ram.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#c8ccd4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-memory-stick-icon lucide-memory-stick"><path d="M12 12v-2"/><path d="M12 18v-2"/><path d="M16 12v-2"/><path d="M16 18v-2"/><path d="M2 11h1.5"/><path d="M20 18v-2"/><path d="M20.5 11H22"/><path d="M4 18v-2"/><path d="M8 12v-2"/><path d="M8 18v-2"/><rect x="2" y="6" width="20" height="10" rx="2"/></svg>
diff --git a/assets/icons/bar/wifi.svg b/assets/icons/bar/wifi.svg
new file mode 100644
index 0000000..8fdcaca
--- /dev/null
+++ b/assets/icons/bar/wifi.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#c8ccd4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wifi-icon lucide-wifi"><path d="M12 20h.01"/><path d="M2 8.82a15 15 0 0 1 20 0"/><path d="M5 12.859a10 10 0 0 1 14 0"/><path d="M8.5 16.429a5 5 0 0 1 7 0"/></svg>
diff --git a/modules/desktop/eww/eww.mustache.scss b/modules/desktop/eww/eww.mustache.scss
index 5004e65..63938a4 100644
--- a/modules/desktop/eww/eww.mustache.scss
+++ b/modules/desktop/eww/eww.mustache.scss
@@ -17,6 +17,10 @@ window#eww-bar {
   margin: 5px;
 }
 
+.windows {
+  margin: 15px 5px;
+}
+
 .workspaces, .windows {
   padding: 5px;
 }
@@ -45,6 +49,10 @@ window#eww-bar {
   border: none;
 }
 
+.system-item .system-icon {
+  color: #{{base07}};
+}
+
 .system-item .system-label.small {
   font-size: 12px;
 }
diff --git a/modules/desktop/eww/yuck.nix b/modules/desktop/eww/yuck.nix
index 03de4bf..77d5949 100644
--- a/modules/desktop/eww/yuck.nix
+++ b/modules/desktop/eww/yuck.nix
@@ -113,9 +113,7 @@
                :class "bar-container"
                :vexpand true
             (workspaces-widget)
-            (box :vexpand true)
             (windows-widget)
-            (box :vexpand true)
             (system-widget)))
 
         (defwidget workspaces-widget []
@@ -131,7 +129,7 @@
                     (label :class "workspace-idx" :text "''${ws.idx}" :halign "end" :valign "end")))))))
 
         (defwidget windows-widget []
-          (box :orientation "v" :space-evenly false :spacing 4 :halign "center" :class "windows"
+          (box :orientation "v" :space-evenly false :spacing 4 :halign "center" :class "windows" :vexpand true
 
             (for w in active-windows
               (eventbox :onclick "niri msg action focus-window --id ''${w.id}"
@@ -143,20 +141,17 @@
 
         (defwidget system-widget []
           (box :orientation "v" :space-evenly false :spacing 6 :halign "fill" :class "system"
+            (box :orientation "v" :class "system-item" :halign "fill" :space-evenly false :spacing 4
+              (image :class "system-icon" :path "${../../../assets/icons/bar/wifi.svg}" :image-width 24 :image-height 24))
             (box :orientation "v" :class "system-item" :space-evenly false :spacing 4
-              (label :class "system-icon" :text "''${system_stats.net == "up" ? "󰤨 " : "󰤭 "}")
-              (label :class "system-label" :text ""))
-            (box :orientation "v" :class "system-item" :space-evenly false :spacing 4
-              (label :class "system-icon" :text " ")
+              (image :class "system-icon" :path "${../../../assets/icons/bar/cpu.svg}" :image-width 24 :image-height 24)
               (label :class "system-label" :text "''${system_stats.cpu}%"))
             (box :orientation "v" :class "system-item" :space-evenly false :spacing 4
-              (label :class "system-icon" :text " ")
+              (image :class "system-icon" :path "${../../../assets/icons/bar/ram.svg}" :image-width 24 :image-height 24)
               (label :class "system-label" :text "''${system_stats.ram}%"))
             (box :orientation "v" :class "system-item" :space-evenly false :spacing 4
-              (label :class "system-icon" :text "󰥔 ")
-              (label :class "system-label small" :text time))
-            (box :orientation "v" :class "system-item" :space-evenly false :spacing 4
-              (label :class "system-icon" :text "")
+              (image :class "system-icon" :path "${../../../assets/icons/bar/calendar.svg}" :image-width 24 :image-height 24)
+              (label :class "system-label small" :text time)
               (label :class "system-label small" :text date))))
       '';
   };