labwc: redesign based on Ghaf UI initial prototype

This aligns the system design closer to the prototypes in Figma.

Signed-off-by: Humaid Alqasimi <[email protected]>

lib/icons.nix

@@ -0,0 +1,104 @@
+# 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}" {
+        nativeBuildInputs = with pkgs; [
+          buildPackages.imagemagick
+        ];
+      } ''
+        mkdir -p $out
+        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}" {
+        nativeBuildInputs = with pkgs; [
+          librsvg
+        ];
+      } ''
+        mkdir -p $out
+          rsvg-convert ${path} -o $out/${name}.png \
+            --width=${width} --height=${height} --keep-aspect-ratio
+      '';
+  in "${out}/${name}.png";
+}

modules/desktop/graphics/demo-apps.nix

@@ -7,17 +7,12 @@
   ...
 }: let
   cfg = config.ghaf.graphics.demo-apps;
+  inherit (import ../../../lib/icons.nix {inherit pkgs lib;}) resizePNG;
 
   /*
   Scaled down firefox icon
   */
-  firefox-icon = pkgs.runCommand "firefox-icon-24x24" {} ''
-    mkdir -p $out/share/icons/hicolor/24x24/apps
-    ${pkgs.buildPackages.imagemagick}/bin/convert \
-      ${pkgs.firefox}/share/icons/hicolor/128x128/apps/firefox.png \
-      -resize 24x24 \
-      $out/share/icons/hicolor/24x24/apps/firefox.png
-  '';
+  firefox-icon = resizePNG "firefox" "${pkgs.firefox}/share/icons/hicolor/128x128/apps/firefox.png" "24x24";
 
   /*
   Generate launchers to be used in weston.ini
@@ -52,7 +47,7 @@ in {
       ++ lib.optional cfg.firefox {
         name = "firefox";
         path = "${pkgs.firefox}/bin/firefox";
-        icon = "${firefox-icon}/share/icons/hicolor/24x24/apps/firefox.png";
+        icon = "${firefox-icon}";
       }
       ++ lib.optional cfg.element-desktop {
         name = "element";

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
   ''