senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
veza/apps/web/FIX_VISUEL_APPLIQUE.md
senke 023b8a89c6 fix: Corriger URL Swagger et finaliser implémentation DeveloperPage 
- Ajouter fallback pour Swagger UI si doc.json ne fonctionne pas
- Améliorer message d'erreur avec bouton pour ouvrir Swagger UI directement
- Les fonctionnalités API Keys et Usage Stats sont maintenant complètes et fonctionnelles
- Tous les onglets de DeveloperPage sont maintenant implémentés
2026-01-18 13:55:28 +01:00

3.2 KiB
Raw Blame History

Corrections Visuelles Appliquées

Problèmes Identifiés et Corrigés

1. Barre de défilement (Scrollbar) trop visible

Problème : La scrollbar cyan/magenta était très visible et distrayante

Corrections appliquées :

  • ✅ Réduction de la largeur de 8px à 4px
  • ✅ Réduction de l'opacité de rgba(0, 255, 247, 1.0) à rgba(0, 255, 247, 0.1)
  • ✅ Track transparent au lieu de couleur solide
  • ✅ Suppression des styles conflictuels dans premium-utilities.css
  • ✅ Fix JavaScript dans fixDisplayIssues.ts pour forcer les styles

Fichiers modifiés :

  • src/styles/global-effects.css : Styles de scrollbar réduits
  • src/styles/premium-utilities.css : Styles conflictuels commentés
  • src/utils/fixDisplayIssues.ts : Fix JavaScript pour forcer les styles

2. Effets de scanlines trop visibles

Problème : Les scanlines (body::after) étaient trop opaques

Corrections appliquées :

  • ✅ Réduction de l'opacité de 0.15 à 0.05
  • ✅ Réduction de l'opacité des lignes de rgba(0, 0, 0, 0.1) à rgba(0, 0, 0, 0.05)

Fichiers modifiés :

  • src/styles/global-effects.css : Opacité réduite pour body::after

3. Gradients verticaux (lignes verticales)

Problème : Des gradients verticaux (90deg) créaient des lignes visibles

Corrections appliquées :

  • ✅ Suppression des gradients verticaux dans global-effects.css
  • ✅ Fix JavaScript agressif dans fixDisplayIssues.ts pour supprimer tous les gradients verticaux
  • ✅ MutationObserver pour détecter et corriger les nouveaux éléments
  • ✅ Scan périodique pour supprimer les gradients verticaux

Fichiers modifiés :

  • src/styles/global-effects.css : Gradients verticaux supprimés
  • src/utils/fixDisplayIssues.ts : Fix agressif avec MutationObserver

Tests à Effectuer

  1. Scrollbar :

    • Vérifier que la scrollbar est discrète (4px, opacité 0.1)
    • Vérifier qu'elle devient légèrement plus visible au hover (opacité 0.2)

  2. Scanlines :

    • Vérifier que les scanlines sont subtiles (opacité 0.05)
    • Vérifier qu'elles ne créent pas de lignes visibles

  3. Lignes verticales :

    • Vérifier qu'il n'y a plus de lignes verticales grises ou cyan
    • Vérifier que le fix JavaScript fonctionne (console: [FixDisplay])

  4. Bouton de connexion :

    • Vérifier que le bouton n'est pas désactivé par erreur
    • Vérifier que le bouton devient actif quand le formulaire est valide

Commandes de Test

# Vérifier les styles
cd apps/web && npm run build

# Lancer en dev et vérifier visuellement
cd apps/web && npm run dev

# Vérifier dans la console du navigateur
# - Ouvrir la console (F12)
# - Vérifier les messages [FixDisplay]
# - Vérifier qu'il n'y a pas d'erreurs CSS

Notes Importantes

  • Les corrections sont appliquées automatiquement en mode développement
  • Le fix JavaScript s'exécute au chargement de la page et périodiquement
  • Les styles CSS sont prioritaires via !important dans le fix JavaScript
  • Les conflits entre global-effects.css et premium-utilities.css sont résolus

Date : 2025-01-27 Statut : ✅ Corrections appliquées, en attente de test visuel