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
This commit is contained in:
Johan LEROY
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 @@
<button [type]="type()" class="ev-button" [class]="'ev-button--' + variant()" [disabled]="disabled()">
<ng-content></ng-content>
</button>
@@ -0,0 +1,51 @@
.ev-button {
width: 100%;
padding: 0.7rem;
border: none;
border-radius: var(--radius-sm);
font-size: 0.95rem;
font-weight: 600;
font-family: var(--font-family);
cursor: pointer;
&:disabled {
cursor: not-allowed;
opacity: 0.7;
}
}
.ev-button--primary {
background: var(--color-primary);
color: #fff;
&:disabled {
background: var(--color-disabled);
}
&:not(:disabled):hover {
background: var(--color-primary-hover);
}
}
.ev-button--secondary {
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-label);
&:not(:disabled):hover {
background: var(--color-bg);
}
}
.ev-button--danger {
background: var(--color-danger);
color: #fff;
&:disabled {
background: var(--color-disabled);
}
&:not(:disabled):hover {
background: #b91c1c;
}
}
@@ -0,0 +1,50 @@
import { Component } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { Button } from './button';
@Component({
standalone: true,
imports: [Button],
template: `<ev-button>Valider</ev-button>`,
})
class ButtonHost {}
describe('Button', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({ imports: [Button] }).compileComponents();
});
it('applique la classe de la variante primary par défaut', () => {
const fixture = TestBed.createComponent(Button);
fixture.detectChanges();
const button = fixture.nativeElement.querySelector('button');
expect(button.classList).toContain('ev-button--primary');
});
it('applique la classe de la variante demandée', () => {
const fixture = TestBed.createComponent(Button);
fixture.componentRef.setInput('variant', 'danger');
fixture.detectChanges();
const button = fixture.nativeElement.querySelector('button');
expect(button.classList).toContain('ev-button--danger');
});
it('désactive le bouton natif quand disabled est vrai', () => {
const fixture = TestBed.createComponent(Button);
fixture.componentRef.setInput('disabled', true);
fixture.detectChanges();
const button = fixture.nativeElement.querySelector('button');
expect(button.disabled).toBe(true);
});
it('projette le contenu', async () => {
await TestBed.configureTestingModule({ imports: [ButtonHost] }).compileComponents();
const fixture = TestBed.createComponent(ButtonHost);
fixture.detectChanges();
expect(fixture.nativeElement.querySelector('button').textContent).toContain('Valider');
});
});
@@ -0,0 +1,15 @@
import { Component, input } from '@angular/core';
export type ButtonVariant = 'primary' | 'secondary' | 'danger';
@Component({
selector: 'ev-button',
standalone: true,
templateUrl: './button.html',
styleUrl: './button.scss',
})
export class Button {
variant = input<ButtonVariant>('primary');
type = input<'button' | 'submit'>('button');
disabled = input(false);
}