Refactor templates and routes for improved configuration handling and UI consistency

src/ui/app/routes/cache.py

@@ -22,7 +22,7 @@ def cache_page():
     return render_template(
         "cache.html",
         caches=DB.get_jobs_cache_files(with_data=False),
-        services=BW_CONFIG.get_config(global_only=True, methods=False, with_drafts=True, filtered_settings=("SERVER_NAME"))["SERVER_NAME"],
+        services=BW_CONFIG.get_config(global_only=True, methods=False, with_drafts=True, filtered_settings=("SERVER_NAME",))["SERVER_NAME"],
         cache_service=service,
         cache_plugin=cache_plugin,
         cache_job_name=cache_job_name,

src/ui/app/routes/configs.py

@@ -43,7 +43,7 @@ def configs_page():
     return render_template(
         "configs.html",
         configs=DB.get_custom_configs(with_drafts=True, with_data=False),
-        services=BW_CONFIG.get_config(global_only=True, methods=False, with_drafts=True, filtered_settings=("SERVER_NAME"))["SERVER_NAME"],
+        services=BW_CONFIG.get_config(global_only=True, methods=False, with_drafts=True, filtered_settings=("SERVER_NAME",))["SERVER_NAME"],
         db_templates=" ".join([template for template in DB.get_templates() if template != "ui"]),
         config_service=service,
         config_type=config_type,
@@ -141,7 +141,7 @@ def configs_new():
             next=True,
         )
         service = request.form["service"]
-        services = BW_CONFIG.get_config(global_only=True, with_drafts=True, methods=False, filtered_settings=("SERVER_NAME"))["SERVER_NAME"].split(" ")
+        services = BW_CONFIG.get_config(global_only=True, with_drafts=True, methods=False, filtered_settings=("SERVER_NAME",))["SERVER_NAME"].split(" ")
         if service != "global" and service not in services:
             return handle_error(f"Service {service} does not exist.", "configs.configs_new", True)
 
@@ -242,7 +242,7 @@ def configs_new():
         config_service=config_service,
         type=config_type.upper(),
         name=config_name,
-        services=BW_CONFIG.get_config(global_only=True, methods=False, with_drafts=True, filtered_settings=("SERVER_NAME"))["SERVER_NAME"].split(" "),
+        services=BW_CONFIG.get_config(global_only=True, methods=False, with_drafts=True, filtered_settings=("SERVER_NAME",))["SERVER_NAME"].split(" "),
     )
 
 
@@ -273,7 +273,7 @@ def configs_edit(service: str, config_type: str, name: str):
             next=True,
         )
         new_service = request.form["service"]
-        services = BW_CONFIG.get_config(global_only=True, with_drafts=True, methods=False, filtered_settings=("SERVER_NAME"))["SERVER_NAME"].split(" ")
+        services = BW_CONFIG.get_config(global_only=True, with_drafts=True, methods=False, filtered_settings=("SERVER_NAME",))["SERVER_NAME"].split(" ")
         if new_service != "global" and new_service not in services:
             return handle_error(f"Service {new_service} does not exist.", "configs.configs_new", True)
 
@@ -353,5 +353,5 @@ def configs_edit(service: str, config_type: str, name: str):
         name=db_config["name"],
         config_method=db_config["method"],
         config_template=db_config.get("template"),
-        services=BW_CONFIG.get_config(global_only=True, methods=False, with_drafts=True, filtered_settings=("SERVER_NAME"))["SERVER_NAME"].split(" "),
+        services=BW_CONFIG.get_config(global_only=True, methods=False, with_drafts=True, filtered_settings=("SERVER_NAME",))["SERVER_NAME"].split(" "),
     )

src/ui/app/routes/pro.py

@@ -36,6 +36,9 @@ def pro_page():
         online_services=online_services,
         draft_services=draft_services,
         pro_expires_in=pro_expires_in,
+        pro_license_key=BW_CONFIG.get_config(global_only=True, methods=False, with_drafts=True, filtered_settings=("PRO_LICENSE_KEY",)).get(
+            "PRO_LICENSE_KEY", ""
+        ),
     )
 
 
@@ -55,7 +58,7 @@ def pro_key():
     if not license_key:
         return handle_error("Invalid license key", "pro")
 
