word-waltz / commit
changing icons for notifications
src/assets/mute.png | Bin 0 -> 28993 bytes src/assets/speaker.png | Bin 0 -> 10895 bytes src/index.html | 2 +- src/main.ts | 18 ++++++++++++------ src/styles/main.css | 13 ++++++++++--- 5 files changed, 23 insertions(+), 10 deletions(-) diff --git a/src/assets/mute.png b/src/assets/mute.png new file mode 100644 index 0000000..99d9e05 Binary files /dev/null and b/src/assets/mute.png differ diff --git a/src/assets/speaker.png b/src/assets/speaker.png new file mode 100644 index 0000000..4cfd0e4 Binary files /dev/null and b/src/assets/speaker.png differ diff --git a/src/index.html b/src/index.html index df57278..f4b594e 100644 --- a/src/index.html +++ b/src/index.html @@ -20,7 +20,7 @@ </a> <nav class="header__links"> <button id="notif-btn" class="header__notif-btn" type="button" aria-label="Notification settings" - title="Enable notifications">🔔</button> + title="Enable notifications"></button> <a href="https://www.flaticon.com/search?author_id=296&style_id=1001&type=standard" target="_blank" rel="noopener" title="Icons by Freepik on Flaticon">Icons</a> <a href="https://gitlab.com/PavelSafronov/word-waltz" target="_blank" rel="noopener" diff --git a/src/main.ts b/src/main.ts index 7620672..c55a878 100644 --- a/src/main.ts +++ b/src/main.ts @@ -19,10 +19,10 @@ import { mountScoreboard } from './components/Scoreboard.js'; import { mountSoloScoreboard } from './components/SoloScoreboard.js'; import { mountShareDialog } from './components/ShareDialog.js'; import { notifyMyTurn, clearNotification, registerServiceWorker, subscribeToPush, isNotifOptedOut, setNotifOptOut, unsubscribeFromPush } from './utils/notifications.js'; +import speakerIconUrl from './assets/speaker.png'; +import muteIconUrl from './assets/mute.png'; import { getRandomWord } from './utils/wordList.js'; import type { GameState, PlayerId, Round, SoloGameState, SoloRound, PendingNotification } from './types.js'; - -// --------------------------------------------------------------------------- // Waiting status helper // --------------------------------------------------------------------------- @@ -807,26 +807,32 @@ function initNotifButton(): void { return; } + // Replace button content with the icon image + btn.textContent = ''; + const img = document.createElement('img'); + img.alt = 'Notifications'; + btn.appendChild(img); + function updateBtn(): void { const perm = Notification.permission; const optedOut = isNotifOptedOut(); if (perm === 'granted' && !optedOut) { - btn!.textContent = '🔔'; + img.src = speakerIconUrl; btn!.title = 'Notifications enabled — click to disable'; btn!.classList.add('header__notif-btn--on'); btn!.classList.remove('header__notif-btn--off', 'header__notif-btn--blocked'); } else if (perm === 'denied') { - btn!.textContent = '🔕'; + img.src = muteIconUrl; btn!.title = 'Notifications blocked by browser'; btn!.classList.remove('header__notif-btn--on', 'header__notif-btn--off'); btn!.classList.add('header__notif-btn--blocked'); } else if (perm === 'granted' && optedOut) { - btn!.textContent = '🔕'; + img.src = muteIconUrl; btn!.title = 'Notifications disabled — click to enable'; btn!.classList.remove('header__notif-btn--on', 'header__notif-btn--blocked'); btn!.classList.add('header__notif-btn--off'); } else { - btn!.textContent = '🔔'; + img.src = speakerIconUrl; btn!.title = 'Enable notifications'; btn!.classList.remove('header__notif-btn--on', 'header__notif-btn--off', 'header__notif-btn--blocked'); } diff --git a/src/styles/main.css b/src/styles/main.css index 38b0c09..4286db6 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -115,12 +115,19 @@ header { background: none; border: none; cursor: pointer; - font-size: 1rem; padding: 2px 4px; border-radius: 4px; line-height: 1; opacity: 0.35; transition: opacity 0.15s; + display: flex; + align-items: center; +} + +.header__notif-btn img { + height: 22px; + width: 22px; + display: block; } .header__notif-btn:hover { @@ -132,11 +139,11 @@ header { } .header__notif-btn--off { - opacity: 0.6; + opacity: 0.8; } .header__notif-btn--blocked { - opacity: 0.3; + opacity: 0.4; cursor: default; }