Updated extended menu colour match & Added 'youtube-webos' version

[jesvijonathan]

Colour matched YTAF menu & added version details :

[jesvijonathan]

also add it to v0.5 milestone

[fire332]

This is merge-able as long as you fix the capitalization of webOS as discussed with @throwaway96. webOS is a trademarked name and the capitalization for the name should be adhered to.

See: https://webostv.developer.lge.com/

[jesvijonathan]

You know, this project is now susceptible to being sued by "webOS" xD.. but anyway if it is that big of a deal, just cherry picking #320 should be fine ig..

git cherry-pick eb001a97291576824e7a5280530385fe4b4e9090

[jesvijonathan]

Done.

Here you go, the finalized ugly looking Header...

[jesvijonathan]

@fire332, @throwaway96

I'm not adding it with this MR, but idk, I'll attach the patch file below for the effect :

diff --git a/src/ui.css b/src/ui.css
index 0481197..0b92ff5 100644
--- a/src/ui.css
+++ b/src/ui.css
@@ -24,6 +24,9 @@
   margin: 0;
   margin-bottom: 0.5em;
   text-align: center;
+  font-size: 2.4rem;
+  font-family: 'YouTube Icons Outlined';
+  font-weight: 900;
 }
 
 .ytaf-ui-container input[type='checkbox'] {
@@ -113,3 +116,12 @@
   right: 2rem;
   bottom: 1rem;
 }
+.ytaf-ui-slimHeading {
+  font-weight: 100;
+  font-family: 'Arial', sans-serif;
+}
+
+.ytaf-ui-slimHeading::after {
+  content: 'OS';
+  color: #7d2f5a;
+}
diff --git a/src/ui.js b/src/ui.js
index 994c370..04f70ca 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -120,7 +120,14 @@ function createOptionsPanel() {
   );
 
   const elmHeading = document.createElement('h1');
-  elmHeading.textContent = 'webOS YouTube Extended';
+  elmHeading.append(
+    Object.assign(document.createElement('span'), {
+      textContent: 'web',
+      className: 'ytaf-ui-slimHeading'
+    }),
+    ' YouTube'
+  );
+
   elmContainer.appendChild(elmHeading);
 
   elmContainer.appendChild(createConfigCheckbox('enableAdBlock'));

[jesvijonathan]

maybe like this ?

<- **Personal favourite**, it will look better 0.5.0, when more options are added to the menu

diff --git a/src/ui.css b/src/ui.css
index 0481197..b3ffe5f 100644
--- a/src/ui.css
+++ b/src/ui.css
@@ -23,7 +23,13 @@
 .ytaf-ui-container h1 {
   margin: 0;
   margin-bottom: 0.5em;
-  text-align: center;
+  font-size: 2.4rem;
+  font-family: 'YouTube Icons Outlined';
+  font-weight: 900;
+  text-align: right;
+  position: absolute;
+  right: 2rem;
+  bottom: 1rem;
 }
 
 .ytaf-ui-container input[type='checkbox'] {
@@ -111,5 +117,14 @@
   color: #656565;
   position: absolute;
   right: 2rem;
-  bottom: 1rem;
+  bottom: 1.4rem;
+}
+.ytaf-ui-slimHeading {
+  font-weight: 100;
+  font-family: 'Arial', sans-serif;
+}
+
+.ytaf-ui-slimHeading::after {
+  content: 'OS';
+  color: #7d2f5a;
 }
diff --git a/src/ui.js b/src/ui.js
index 994c370..04f70ca 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -120,7 +120,14 @@ function createOptionsPanel() {
   );
 
   const elmHeading = document.createElement('h1');
-  elmHeading.textContent = 'webOS YouTube Extended';
+  elmHeading.append(
+    Object.assign(document.createElement('span'), {
+      textContent: 'web',
+      className: 'ytaf-ui-slimHeading'
+    }),
+    ' YouTube'
+  );
+
   elmContainer.appendChild(elmHeading);
 
   elmContainer.appendChild(createConfigCheckbox('enableAdBlock'));

or a entire new panel ? we currently have issues with scroll in ytaf-menu... idk, but yeah just leaving em here

[jesvijonathan]

@fire332, this one too