enhance UI

* format license expire date
* better settings style

src/ui/static/js/account.js

@@ -128,8 +128,26 @@ class SwitchTabForm {
   }
 }
 
+class FormatExpire {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    window.addEventListener("DOMContentLoaded", () => {
+      const expireEl = document.querySelector("[data-expire]");
+      if (!expireEl) return;
+
+      expireEl.textContent = expireEl.textContent
+        .replaceAll("-", "/")
+        .split(" ")[0];
+    });
+  }
+}
+
 const setPWBtn = new PwBtn();
 const setSubmit = new SubmitAccount();
 const setTabs = new Tabs();
 const setPopover = new Popover();
 const setSwitchTabForm = new SwitchTabForm();
+const setFormatExpire = new FormatExpire();

src/ui/tailwind.config.js

@@ -69,7 +69,7 @@ module.exports = {
     "w-full",
     "text-yellow-500",
     "text-green-500",
-    "text-red-500"
+    "text-red-500",
   ],
 
   presets: [],

src/ui/templates/account.html

@@ -99,11 +99,11 @@
                 {% endif %}
                 {% if is_pro_version %}
                     <div class="mt-2 flex flex-col justify-center items-center">
-                        {% if pro_expire %}
-                            <p class="my-2 mr-2 dark:text-gray-300 text-center">Your license is valid until <span class="font-bold">{{ pro_expire }}</span></p>
-                        {% endif %}
                         {% if pro_services %}
-                            <p class="my-2 mr-2 dark:text-gray-300 text-center font-bold">{{ pro_services }} services plan</p>
+                            <p class="my-2 mr-2 dark:text-gray-300 text-center font-bold">{{ pro_services }} services allowed</p>
+                        {% endif %}
+                        {% if pro_expire %}
+                            <p class="my-2 mr-2 dark:text-gray-300 text-center">License expired : <span data-expire class="font-bold">{{ pro_expire }}</span></p>
                         {% endif %}
                     </div>
                 {% endif %}

src/ui/templates/settings_plugins.html

@@ -12,7 +12,7 @@
                 </p>
             {% endif %}
             <div class="flex justify-start items-center">
-                <h5 class="transition duration-300 ease-in-out ml-2 font-bold text-md uppercase dark:text-white/90 mb-0">
+                <h5 class="transition duration-300 ease-in-out ml-2 mr-1 font-bold text-md uppercase dark:text-white/90 mb-0">
                     {{ plugin['name'] }} <span>{{ plugin['version'] }}</span>
                 </h5>
                 {% if plugin['page'] %}
@@ -32,7 +32,7 @@
                        aria-label="pro plugin"
                        class="hover:-translate-y-px mx-1 -translate-y-0.5 ml-1"
                        href="{% if not is_pro_version %}https://panel.bunkerweb.io/?utm_campaign=self&utm_source=ui#pro{% else %}javascript:void(0){% endif %}">
-                        <svg class="h-6 w-6 dark:brightness-90"
+                        <svg class="h-5.5 w-5.5 dark:brightness-90"
                              viewBox="0 0 48 46"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg">
@@ -42,7 +42,7 @@
                     </a>
                 {% endif %}
             </div>
-            <div class="transition duration-300 ease-in-out dark:opacity-90 ml-2 ">
+            <div class="max-w-[650px] transition duration-300 ease-in-out dark:opacity-90 ml-2 ">
                 <p class="text-sm dark:text-gray-300 mb-1">{{ plugin['description'] }}</p>
             </div>
         </div>