From 4fd2833e23cd8a8fc3b9719bd6c58698c1242af8 Mon Sep 17 00:00:00 2001
From: Jordan Blasenhauer <blasenhauer.jordan.dev@gmail.com>
Date: Fri, 22 Mar 2024 18:21:33 +0100
Subject: [PATCH] enhance UI

* format license expire date
* better settings style
---
 src/ui/static/js/account.js            | 18 ++++++++++++++++++
 src/ui/tailwind.config.js              |  2 +-
 src/ui/templates/account.html          |  8 ++++----
 src/ui/templates/settings_plugins.html |  6 +++---
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/ui/static/js/account.js b/src/ui/static/js/account.js
index abb3130c8..af4df09d2 100644
--- a/src/ui/static/js/account.js
+++ b/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();
diff --git a/src/ui/tailwind.config.js b/src/ui/tailwind.config.js
index c1a56386e..ba41318be 100644
--- a/src/ui/tailwind.config.js
+++ b/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: [],
diff --git a/src/ui/templates/account.html b/src/ui/templates/account.html
index 61f0584a9..240e24fa0 100644
--- a/src/ui/templates/account.html
+++ b/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 %}
diff --git a/src/ui/templates/settings_plugins.html b/src/ui/templates/settings_plugins.html
index eef120bbb..68ea0b141 100644
--- a/src/ui/templates/settings_plugins.html
+++ b/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>