-    global_config = DB.get_config(global_only=True, methods=True, filtered_settings=("PRO_LICENSE_KEY"))
+    global_config = DB.get_config(global_only=True, methods=True, filtered_settings=("PRO_LICENSE_KEY",))
     variables = BW_CONFIG.check_variables({"PRO_LICENSE_KEY": license_key}, global_config, global_config=True)
 
     if not variables:

src/ui/app/routes/profile.py

@@ -145,7 +145,7 @@ def totp_disable():
     ):
         return handle_error("The totp token is invalid.", "profile")
 
-    ret = DB.update_ui_user(current_user.get_id(), current_user.password.encode("utf-8"), None, method=current_user.method)
+    ret = DB.update_ui_user(current_user.get_id(), current_user.password.encode("utf-8"), None, theme=current_user.theme, method=current_user.method)
     if ret:
         return handle_error(f"Couldn't disable the two-factor authentication in the database: {ret}", "profile")
 
@@ -182,6 +182,7 @@ def totp_enable():
         current_user.get_id(),
         current_user.password.encode("utf-8"),
         totp_secret,
+        theme=current_user.theme,
         totp_recovery_codes=totp_recovery_codes,
         method=current_user.method,
     )

src/ui/app/routes/services.py

@@ -178,7 +178,7 @@ def services_delete():
 @services.route("/services/<string:service>", methods=["GET", "POST"])
 @login_required
 def services_service_page(service: str):
-    services = BW_CONFIG.get_config(global_only=True, methods=False, with_drafts=True, filtered_settings=("SERVER_NAME"))["SERVER_NAME"].split(" ")
+    services = BW_CONFIG.get_config(global_only=True, methods=False, with_drafts=True, filtered_settings=("SERVER_NAME",))["SERVER_NAME"].split(" ")
     service_exists = service in services
 
     if service != "new" and not service_exists:

src/ui/app/static/css/overrides.css

@@ -900,6 +900,10 @@ a.courier-prime:hover {
   display: none;
 }
 
+table.table.dataTable > tbody > tr.selected > * {
+  box-shadow: inset 0 0 0 9999px rgb(var(--bs-primary-rgb), 0.1) !important;
+}
+
 /*
 * Dark mode overrides
 ******************************************************************************/
