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', '');
+ });
}