feat(frontend): design système - tokens, composants ui et restylage des pages

Centralise les couleurs/rayons/espacements dispersés en dur dans chaque page (login, change-password, dashboard) en tokens CSS partagés, ajoute un petit set de composants standalone réutilisables (ev-button, ev-card, ev-alert, ev-badge) et intègre le logo EnerVision en en-tête des pages ainsi que dans Swagger/ReDoc côté backend. Refs #91
2026-09-17 11:14:02 +02:00
parent 3692d486c6
commit 9c78c6dc38
35 changed files with 724 additions and 288 deletions
@@ -0,0 +1,3 @@
+<span class="ev-badge" [class]="'ev-badge--' + tone()">
+  <ng-content></ng-content>
+</span>
@@ -0,0 +1,27 @@
+.ev-badge {
+  display: inline-block;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  padding: 0.2rem 0.55rem;
+  border-radius: var(--radius-pill);
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.ev-badge--success {
+  background: var(--color-success);
+}
+
+.ev-badge--warning {
+  background: var(--color-warning);
+}
+
+.ev-badge--danger {
+  background: var(--color-danger);
+}
+
+.ev-badge--neutral {
+  background: var(--color-text-muted);
+}
@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { Badge } from './badge';
+
+@Component({
+  standalone: true,
+  imports: [Badge],
+  template: `<ev-badge tone="danger">critique</ev-badge>`,
+})
+class BadgeHost {}
+
+describe('Badge', () => {
+  it('applique le ton neutral par défaut', async () => {
+    await TestBed.configureTestingModule({ imports: [Badge] }).compileComponents();
+    const fixture = TestBed.createComponent(Badge);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.ev-badge').classList).toContain('ev-badge--neutral');
+  });
+
+  it('applique le ton demandé et projette le contenu', async () => {
+    await TestBed.configureTestingModule({ imports: [BadgeHost] }).compileComponents();
+    const fixture = TestBed.createComponent(BadgeHost);
+    fixture.detectChanges();
+
+    const el = fixture.nativeElement.querySelector('.ev-badge');
+    expect(el.classList).toContain('ev-badge--danger');
+    expect(el.textContent).toContain('critique');
+  });
+});
@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+
+export type BadgeTone = 'success' | 'warning' | 'danger' | 'neutral';
+
+@Component({
+  selector: 'ev-badge',
+  standalone: true,
+  templateUrl: './badge.html',
+  styleUrl: './badge.scss',
+})
+export class Badge {
+  tone = input<BadgeTone>('neutral');
+}