From a38bcc01de18d6e2bf5ef2bf018c42911e09cff8 Mon Sep 17 00:00:00 2001
From: Edouard Vanbelle <opensource@edouard.vanbelle.fr>
Date: Fri, 24 Apr 2026 23:22:18 +0200
Subject: [PATCH] refactor(ui): normalize about modal with hidden class

---
 static/css/components/modals.css |  6 +-----
 static/index.html                |  2 +-
 static/js/app/userMenu.js        | 12 ++++++------
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/static/css/components/modals.css b/static/css/components/modals.css
index 0b0ef26c..0b903112 100644
--- a/static/css/components/modals.css
+++ b/static/css/components/modals.css
@@ -1,6 +1,6 @@
 /* About Modal */
 .about-modal-overlay {
-    display: none;
+    display: flex;
     position: fixed;
     inset: 0;
     background: var(--color-overlay);
@@ -10,10 +10,6 @@
     align-items: center;
 }
 
-.about-modal-overlay.show {
-    display: flex;
-}
-
 .about-modal {
     background: var(--color-bg-surface);
     border-radius: 20px;
diff --git a/static/index.html b/static/index.html
index d0000a75..499e9b08 100644
--- a/static/index.html
+++ b/static/index.html
@@ -266,7 +266,7 @@
     </div>
 
     <!-- About Modal -->
-    <div class="about-modal-overlay" id="about-modal-overlay">
+    <div class="about-modal-overlay hidden" id="about-modal-overlay">
         <div class="about-modal">
             <div class="about-modal-logo">
                 <i class="fas fa-cloud"></i>
diff --git a/static/js/app/userMenu.js b/static/js/app/userMenu.js
index 84dadeb9..80432567 100644
--- a/static/js/app/userMenu.js
+++ b/static/js/app/userMenu.js
@@ -129,7 +129,7 @@ function setupUserMenu() {
         aboutBtn.addEventListener('click', () => {
             wrapper.classList.remove('open');
             const overlay = document.getElementById('about-modal-overlay');
-            if (overlay) overlay.classList.add('show');
+            if (overlay) overlay.classList.remove('hidden');
         });
     }
 
@@ -137,18 +137,18 @@ function setupUserMenu() {
     const aboutOverlay = document.getElementById('about-modal-overlay');
     if (aboutCloseBtn) {
         aboutCloseBtn.addEventListener('click', () => {
-            aboutOverlay.classList.remove('show');
+            aboutOverlay.classList.add('hidden');
         });
     }
     if (aboutOverlay) {
         aboutOverlay.addEventListener('click', (e) => {
             if (e.target === aboutOverlay) {
-                aboutOverlay.classList.remove('show');
+                aboutOverlay.classList.add('hidden');
             }
         });
         document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape' && aboutOverlay.classList.contains('show')) {
-                aboutOverlay.classList.remove('show');
+            if (e.key === 'Escape' && !aboutOverlay.classList.contains('hidden')) {
+                aboutOverlay.classList.add('hidden');
             }
         });
     }
@@ -218,7 +218,7 @@ function showUserProfileModal() {
 
     const overlay = document.createElement('div');
     overlay.id = 'profile-modal-overlay';
-    overlay.className = 'about-modal-overlay';
+    overlay.classList.add('about-modal-overlay', 'hidden');
     overlay.innerHTML = `
         <div class="about-modal about-modal-body">
             <div class="about-modal-header">