labwc: redesign based on Ghaf UI initial prototype

This aligns the system design closer to the prototypes in Figma. Adds
some helper functions for PNG manipulation and SVG conversion.

Signed-off-by: Humaid Alqasimi <humaid.alqassimi@tii.ae>

lib/icons.nix

@@ -0,0 +1,94 @@
+# Copyright 2024 TII (SSRC) and the Ghaf contributors
+# SPDX-License-Identifier: Apache-2.0
+{pkgs, ...}: rec {
+  /*
+    *
+  Resizes a PNG to fit the given size.
+
+  # Inputs
+
+  `name`
+
+  : Name of the file, this will be included in the output filename.
+
+  `path`
+
+  : Path of the original PNG file to be resized.
+
+  `size`
+
+  : The new size for the image (<height>x<width>).
+
+  # Type
+
+  ```
+  resizePNG :: [String] -> [String] -> [String] -> [String]
+  ```
+
+  # Example
+  :::{.example}
+  ## Simple example
+
+  ```nix
+  resizePNG "my-icon" ./my-icon-hi-res.png "24x24";
+  ```
+
+  :::
+
+  */
+  resizePNG = name: path: size: let
+    out = pkgs.runCommand "${name}-${size}" {} ''
+      mkdir -p $out
+      ${pkgs.buildPackages.imagemagick}/bin/convert \
+        ${path} \
+        -resize ${size} \
+        $out/${name}.png
+    '';
+  in "${out}/${name}.png";
+
+  /*
+    *
+  Converts an SVG file to a PNG of a specific size.
+
+  # Inputs
+
+  `name`
+
+  : Name of the file, this will be included in the output filename.
+
+  `path`
+
+  : Path of the original SVG file to be converted.
+
+  `size`
+
+  : The size of the PNG image to be rendered.
+
+  # Type
+
+  ```
+  svgToPNG :: [String] -> [String] -> [String] -> [String]
+  ```
+
+  # Example
+  :::{.example}
+  ## Simple example
+
+  ```nix
+  svgToPNG "my-icon" ./my-icon.svg "24x24";
+  ```
+
+  :::
+
+  */
+  svgToPNG = name: path: size: let
+    sizes = builtins.split "x" size;
+    width = builtins.head sizes;
+    height = builtins.elemAt sizes 2;
+    out = pkgs.runCommand "${name}-${size}" {} ''
+      mkdir -p $out
+        ${pkgs.librsvg}/bin/rsvg-convert ${path} -o $out/${name}.png \
+          --width=${width} --height=${height} --keep-aspect-ratio
+    '';
+  in "${out}/${name}.png";
+}

modules/desktop/graphics/fonts.nix

@@ -10,6 +10,7 @@
 in {
   config = lib.mkIf (weston.enable || labwc.enable) {
     fonts.packages = with pkgs; [
+      inter
       fira-code-nerdfont
       hack-font
     ];

modules/desktop/graphics/ghaf-launcher.nix

@@ -10,22 +10,31 @@
   drawerCSS = writeTextDir "nwg-drawer/drawer.css" ''
     /* Example configuration from: https://github.com/nwg-piotr/nwg-drawer/blob/main/drawer.css */
     window {
-        background-color: rgba (43, 48, 59, 0.95);
-        color: #eeeeee
+        background-color: rgba(32, 32, 32, 0.9);
+        color: #eeeeee;
+        border-radius: 7px;
+        border: 1px solid rgba(21, 36, 24, 0.3);
+        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
     }
 
     /* search entry */
     entry {
-        background-color: rgba (0, 0, 0, 0.2)
+        background-color: rgba (43, 43, 43, 1);
+        border: 1px solid rgba(46, 46, 46, 1);
+    }
+    entry:focus {
+        box-shadow: none;
+        border: 1px solid rgba(223, 92, 55, 1);
     }
 
     button, image {
         background: none;
-        border: none
+        border: none;
+        box-shadow: none;
     }
 
     button:hover {
-        background-color: rgba (255, 255, 255, 0.1)
+        background-color: rgba (255, 255, 255, 0.06)
     }
 
     /* in case you wanted to give category buttons a different look */
@@ -51,5 +60,5 @@ in
     export XDG_CONFIG_HOME=${drawerCSS}
     export XDG_CACHE_HOME=$HOME/.cache
     ${coreutils}/bin/mkdir -p $XDG_CACHE_HOME
-    ${nwg-drawer}/bin/nwg-drawer
+    ${nwg-drawer}/bin/nwg-drawer -mb 20 -ml 440 -mr 440 -mt 420 -nofs -nocats
   ''