@@ -1117,7 +1121,7 @@ html[dir="rtl"].dark-style .border-primary {
 }
 
 .dark-style .bg-secondary {
-  color: #07354a;
+  color: #fff;
 }
 
 .dark-style .table th {
@@ -1139,10 +1143,6 @@ html[dir="rtl"].dark-style .border-primary {
   border-color: var(--bs-primary) !important;
 }
 
-.dark-style td.highlight {
-  background-color: rgba(255, 255, 255, 0.1) !important;
-}
-
 .dark-style .form-check-label {
   color: #fff;
 }
@@ -1215,10 +1215,6 @@ html[dir="rtl"].dark-style .border-primary {
   border-color: var(--bs-form-valid-color) !important;
 }
 
-.dark-style table.table.dataTable > tbody > tr.selected a {
-  color: initial !important;
-}
-
 .dark-style div.dts div.dt-scroll-body table,
 .dark-style div.dts div.dataTables_scrollBody table {
   background-color: #0c283a;
@@ -1228,3 +1224,90 @@ html[dir="rtl"].dark-style .border-primary {
 .dark-style .form-floating > .form-control:disabled ~ label {
   color: #9caeb7;
 }
+
+.dark-style .form-switch .form-check-input {
+  background-color: #484d50;
+}
+
+.dark-style .form-check-input:checked {
+  background-color: #186285;
+}
+
+@keyframes darkColorPhase {
+  0% {
+    box-shadow: 0 1px 20px 1px var(--bs-secondary); /* Primary shadow */
+  }
+  50% {
+    box-shadow: 0 1px 20px 1px var(--bs-bw-green); /* Secondary shadow */
+  }
+  100% {
+    box-shadow: 0 1px 20px 1px var(--bs-secondary); /* Primary shadow */
+  }
+}
+
+.dark-style .buy-now .btn-buy-now {
+  animation: darkColorPhase 3s infinite; /* Apply the color phasing animation */
+}
+
+html:not(.layout-menu-collapsed).dark-style
+  .bg-menu-theme
+  .menu-inner
+  .menu-item.open
+  > .menu-link,
+.layout-menu-hover.layout-menu-collapsed.dark-style
+  .bg-menu-theme
+  .menu-inner
+  .menu-item.open
+  > .menu-link,
+html:not(.layout-menu-collapsed).dark-style
+  .bg-menu-theme
+  .menu-inner
+  .menu-item
+  .menu-link:not(.active):hover,
+.layout-menu-hover.layout-menu-collapsed.dark-style
+  .bg-menu-theme
+  .menu-inner
+  .menu-item
+  .menu-link:not(.active):hover {
+  background-color: #0b394e;
+}
+
+.dark-style table.table.dataTable > tbody > tr.selected > * {
+  color: #fff !important;
+}
+
+.dark-style table.table.dataTable > tbody > tr.selected a {
+  color: #fff !important;
+}
+
+.dark-style .pagination {
+  --bs-pagination-color: #fff;
+  --bs-pagination-bg: rgba(34, 48, 62, 0.06);
+  --bs-pagination-border-color: #ced1d5;
+  --bs-pagination-hover-color: #fff;
+  --bs-pagination-hover-bg: rgba(145, 155, 165, 0.06);
+  --bs-pagination-hover-border-color: #ced1d5;
+  --bs-pagination-hover-color: #fff;
+  --bs-pagination-hover-bg: rgba(145, 155, 165, 0.06);
+  --bs-pagination-active-color: #fff;
+  --bs-pagination-active-bg: #696cff;
+  --bs-pagination-active-border-color: #696cff;
+  --bs-pagination-disabled-color: #384551;
+  --bs-pagination-disabled-bg: rgba(34, 48, 62, 0.06);
+  --bs-pagination-disabled-border-color: #ced1d5;
+}
+
+.dark-style thead,
+.dark-style tbody,
+.dark-style tfoot,
+.dark-style tr,
+.dark-style td,
+.dark-style th {
+  border-color: #384551;
+}
+
+.dark-style .btn-primary {
+  background-color: #fff;
+  border-color: #fff;
+  color: #000;
+}

src/ui/app/static/js/pages/bans.js

@@ -73,7 +73,7 @@ $(document).ready(function () {
     enableTime: true,
     dateFormat: "Y-m-d\\TH:i:S", // ISO format
     altInput: true,
-    altFormat: "F j, Y h:i", // User-friendly display format
+    altFormat: "F j, Y h:i K", // User-friendly display format
     time_24hr: true,
     defaultDate: defaultDatetime,
     minDate: minDatetime,
@@ -198,7 +198,7 @@ $(document).ready(function () {
       extend: "colvis",
       columns: "th:not(:first-child):not(:nth-child(2)):not(:last-child)",
       text: '<span class="tf-icons bx bx-columns bx-18px me-2"></span>Columns',
-      className: "btn btn-sm btn-outline-primary",
+      className: "btn btn-sm btn-outline-primary rounded-start",
       columnText: function (dt, idx, title) {
         return idx + 1 + ". " + title;
       },
@@ -275,7 +275,7 @@ $(document).ready(function () {
 
   $.fn.dataTable.ext.buttons.add_ban = {
     text: '<span class="tf-icons bx bx-plus"></span>&nbsp;Add<span class="d-none d-md-inline"> ban(s)</span>',
-    className: `btn btn-sm btn-outline-bw-green${
+    className: `btn btn-sm rounded me-4 btn-bw-green${
       isReadOnly ? " disabled" : ""
     }`,
     action: function (e, dt, node, config) {

src/ui/app/static/js/pages/configs.js

@@ -173,7 +173,7 @@ $(document).ready(function () {
       extend: "colvis",
       columns: "th:not(:first-child):not(:nth-child(2)):not(:last-child)",
       text: '<span class="tf-icons bx bx-columns bx-18px me-2"></span>Columns',
-      className: "btn btn-sm btn-outline-primary",
+      className: "btn btn-sm btn-outline-primary rounded-start",
       columnText: function (dt, idx, title) {
         return idx + 1 + ". " + title;
       },
@@ -278,7 +278,7 @@ $(document).ready(function () {
 
   $.fn.dataTable.ext.buttons.create_config = {
     text: '<span class="tf-icons bx bx-plus"></span>&nbsp;Create<span class="d-none d-md-inline"> new custom config</span>',
-    className: `btn btn-sm btn-outline-bw-green${
+    className: `btn btn-sm rounded me-4 btn-bw-green${
       isReadOnly ? " disabled" : ""
     }`,
     action: function (e, dt, node, config) {

src/ui/app/static/js/pages/home.js

@@ -313,6 +313,9 @@ $(function () {
           },
         },
       },
+      tooltip: {
+        theme: theme,
+      },
     };
 
     requestsChart = new ApexCharts(
@@ -410,6 +413,9 @@ $(function () {
           },
         },
       },
+      tooltip: {
+        theme: theme,
+      },
     };
 
     ipsChart = new ApexCharts(
@@ -480,6 +486,9 @@ $(function () {
           distributed: true,
         },
       },
+      tooltip: {
+        theme: theme,
+      },
       xaxis: {
         categories: categories,
         labels: {

src/ui/app/static/js/pages/instances.js

@@ -192,7 +192,7 @@ $(document).ready(function () {
       extend: "colvis",
       columns: "th:not(:first-child):not(:nth-child(2))",
       text: '<span class="tf-icons bx bx-columns bx-18px me-2"></span>Columns',
-      className: "btn btn-sm btn-outline-primary",
+      className: "btn btn-sm btn-outline-primary rounded-start",
       columnText: function (dt, idx, title) {
         return idx + 1 + ". " + title;
       },
@@ -286,7 +286,7 @@ $(document).ready(function () {
 
   $.fn.dataTable.ext.buttons.create_instance = {
     text: '<span class="tf-icons bx bx-plus"></span>&nbsp;Create<span class="d-none d-md-inline"> new instance</span>',
-    className: `btn btn-sm btn-outline-bw-green${
+    className: `btn btn-sm rounded me-4 btn-bw-green${
       isReadOnly ? " disabled" : ""
     }`,
     action: function (e, dt, node, config) {

src/ui/app/static/js/pages/login.js

@@ -31,6 +31,8 @@ $(document).ready(() => {
         .removeClass("bg-light-subtle");
       $("#dark-mode-toggle").prop("checked", true);
       $("html").attr("data-bs-theme", "dark");
+      $("[alt='BunkerWeb logo']").attr("src", $("#bw-logo-white").val());
+      $("[alt='User Avatar']").attr("src", $("#avatar-url-white").val());
     } else {
       $("html").removeClass("dark-style").addClass("light-style");
       $(".bs-toast.bg-dark").addClass("bg-white").removeClass("bg-dark");
@@ -39,6 +41,8 @@ $(document).ready(() => {
         .removeClass("bg-dark-subtle");
       $("#dark-mode-toggle").prop("checked", false);
       $("html").attr("data-bs-theme", null);
+      $("[alt='BunkerWeb logo']").attr("src", $("#bw-logo").val());
+      $("[alt='User Avatar']").attr("src", $("#avatar-url").val());
     }
 
     // Update input values

src/ui/app/static/js/pages/plugins.js

@@ -204,7 +204,7 @@ $(document).ready(function () {
       extend: "colvis",
       columns: "th:not(:first-child):not(:nth-child(2)):not(:last-child)",
       text: '<span class="tf-icons bx bx-columns bx-18px me-2"></span>Columns',
-      className: "btn btn-sm btn-outline-primary",
+      className: "btn btn-sm btn-outline-primary rounded-start",
       columnText: function (dt, idx, title) {
         return idx + 1 + ". " + title;
       },
@@ -291,7 +291,7 @@ $(document).ready(function () {
 
   $.fn.dataTable.ext.buttons.add_plugin = {
     text: '<span class="tf-icons bx bx-plus"></span>&nbsp;Add<span class="d-none d-md-inline"> plugin(s)</span>',
-    className: `btn btn-sm btn-outline-bw-green${
+    className: `btn btn-sm rounded me-4 btn-bw-green${
       isReadOnly ? " disabled" : ""
     }`,
     action: function (e, dt, node, config) {
@@ -536,6 +536,15 @@ $(document).ready(function () {
     }
   });
 
+  $(document).on("click", ".delete-plugin", function () {
+    if (isReadOnly) {
+      alert("This action is not allowed in read-only mode.");
+      return;
+    }
+    $this = $(this);
+    setupDeletionModal([$this.data("plugin-id")]);
+  });
+
   // Open file dialog on click
   dragArea.on("click", function () {
     fileInput.click();

src/ui/app/static/js/pages/services.js

@@ -132,7 +132,7 @@ $(function () {
       extend: "colvis",
       columns: "th:not(:first-child):not(:nth-child(2)):not(:last-child)",
       text: '<span class="tf-icons bx bx-columns bx-18px me-2"></span>Columns',
-      className: "btn btn-sm btn-outline-primary",
+      className: "btn btn-sm btn-outline-primary rounded-start",
       columnText: (dt, idx, title) => `${idx + 1}. ${title}`,
     },
     {
@@ -238,7 +238,7 @@ $(function () {
 
   $.fn.dataTable.ext.buttons.create_service = {
     text: '<span class="tf-icons bx bx-plus"></span>&nbsp;Create<span class="d-none d-md-inline"> new service</span>',
-    className: `btn btn-sm btn-outline-bw-green${
+    className: `btn btn-sm rounded me-4 btn-bw-green${
       isReadOnly ? " disabled" : ""
     }`,
     action: function () {

src/ui/app/static/js/utils.js

@@ -440,6 +440,8 @@ $(document).ready(() => {
         .removeClass("bg-light-subtle");
       $("html").attr("data-bs-theme", "dark");
       $(".dark-mode-toggle-icon").removeClass("bx-sun").addClass("bx-moon");
+      $("[alt='BunkerWeb logo']").attr("src", $("#bw-logo-white").val());
+      $("[alt='User Avatar']").attr("src", $("#avatar-url-white").val());
     } else {
       $("html").removeClass("dark-style").addClass("light-style");
       $(".btn-outline-light")
@@ -452,6 +454,8 @@ $(document).ready(() => {
         .removeClass("bg-dark-subtle");
       $("html").attr("data-bs-theme", null);
       $(".dark-mode-toggle-icon").removeClass("bx-moon").addClass("bx-sun");
+      $("[alt='BunkerWeb logo']").attr("src", $("#bw-logo").val());
+      $("[alt='User Avatar']").attr("src", $("#avatar-url").val());
     }
 
     $("#theme").val(darkMode ? "dark" : "light");

src/ui/app/templates/about.html

@@ -16,7 +16,7 @@
                                     <span class="app-brand-logo login">
                                         <img class="img-fluid"
                                              src="{{ url_for('static', filename='img/icon.svg') }}"
-                                             alt="BunkerWeb logo"
+                                             alt="BunkerWeb icon"
                                              width="100">
                                     </span>
                                 </a>

src/ui/app/templates/bans.html

@@ -144,7 +144,7 @@
                             </ul>
                         </div>
                         <div class="modal-footer justify-content-center">
-                            <button type="submit" class="btn btn-outline-danger me-2">Ban</button>
+                            <button type="submit" class="btn btn-danger me-2">Ban</button>
                             <button type="reset"
                                     class="btn btn-outline-secondary"
                                     data-bs-dismiss="modal">Cancel</button>
@@ -179,7 +179,7 @@
                             </ul>
                         </div>
                         <div class="modal-footer justify-content-center">
-                            <button type="submit" class="btn btn-outline-danger me-2">Unban</button>
+                            <button type="submit" class="btn btn-danger me-2">Unban</button>
                             <button type="reset"
                                     class="btn btn-outline-secondary"
                                     data-bs-dismiss="modal">Cancel</button>

src/ui/app/templates/base.html

@@ -1,7 +1,7 @@
 {% set current_endpoint = request.path.split("/")[-1] %}
 {% set theme = theme or "light" %}
 {% set pro_diamond_url = url_for('static', filename='img/diamond.svg') %}
-{% set avatar_url = url_for('static', filename='img/avatar_profil_BW.png') %}
+{% set avatar_url = url_for('static', filename='img/avatar_profil_BW.png' if theme == 'light' else 'img/avatar_profil_BW-white.png') %}
 {% set plugin_types = {
     "core": {
         "icon": "<i class=\"bx bx-shield bx-xs\"></i>",
@@ -127,6 +127,10 @@
     <body>
         <input type="hidden" id="is-read-only" value="{{ is_readonly }}" />
         <input type="hidden" id="theme" value="{{ theme }}" />
+        <input type="hidden" id="bw-logo" value="{{ url_for('static', filename='img/logo-menu.png') }}" />
+        <input type="hidden" id="bw-logo-white" value="{{ url_for('static', filename='img/logo-menu-white.png') }}" />
+        <input type="hidden" id="avatar-url" value="{{ url_for('static', filename='img/avatar_profil_BW.png') }}" />
+        <input type="hidden" id="avatar-url-white" value="{{ url_for('static', filename='img/avatar_profil_BW-white.png') }}" />
         <!-- prettier-ignore -->
         {% if current_endpoint != "loading" %}
             {% include "flash.html" %}

src/ui/app/templates/config_edit.html

@@ -129,7 +129,7 @@
                  "
                  {% endif %}>
                 <button type="button"
-                        class="btn btn-sm btn-outline-bw-green save-config{% if not config_template and config_method and config_method != "ui" or is_readonly %} disabled{% endif %}">
+                        class="btn btn-sm btn-bw-green save-config{% if not config_template and config_method and config_method != "ui" or is_readonly %} disabled{% endif %}">
                     <i class="bx bx-save bx-sm"></i>
                     <span class="d-none d-md-inline">&nbsp;Save</span>
                 </button>

src/ui/app/templates/instances.html

@@ -201,7 +201,7 @@
                             </div>
                         </div>
                         <div class="modal-footer justify-content-center">
-                            <button type="submit" class="btn btn-outline-primary me-2">Create Instance</button>
+                            <button type="submit" class="btn btn-bw-green me-2">Create Instance</button>
                             <button type="reset"
                                     class="btn btn-outline-secondary"
                                     data-bs-dismiss="modal">Close</button>

src/ui/app/templates/login.html

@@ -36,7 +36,7 @@
                                        class="app-brand-link gap-2">
                                         <span class="app-brand-logo login w-50">
                                             <img class="img-fluid"
-                                                 src="{{ url_for('static', filename='img/logo-menu.png') }}"
+                                                 src="{% if theme == 'light' %}{{ url_for('static', filename='img/logo-menu.png') }}{% else %}{{ url_for('static', filename='img/logo-menu-white.png') }}{% endif %}"
                                                  alt="BunkerWeb logo">
                                         </span>
                                     </a>

src/ui/app/templates/menu.html

@@ -7,7 +7,7 @@
            class="app-brand-link p-5">
             <span class="app-brand-logo main w-100">
                 <img class="img-fluid"
-                     src="{{ url_for('static', filename='img/logo-menu.png') }}"
+                     src="{% if theme == 'light' %}{{ url_for('static', filename='img/logo-menu.png') }}{% else %}{{ url_for('static', filename='img/logo-menu-white.png') }}{% endif %}"
                      alt="BunkerWeb logo">
             </span>
         </a>

src/ui/app/templates/models/plugins_settings.html

@@ -88,7 +88,7 @@
                  "
                  {% endif %}>
                 <button type="button"
-                        class="btn btn-sm btn-outline-bw-green save-settings {% if service_method == "autoconf" or is_readonly %}disabled{% endif %}">
+                        class="btn btn-sm btn-bw-green save-settings {% if service_method == "autoconf" or is_readonly %}disabled{% endif %}">
                     <i class="bx bx-save bx-sm"></i>
                     <span class="d-none d-md-inline">&nbsp;Save</span>
                 </button>

src/ui/app/templates/models/plugins_settings_easy.html

@@ -251,7 +251,7 @@
                                                  "
                                                  {% endif %}>
                                                 <button type="button"
-                                                        class="btn btn-outline-bw-green save-settings{% if service_method == "autoconf" or is_readonly %} disabled{% endif %}"
+                                                        class="btn btn-bw-green save-settings{% if service_method == "autoconf" or is_readonly %} disabled{% endif %}"
                                                         data-template="{{ template }}">
                                                     <i class="bx bx-save bx-sm ms-sm-n2"></i>
                                                     <span class="align-middle d-sm-inline-block d-none ms-sm-1">Save</span>

src/ui/app/templates/navbar.html

@@ -130,7 +130,7 @@
                                 <div class="flex-shrink-0 me-2 me-md-3">
                                     <div class="avatar avatar-online">
                                         <img src="{{ avatar_url }}"
-                                             alt="Admin Avatar"
+                                             alt="User Avatar"
                                              class="w-px-40 h-auto rounded-circle" />
                                     </div>
                                 </div>

src/ui/app/templates/plugins.html

@@ -154,7 +154,7 @@
                         <div class="modal-footer justify-content-center">
                             <button id="add-plugins-submit"
                                     type="submit"
-                                    class="btn btn-outline-primary me-2 disabled">Add plugins</button>
+                                    class="btn btn-bw-green me-2 disabled">Add plugins</button>
                             <button type="reset"
                                     class="btn btn-outline-secondary"
                                     data-bs-dismiss="modal">Cancel</button>

src/ui/app/templates/pro.html

@@ -146,6 +146,7 @@
                             </div>
                             {% set setting = "PRO_LICENSE_KEY" %}
                             {% set setting_data = {"type": "password", "id": "license_key", "regex": "^.+$"} %}
+                            {% set setting_value = pro_license_key %}
                             {% set required = true %}
                             {% if is_readonly %}
                                 {% set disabled = true %}

src/ui/app/templates/profile.html

@@ -88,7 +88,7 @@
                         <div class="card-body pb-2">
                             <div class="d-flex align-items-start align-items-sm-center gap-6 pb-4 border-bottom">
                                 <img src="{{ avatar_url }}"
-                                     alt="Admin Avatar"
+                                     alt="User Avatar"
                                      class="d-block w-px-100 h-px-100 rounded"
                                      id="uploadedAvatar">
                                 <div class="button-wrapper"

src/ui/app/templates/totp.html

@@ -1,7 +1,26 @@
 {% extends "base.html" %}
 {% block page %}
     <!-- Content -->
-    <div class="bg-light-subtle">
+     <!-- Dark Mode Toggle - Enhanced Floating Button -->
+    <div class="theme-toggle position-fixed top-0 end-0 p-6"
+    style="z-index: 1030">
+   <div class="toggle-container d-flex align-items-center bg-white p-3 rounded-pill shadow-lg">
+       <label class="setting-checkbox-label pe-2 mb-0 fw-bold text-secondary"
+              for="dark-mode-toggle">Light</label>
+       <div class="form-switch">
+           <input id="dark-mode-toggle"
+                  name="dark-mode-toggle"
+                  class="form-check-input"
+                  type="checkbox"
+                  role="switch"
+                  {% if theme == "dark" %}checked{% endif %} />
+       </div>
+       <label class="setting-checkbox-label mb-0 fw-bold text-secondary"
+              for="dark-mode-toggle">Dark</label>
+   </div>
+</div>
+<!-- /Dark Mode Toggle -->
+    <div class="bg-{% if theme == 'light' %}light{% else %}dark{% endif %}-subtle">
         <div class="login-background">
             <div class="container-xxl">
                 <div class="authentication-wrapper authentication-basic container-p-y">
@@ -20,7 +39,7 @@
                                        class="app-brand-link gap-2">
                                         <span class="app-brand-logo login w-75">
                                             <img class="img-fluid"
-                                                 src="{{ url_for('static', filename='img/logo-menu.png') }}"
+                                                 src="{% if theme == 'light' %}{{ url_for('static', filename='img/logo-menu.png') }}{% else %}{{ url_for('static', filename='img/logo-menu-white.png') }}{% endif %}"
                                                  alt="BunkerWeb logo">
                                         </span>
                                     </a>
@@ -46,7 +65,7 @@
                                         </div>
                                     </div>
                                     <div class="mb-6">
-                                        <button class="btn btn-primary d-grid w-100" type="submit">Submit</button>
+                                        <button class="btn btn-primary d-grid w-100 don-jose" type="submit">Submit</button>
                                     </div>
                                 </form>
                             </div>