refactor(ui): normalize about modal with hidden class

This commit is contained in:
Edouard Vanbelle
2026-04-24 23:22:18 +02:00
parent 832c9ab577
commit a38bcc01de
3 changed files with 8 additions and 12 deletions
+1 -5
View File
@@ -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;
+1 -1
View File
@@ -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>
+6 -6
View File
@@ -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">