diff --git a/src/ui.js b/src/ui.js index c0281db1..27ad16d8 100644 --- a/src/ui.js +++ b/src/ui.js @@ -197,7 +197,7 @@ export function showNotification(text, time = 3000) { const elm = document.createElement('div'); const elmInner = document.createElement('div'); - elmInner.innerText = text; + elmInner.innerHTML = text; elmInner.classList.add('message'); elmInner.classList.add('message-hidden'); elm.appendChild(elmInner); @@ -214,7 +214,20 @@ export function showNotification(text, time = 3000) { }, time); } +function getBoxHTML(color) { + const el = document.createElement('div'); + el.style.display = 'inline-block'; + el.style.position = 'relative'; + el.style.top = '2px'; + el.style.backgroundColor = color; + el.style.width = '20px'; + el.style.height = '20px'; + return el.outerHTML; +} + setTimeout(() => { - showNotification('Press 🟩 to open YTAF configuration screen'); - showNotification('Press 🟥 to toggle on/off SponsorBlock'); + showNotification( + `Press ${getBoxHTML('green')} to open YTAF configuration screen` + ); + showNotification(`Press ${getBoxHTML('red')} to toggle on/off SponsorBlock`); }, 2000);