From 56cc064e797d128024d38fdc1a5edea2b120ef8a Mon Sep 17 00:00:00 2001
From: Ali Yousuf <aly.yousuf7@gmail.com>
Date: Sun, 17 Mar 2024 05:48:35 -0400
Subject: [PATCH] use html instead of icons for button notifications

---
 src/ui.js | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/ui.js b/src/ui.js
index c0281db1..f11e7933 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);
 }
 
+// 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);