update icon

Author: hoang.tran12

popup/helpers/category.js

@@ -3,25 +3,25 @@ export const CATEGORY = {
     id: "favorite",
     style: { textDecoration: "underline" },
     name: {
-      en: `<i class="fa-solid fa-star" style="color:#1F51FF"></i> Favorite`,
-      vi: `<i class="fa-solid fa-star" style="color:#1F51FF"></i> Yêu thích`,
+      en: `<i class="fa-solid fa-star fa-beat" style="--fa-beat-scale: 1.5;color:#1F51FF"></i> Favorite`,
+      vi: `<i class="fa-solid fa-star fa-beat" style="--fa-beat-scale: 1.5;color:#1F51FF"></i> Yêu thích`,
     },
   },
   recently: {
     id: "recently",
     style: { textDecoration: "underline" },
     name: {
-      en: `<i class="fa-solid fa-clock" style="color:#1F51FF"></i> Recently`,
-      vi: `<i class="fa-solid fa-clock" style="color:#1F51FF"></i> Gần đây`,
+      en: `<i class="fa-solid fa-clock fa-spin-pulse" style="color:#1F51FF"></i> Recently`,
+      vi: `<i class="fa-solid fa-clock fa-spin-pulse" style="color:#1F51FF"></i> Gần đây`,
     },
   },
   available: {
     id: "available",
     showCount: true,
     style: { textDecoration: "underline" },
     name: {
-      en: `<i class="fa-solid fa-play" style="color:#1F51FF"></i> Available`,
-      vi: `<i class="fa-solid fa-play" style="color:#1F51FF"></i> Có thể dùng`,
+      en: `<i class="fa-solid fa-play fa-beat-fade" style="color:#1F51FF"></i> Available`,
+      vi: `<i class="fa-solid fa-play fa-beat-fade" style="color:#1F51FF"></i> Có thể dùng`,
     },
   },
   search: {
@@ -120,8 +120,8 @@ export const CATEGORY = {
     id: "recommend",
     style: { textDecoration: "underline" },
     name: {
-      en: `<i class="fa-solid fa-thumbs-up" style="color:#1F51FF"></i> Recommend`,
-      vi: `<i class="fa-solid fa-thumbs-up" style="color:#1F51FF"></i> Khuyên dùng`,
+      en: `<i class="fa-solid fa-thumbs-up fa-bounce" style="color:#1F51FF"></i> Recommend`,
+      vi: `<i class="fa-solid fa-thumbs-up fa-bounce" style="color:#1F51FF"></i> Khuyên dùng`,
     },
   },
 };

popup/index.js

@@ -154,23 +154,37 @@ function createScriptButton(script, isFavorite = false) {
 
   // button icon
   if (script.icon && typeof script.icon === "string") {
-    const icon = document.createElement("img");
-    icon.classList.add("icon");
-    icon.src = script.icon;
-    button.appendChild(icon);
+    // image icon
+    if (
+      script.icon.indexOf("http://") === 0 ||
+      script.icon.indexOf("https://") === 0
+    ) {
+      const icon = document.createElement("img");
+      icon.classList.add("icon-img");
+      icon.src = script.icon;
+      button.appendChild(icon);
+    }
+
+    // text/html icon
+    else {
+      const icon = document.createElement("span");
+      icon.classList.add("icon-html");
+      icon.innerHTML = script.icon;
+      button.appendChild(icon);
+    }
   }
 
   // button title
   const title = document.createElement("span");
   title.classList.add("btn-title");
-  title.innerText = t(script.name);
+  title.innerHTML = t(script.name);
   button.appendChild(title);
 
   // add to favorite button
   const addFavoriteBtn = document.createElement("i");
   addFavoriteBtn.className = isFavorite
-    ? "fa-solid fa-star active"
-    : "fa-regular fa-star";
+    ? "fa-solid fa-star star active"
+    : "fa-regular fa-star star";
   addFavoriteBtn.onclick = (e) => {
     e.stopPropagation();
     e.preventDefault();

popup/styles/style.css

@@ -122,22 +122,22 @@ a:hover {
     transition: all 50ms;
 }
 
-.content button i {
+.content button i.star {
     opacity: 0;
     width: 0;
     transition: all .2s;
 }
 
-.content button i.active {
+.content button i.star.active {
     color: #0048ad;
 }
 
-.content button i:hover {
+.content button i.star:hover {
     transform: scale(1.8);
 }
 
-.content button:hover i,
-.content button i.active {
+.content button:hover i.star,
+.content button i.star.active {
     width: auto;
     margin-left: 5px;
     opacity: 1;
@@ -147,13 +147,19 @@ a:hover {
     vertical-align: middle;
 }
 
-.content button .icon {
+.content button .icon-img {
     display: inline-block;
     vertical-align: middle;
     height: 30px;
     margin-right: 5px;
 }
 
+.content button .icon-html {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 5px;
+}
+
 .content button .badgeContainer {
     position: absolute;
     top: 0;

scripts/performanceAnalyzer.js

@@ -1,4 +1,5 @@
 export default {
+  icon: `<i class="fa-solid fa-gauge-max"></i>`,
   name: {
     en: "Performance Analyzer",
     vi: "Phân tích hiệu suất",

scripts/toggleEditPage.js

@@ -1,4 +1,5 @@
 export default {
+  icon: `<i class="fa-solid fa-pen-to-square"></i>`,
   name: {
     en: "Toggle edit page",
     vi: "Bật/tắt chế độ chỉnh sửa website",