udpate UI + refactor

Author: hoang.tran12

popup/helpers/checkForUpdate.js

@@ -20,7 +20,10 @@ export async function checkForUpdate() {
       });
       updateBtn.setAttribute(
         "data-tooltip",
-        t({ vi: "Đã có phiên bản mới", en: "Update available" })
+        t({
+          vi: "Đã có phiên bản mới v" + lastestVer,
+          en: "Update available v" + lastestVer,
+        })
       );
       updateBtn.setAttribute("data-flow", "bottom");
       updateBtn.onclick = () => {

popup/popup.html

@@ -29,7 +29,7 @@ <h3>
         </a>
         <br />
         <span id="version"></span>
-        <button id="update-btn">(update)</button>
+        <button id="update-btn" class="rainbow-bg">(update)</button>
         <p>Make with <i class="fa-solid fa-heart fa-beat" style="color:#ff0000a3"></i>
             by <a data-track="author" target="_blank" href="https://github.com/HoangTran0410">Hoang Tran</a>
         </p>

popup/styles/default.less

@@ -159,7 +159,7 @@ option {
     display: none;
     border: none;
     border-radius: 5px;
-    padding: 3px;
+    padding: 5px;
     color: @bg_body;
     background-color: @bg_update;
     font-weight: bold;
@@ -594,6 +594,32 @@ option {
     }
 }
 
+// https://codepen.io/nohoid/pen/eYXpNL
+// https://codepen.io/pec-man/pen/xxKgxaN
+.rainbow-bg {
+    background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet, indigo, blue, green, yellow, orange, red, red);
+    background-size: 1000% 100%;
+    animation: create-rainbow-gradient-shift 15s ease infinite;
+
+    color: white;
+    text-shadow: 0 0 15px black;
+}
+
+@keyframes create-rainbow-gradient-shift {
+    0% {
+        background-position: 0% 82%
+    }
+
+    50% {
+        background-position: 100% 19%
+    }
+
+    100% {
+        background-position: 0% 82%
+    }
+}
+
+
 // https://www.cssportal.com/css-tooltip-generator/
 @keyframes tooltip-vert {
     to {

popup/tabs.js

@@ -487,9 +487,9 @@ const tabs = [
       s.remove_tracking_in_url,
       s.prevent_closeBrowser_lastTab,
       s.chongLuaDao,
-      s.createInvisibleText,
       s.shortenURL,
       s.unshorten,
+      s.createInvisibleText,
       createTitle("--- Automation ---", "--- Tự động ---"),
       s.scrollToVeryEnd,
       s.screenshotFullPage,

scripts/createInvisibleText.js

@@ -1,11 +1,11 @@
 export default {
   icon: '<i class="fa-regular fa-eye-slash fa-lg"></i>',
   name: {
-    en: "Create invisible text",
+    en: "Create invisible message",
     vi: "Tạo tin nhắn tàng hình",
   },
   description: {
-    en: "Create invisible text to hide messages. Receiver to use this feature to decode messages.",
+    en: "Create invisible text to hide secret messages. Receiver to use this feature to decode messages.",
     vi: "Tạo tin nhắn tàng hình, giúp ẩn đi thông tin quan trọng, người nhận cần dùng chức năng này để có thể giải mã.",
   },
 
@@ -15,14 +15,15 @@ export default {
 
   popupScript: {
     onClick: async () => {
+      const { t } = await import("../popup/helpers/lang.js");
       Swal.fire({
         icon: "info",
-        title: "Tin nhắn tàng hình",
-        text: "Vui lòng chọn",
+        title: t({ vi: "Tin nhắn tàng hình", en: "Invisible messages" }),
+        text: t({ vi: "Vui lòng chọn", en: "Please choose" }),
         showDenyButton: true,
         showCancelButton: false,
-        confirmButtonText: "Tạo tin nhắn",
-        denyButtonText: "Giải mã tin nhắn",
+        confirmButtonText: t({ vi: "Tạo tin nhắn", en: "Create message" }),
+        denyButtonText: t({ vi: "Giải mã tin nhắn", en: "Decode message" }),
       }).then((result) => {
         if (result.isConfirmed) {
           doEncode();
@@ -34,17 +35,29 @@ export default {
       function doEncode() {
         Swal.fire({
           icon: "question",
-          title: "Nhập tin nhắn",
-          html: "Đặt ngoặc nhọn >< bao ngoài những nội dung muốn tành hình<br/><br/> Ví dụ: Hôm nay <b>>đi chơi không<</b> trời đẹp quá.",
+          title: t({ vi: "Nhập tin nhắn", en: "Enter message" }),
+          html: t({
+            vi: "Đặt ngoặc nhọn >< bao ngoài những nội dung muốn tành hình<br/><br/> Ví dụ: Gọi tôi <b>>0123456789<</b> là Hoang.",
+            en: "Wrap text in >< to hide message<br/><br/> Example: Call me <b>>0123456789, abc street<</b> Jane.",
+          }),
           input: "textarea",
           showCancelButton: true,
         }).then((result) => {
           if (result.isConfirmed) {
             let encoded = encode(result.value);
             Swal.fire({
               icon: "success",
-              title: "Tạo tin tàng hình thành công",
-              html: result.value + "<br/> Bạn hãy copy và sử dụng nhé",
+              title: t({
+                vi: "Tạo tin tàng hình thành công",
+                en: "Create invisible message successfully",
+              }),
+              html:
+                result.value +
+                "<br/><br/>" +
+                t({
+                  vi: " Bạn hãy copy và sử dụng nhé",
+                  en: " Please copy and use",
+                }),
               input: "textarea",
               inputValue: encoded,
             });
@@ -72,7 +85,7 @@ export default {
             } else {
               Swal.fire({
                 icon: "info",
-                title: "Tin nhắn này chưa được mã hoá",
+                title: "Tin nhắn này không có nội dung tàng hình",
                 text: result.value,
               });
             }