use html instead of icons for button notifications

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);
 }
 
+// This returns HTML, to be used in notification messages
+// Make sure to use color such that it passes the contrast checker: https://webaim.org/resources/contrastchecker/
+function textWithBgColor(text, color) {
+  const el = document.createElement('span');
+  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');
+  const GREEN = textWithBgColor('GREEN', '#006600');
+  const RED = textWithBgColor('RED', '#B30000');
+  showNotification(`Press ${GREEN} to open YTAF configuration screen`);
+  showNotification(`Press ${RED} to toggle on/off SponsorBlock`);
 }, 2000);