New layout design (#744)

* Change font and icons weight

* Improve "info" and "landing" pages

* Improving menu

* Improve i18n menu

* Improve header nav on mobile

* Add a tagline in the home page

* Adjust Nunito font thikness and fine tuning on landing pages

* Sign-in page with credentials using dialog

* Improve buttons a11y and the design of the burger button

* Update packages (client, server, docs-source) and run docs

* server: update packages (updating parameter for new auth.JWT(options))

Author: avine

client/e2e/pages/sign-in.page.ts

@@ -8,9 +8,10 @@ export class SignInPage {
   }
 
   async signIn(persona: Persona) {
+    await this.page.getByRole('button', { name: 'Se connecter avec identifiants' }).click();
     await this.page.getByLabel('Email').fill(persona);
-    await this.page.getByLabel('Mot de passe').fill('zenika');
-    await this.page.getByRole('button', { name: 'Se connecter' }).click();
+    await this.page.getByLabel('Mot de passe', { exact: true }).fill('zenika');
+    await this.page.getByRole('button', { name: 'Se connecter', exact: true }).click();
 
     await this.page.waitForURL('/fr/home');
   }

client/e2e/pages/user-menu.page.ts

@@ -6,7 +6,7 @@ export class UserMenuPage {
   async signOut() {
     expect(this.page.url(), 'Should not be in sign-in page when trying to sign-out').not.toMatch(/sign-in/);
 
-    await this.page.getByLabel('Menu utilisateur').click();
+    await this.page.getByLabel('Préférences & paramètres').click();
     await this.page.getByRole('menuitem', { name: 'Se déconnecter' }).click();
 
     await this.page.waitForURL('/fr/sign-in');

client/package-lock.json

@@ -3,9 +3,9 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --no-hmr",
-    "start:en": "ng serve --no-hmr -c development-en",
-    "start:emulators": "ng serve --no-hmr -c development-emulators",
+    "start": "ng serve",
+    "start:en": "ng serve -c development-en",
+    "start:emulators": "ng serve -c development-emulators",
     "build": "ng build",
     "build:dev": "ng build -c development-remote && npm run post-build",
     "build:e2e": "ng build -c development,emulators --localize --base-href=\"/\" && npm run post-build",
@@ -37,56 +37,56 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.2.0",
-    "@angular/cdk": "^19.2.1",
-    "@angular/common": "^19.2.0",
-    "@angular/compiler": "^19.2.0",
-    "@angular/core": "^19.2.0",
-    "@angular/forms": "^19.2.0",
-    "@angular/material": "^19.2.1",
-    "@angular/material-date-fns-adapter": "^19.2.1",
-    "@angular/platform-browser": "^19.2.0",
-    "@angular/platform-browser-dynamic": "^19.2.0",
-    "@angular/router": "^19.2.0",
-    "@fontsource/nunito": "^5.1.1",
-    "@material-symbols/font-600": "^0.28.2",
+    "@angular/animations": "^19.2.14",
+    "@angular/cdk": "^19.2.19",
+    "@angular/common": "^19.2.14",
+    "@angular/compiler": "^19.2.14",
+    "@angular/core": "^19.2.14",
+    "@angular/forms": "^19.2.14",
+    "@angular/material": "^19.2.19",
+    "@angular/material-date-fns-adapter": "^19.2.19",
+    "@angular/platform-browser": "^19.2.14",
+    "@angular/platform-browser-dynamic": "^19.2.14",
+    "@angular/router": "^19.2.14",
+    "@fontsource/nunito": "^5.2.6",
+    "@material-symbols/font-500": "^0.29.3",
     "canvas-confetti": "^1.9.3",
     "date-fns": "^4.1.0",
     "echarts": "^5.6.0",
-    "firebase": "^11.4.0",
+    "firebase": "^11.10.0",
     "js-cookie": "^3.0.5",
     "ngx-echarts": "^19.0.0",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
-    "zone.js": "~0.15.0"
+    "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular/build": "^19.2.0",
-    "@angular/cli": "^19.2.0",
-    "@angular/compiler-cli": "^19.2.0",
-    "@angular/localize": "^19.2.0",
-    "@playwright/test": "^1.50.1",
-    "@tailwindcss/postcss": "^4.0.9",
+    "@angular/build": "^19.2.15",
+    "@angular/cli": "^19.2.15",
+    "@angular/compiler-cli": "^19.2.14",
+    "@angular/localize": "^19.2.14",
+    "@playwright/test": "^1.55.0",
+    "@tailwindcss/postcss": "^4.1.12",
     "@types/canvas-confetti": "^1.9.0",
     "@types/jest": "^29.5.14",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^22.13.5",
-    "angular-eslint": "^19.1.0",
-    "autoprefixer": "^10.4.20",
-    "concurrently": "^9.1.2",
-    "eslint": "^9.21.0",
-    "eslint-config-prettier": "^10.0.2",
-    "eslint-plugin-prettier": "^5.2.3",
-    "firebase-tools": "^13.32.0",
+    "@types/node": "^22.17.2",
+    "angular-eslint": "^19.8.1",
+    "autoprefixer": "^10.4.21",
+    "concurrently": "^9.2.0",
+    "eslint": "^9.34.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "firebase-tools": "^13.35.1",
     "jest": "^29.7.0",
-    "jest-preset-angular": "^14.5.3",
-    "postcss": "^8.5.3",
-    "prettier": "^3.5.2",
-    "prettier-plugin-organize-imports": "^4.1.0",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "^4.0.9",
+    "jest-preset-angular": "^14.6.1",
+    "postcss": "^8.5.6",
+    "prettier": "^3.6.2",
+    "prettier-plugin-organize-imports": "^4.2.0",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "tailwindcss": "^4.1.12",
     "ts-node": "^10.9.2",
-    "typescript": "~5.7.3",
-    "typescript-eslint": "^8.25.0"
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.40.0"
   }
 }

client/package.json

@@ -24,7 +24,7 @@ import { ElementToBgColorPipe } from './element-to-bg-color.pipe';
   encapsulation: ViewEncapsulation.None,
 })
 export class ColorDemoComponent {
-  #document = inject(DOCUMENT);
+  private document = inject(DOCUMENT);
 
   protected displayHexColor = true;
 
@@ -122,6 +122,6 @@ export class ColorDemoComponent {
   });
 
   protected toClipboard(color: string) {
-    this.#document.defaultView?.navigator.clipboard.writeText(color);
+    this.document.defaultView?.navigator.clipboard.writeText(color);
   }
 }

client/public/assets/images/landing-picture.png

@@ -6,10 +6,10 @@ import { extractRgb, rgbToHex } from './element-to-bg-color.utils';
   name: 'elementToBgColor',
 })
 export class ElementToBgColorPipe implements PipeTransform {
-  #document = inject(DOCUMENT);
+  private document = inject(DOCUMENT);
 
   transform(element: HTMLElement, displayHexColor = false): string {
-    const backgroundColor = this.#document.defaultView?.getComputedStyle(element).backgroundColor;
+    const backgroundColor = this.document.defaultView?.getComputedStyle(element).backgroundColor;
     if (!backgroundColor) {
       return '';
     }