diff --git a/src/ui.js b/src/ui.js index c0281db1..ecc436cc 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,21 @@ export function showNotification(text, time = 3000) { }, time); } +function getBoxHTML(color, text = '') { + const el = document.createElement('div'); + el.style.display = 'inline-block'; + el.style.backgroundColor = color; + el.style.paddingInline = '5px'; + el.innerText = text; + + return el.outerHTML; +} + setTimeout(() => { - showNotification('Press 🟩 to open YTAF configuration screen'); - showNotification('Press 🟥 to toggle on/off SponsorBlock'); + showNotification( + `Press ${getBoxHTML('green', 'GREEN')} to open YTAF configuration screen` + ); + showNotification( + `Press ${getBoxHTML('red', 'RED')} to toggle on/off SponsorBlock` + ); }, 2000);