From 67b6f1522689aeffb24ca7f35d7d1cc3e14274f4 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..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);