use html instead of icons for button notifications

webosbrew · Mar 25, 2024 · 4b9160b · 4b9160b
1 parent 8d775b1
commit 4b9160b
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/src/ui.css b/src/ui.css
@@ -60,3 +60,33 @@
   padding: 0 1em;
   line-height: 0;
 }
+
+.ytaf-remote-button {
+  display: inline-block;
+  width: 21.34px;
+  height: 21.34px;
+}
+
+.ytaf-remote-button::before {
+  content: '\00a0';
+}
+
+.ytaf-remote-button.ytaf-remote-button-red {
+  background-color: #b30000;
+  color: #b30000;
+}
+
+.ytaf-remote-button.ytaf-remote-button-green {
+  background-color: #006600;
+  color: #006600;
+}
+
+.ytaf-remote-button.ytaf-remote-button-yellow {
+  background-color: #e0e000;
+  color: #e0e000;
+}
+
+.ytaf-remote-button.ytaf-remote-button-blue {
+  background-color: #0000cc;
+  color: #0000cc;
+}
diff --git 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,19 @@ export function showNotification(text, time = 3000) {
   }, time);
 }
 
+function remoteBtnBox(key) {
+  const el = document.createElement('span');
+  el.classList.add('ytaf-remote-button');
+  el.classList.add(`ytaf-remote-button-${key}`);
+
+  return el.outerHTML;
+}
+
 setTimeout(() => {
-  showNotification('Press 🟩 to open YTAF configuration screen');
-  showNotification('Press 🟥 to toggle on/off SponsorBlock');
+  showNotification(
+    `Press ${remoteBtnBox('green')} GREEN to open YTAF configuration screen`
+  );
+  showNotification(
+    `Press ${remoteBtnBox('red')} RED to toggle on/off SponsorBlock`
+  );
 }, 2000);