Merge branch 'main' into task/upgrade-papaparse-to-version-5.5.3

CHANGELOG.md

@@ -7,10 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Integrated a theme switcher into _Storybook_ to support toggling between the light and dark mode
+
 ### Changed
 
 - Upgraded `papaparse` from version `5.3.1` to `5.5.3`
 
+### Fixed
+
+- Optimized the spacing of the logo in the header
+- Fixed the _Storybook_ setup by resolving missing `@angular/material` styles
+
 ## 3.0.1 - 2026-04-26
 
 ### Changed

apps/client/src/app/components/header/header.component.html

@@ -2,13 +2,13 @@
   @if (user) {
     <div class="d-flex h-100 logo-container" [ngClass]="{ filled: hasTabs }">
       <a
-        class="align-items-center h-100 justify-content-start rounded-0"
+        class="align-items-center h-100 justify-content-start px-2 px-sm-3 rounded-0"
         mat-button
         [ngClass]="{ 'w-100': hasTabs }"
         [routerLink]="['/']"
         (click)="onLogoClick()"
       >
-        <gf-logo class="px-2" [label]="pageTitle" />
+        <gf-logo [label]="pageTitle" />
       </a>
     </div>
     <span class="gf-spacer"></span>
@@ -334,13 +334,12 @@
   @if (user === null) {
     <div class="d-flex h-100 logo-container" [ngClass]="{ filled: hasTabs }">
       <a
-        class="align-items-center h-100 justify-content-start rounded-0"
+        class="align-items-center h-100 justify-content-start px-2 px-sm-3 rounded-0"
         mat-button
         [ngClass]="{ 'w-100': hasTabs }"
         [routerLink]="['/']"
       >
         <gf-logo
-          class="px-2"
           [label]="pageTitle"
           [showLabel]="currentRoute !== 'register'"
         />

libs/ui/.storybook/main.mjs

@@ -5,7 +5,10 @@ const require = createRequire(import.meta.url);
 
 /** @type {import('@storybook/angular').StorybookConfig} */
 const config = {
-  addons: [getAbsolutePath('@storybook/addon-docs')],
+  addons: [
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-themes')
+  ],
   framework: {
     name: getAbsolutePath('@storybook/angular'),
     options: {}

libs/ui/.storybook/preview.js

@@ -0,0 +1,20 @@
+import { withThemeByClassName } from '@storybook/addon-themes';
+
+const preview = {
+  decorators: [
+    withThemeByClassName({
+      defaultTheme: 'Light',
+      parentSelector: 'body',
+      themes: {
+        Dark: 'theme-dark',
+        Light: 'theme-light'
+      }
+    })
+  ]
+};
+
+if (typeof document !== 'undefined') {
+  document.body.classList.add('mat-typography');
+}
+
+export default preview;

package-lock.json

@@ -125,6 +125,7 @@
         "@nx/workspace": "22.6.5",
         "@schematics/angular": "21.2.6",
         "@storybook/addon-docs": "10.1.10",
+        "@storybook/addon-themes": "10.1.10",
         "@storybook/angular": "10.1.10",
         "@trivago/prettier-plugin-sort-imports": "6.0.2",
         "@types/big.js": "6.2.2",
@@ -13462,6 +13463,23 @@
         "storybook": "^10.1.10"
       }
     },
+    "node_modules/@storybook/addon-themes": {
+      "version": "10.1.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-themes/-/addon-themes-10.1.10.tgz",
+      "integrity": "sha512-YlTzREQnUFZ6wepo4MppiobkFrsF1EuObh+vaEhjEj5Cs1oH+kqP5Db+rXi8rbrxnVXaWKmDgqZMtB7kVN4Dnw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^10.1.10"
+      }
+    },
     "node_modules/@storybook/angular": {
       "version": "10.1.10",
       "resolved": "https://registry.npmjs.org/@storybook/angular/-/angular-10.1.10.tgz",

package.json

@@ -170,6 +170,7 @@
     "@nx/workspace": "22.6.5",
     "@schematics/angular": "21.2.6",
     "@storybook/addon-docs": "10.1.10",
+    "@storybook/addon-themes": "10.1.10",
     "@storybook/angular": "10.1.10",
     "@trivago/prettier-plugin-sort-imports": "6.0.2",
     "@types/big.js": "6.2.2",