Merge pull request #1026 from rgantzos/main

Improve "New" and "Updated" tags

Author: rgantzos

extras/popup/popup.css

@@ -348,19 +348,24 @@ input:checked + .slider:before {
   background-color: var(--theme);
   color: white;
   padding: 0.25rem;
-  display: inline-block;
-  margin-left: 0.5rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  border-radius: 0.75rem;
+  text-transform: uppercase;
+  display: inline;
+  font-size: .7rem;
+  border-radius: .4rem;
   position: relative;
-  top: -0.15rem;
+  top: -.15rem;
+  margin-left: .35rem;
   user-select: none;
   transition: opacity 0.3s, transform 0.3s;
   opacity: 1;
   transform: none;
 }
 
+.feature span.new-feature-tag.updated {
+  filter: brightness(2.5);
+  color: black;
+}
+
 .feature span.new-feature-tag:hover {
   opacity: 0.75;
   transform: scale(105%);

extras/popup/popup.js

@@ -593,15 +593,15 @@ async function getFeatures() {
       span.textContent = "New";
       span.className = "new-feature-tag";
       div.classList.add("new-feature");
-      div.appendChild(span);
+      h3.appendChild(span);
     } else if (
       feature.versionUpdated?.replace("v", "") ===
       chrome.runtime.getManifest().version.toString()
     ) {
       var span = document.createElement("span");
       span.textContent = "Updated";
       span.className = "new-feature-tag updated";
-      div.appendChild(span);
+      h3.appendChild(span);
     }
     if (feature.tags?.includes("Beta")) {
       var span = document.createElement("span");

extras/style.css

@@ -706,18 +706,22 @@ body[data-filter="Egg"] .feature[data-type*="Egg"] {
   background-color: var(--theme);
   color: white;
   padding: 0.25rem;
-  display: inline-block;
-  margin-left: 0.5rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  border-radius: 0.75rem;
+  display: inline;
+  font-size: .7rem;
+  border-radius: .4rem;
   position: relative;
-  top: -0.15rem;
-  line-height: normal;
+  top: -.15rem;
+  margin-left: .35rem;
   user-select: none;
   transition: opacity 0.3s, transform 0.3s;
   opacity: 1;
   transform: none;
+  text-transform: uppercase;
+}
+
+.feature span.new-feature-tag.updated {
+  filter: brightness(2.5);
+  color: black;
 }
 
 .feature span.new-feature-tag:hover {