diff --git a/src/options/general.css b/src/options/general.css index 9fec6b6..49bcc5e 100644 --- a/src/options/general.css +++ b/src/options/general.css @@ -129,7 +129,18 @@ input:focus { opacity: 1; } -#announcement_banner button { +#dismiss_announcement { + cursor: pointer; + opacity: 0.7; + font-size: 12px; + white-space: nowrap; +} + +#dismiss_announcement:hover { + opacity: 1; +} + +#close_announcement { background: none; border: none; font-size: 18px; @@ -139,6 +150,6 @@ input:focus { line-height: 1; } -#announcement_banner button:hover { +#close_announcement:hover { opacity: 1; } diff --git a/src/options/main.html b/src/options/main.html index ccbbf0c..15a4c4b 100644 --- a/src/options/main.html +++ b/src/options/main.html @@ -233,7 +233,8 @@
diff --git a/src/options/main.js b/src/options/main.js index 381f171..f99ba58 100644 --- a/src/options/main.js +++ b/src/options/main.js @@ -412,7 +412,8 @@ const ANNOUNCEMENT_KEY = 'announcement_dismissed_premium_coming'; function initAnnouncementBanner() { const banner = document.getElementById('announcement_banner'); const dismissBtn = document.getElementById('dismiss_announcement'); - if (!banner || !dismissBtn) return; + const closeBtn = document.getElementById('close_announcement'); + if (!banner) return; browser.storage.local.get(ANNOUNCEMENT_KEY, result => { if (!result[ANNOUNCEMENT_KEY]) { @@ -420,8 +421,12 @@ function initAnnouncementBanner() { } }); - dismissBtn.addEventListener('click', () => { + dismissBtn?.addEventListener('click', () => { banner.setAttribute('hidden', ''); browser.storage.local.set({ [ANNOUNCEMENT_KEY]: true }); }); + + closeBtn?.addEventListener('click', () => { + banner.setAttribute('hidden', ''); + }); }