From e62069d3db7e7049c1c799ace32dab78b3de2fe5 Mon Sep 17 00:00:00 2001
From: FreddleSpl0it <patschul@posteo.de>
Date: Fri, 1 Apr 2022 08:25:47 +0200
Subject: [PATCH] [BS5] change bootstrap in js

---
 data/web/js/build/014-mailcow.js | 45 +++++-------------
 data/web/js/site/admin.js        | 24 +++++-----
 data/web/js/site/debug.js        | 42 ++++++++---------
 data/web/js/site/mailbox.js      | 78 ++++++++++++++++----------------
 data/web/js/site/qhandler.js     | 10 ++--
 data/web/js/site/quarantine.js   | 24 +++++-----
 data/web/js/site/user.js         | 12 ++---
 7 files changed, 107 insertions(+), 128 deletions(-)

diff --git a/data/web/js/build/014-mailcow.js b/data/web/js/build/014-mailcow.js
index 7468310f..80854e13 100644
--- a/data/web/js/build/014-mailcow.js
+++ b/data/web/js/build/014-mailcow.js
@@ -55,14 +55,14 @@ $(document).ready(function() {
 
   //  tooltips
   $(function () {
-    $('[data-toggle="tooltip"]').tooltip()
+    $('[data-bs-toggle="tooltip"]').tooltip()
   });
 
   // remember last navigation pill
   (function () {
     'use strict';
-    if ($('a[data-toggle="tab"]').length) {
-      $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+    if ($('a[data-bs-toggle="tab"]').length) {
+      $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
         if ($(this).data('dont-remember') == 1) {
           return true;
         }
@@ -119,7 +119,7 @@ $(document).ready(function() {
       shake(password_field);
     }
     else {
-      $(hibp_result).attr('class', 'hibp-out label label-info');
+      $(hibp_result).attr('class', 'hibp-out badge fs-5 bg-info');
       $(hibp_result).text(lang_footer.loading);
       var password_digest = $.sha1($(password_field).val())
       var digest_five = password_digest.substring(0, 5).toUpperCase();
@@ -130,16 +130,16 @@ $(document).ready(function() {
         type: 'GET',
         success: function(res) {
           if (res.search(compl_digest) > -1){
-            $(hibp_result).removeClass('label label-info').addClass('label label-danger');
+            $(hibp_result).removeClass('badge fs-5 bg-info').addClass('badge fs-5 bg-danger');
             $(hibp_result).text(lang_footer.hibp_nok)
           } else {
-            $(hibp_result).removeClass('label label-info').addClass('label label-success');
+            $(hibp_result).removeClass('badge fs-5 bg-info').addClass('badge fs-5 bg-success');
             $(hibp_result).text(lang_footer.hibp_ok)
           }
           $(hibp_field).removeClass('task-running');
         },
         error: function(xhr, status, error) {
-          $(hibp_result).removeClass('label label-info').addClass('label label-warning');
+          $(hibp_result).removeClass('badge fs-5 bg-info').addClass('badge fs-5 bg-warning');
           $(hibp_result).text('API error: ' + xhr.responseText)
           $(hibp_field).removeClass('task-running');
         }
@@ -150,8 +150,8 @@ $(document).ready(function() {
   // Disable disallowed inputs
   $('[data-acl="0"]').each(function(event){
     if ($(this).is("a")) {
-      $(this).removeAttr("data-toggle");
-      $(this).removeAttr("data-target");
+      $(this).removeAttr("data-bs-toggle");
+      $(this).removeAttr("data-bs-target");
       $(this).removeAttr("data-action");
       $(this).click(function(event) {
         event.preventDefault();
@@ -166,8 +166,8 @@ $(document).ready(function() {
     if ($(this).hasClass('btn-group')) {
       $(this).find('a').each(function(){
         $(this).removeClass('dropdown-toggle')
-          .removeAttr('data-toggle')
-          .removeAttr('data-target')
+          .removeAttr('data-bs-toggle')
+          .removeAttr('data-bs-target')
           .removeAttr('data-action')
           .removeAttr('id')
           .attr("disabled", true);
@@ -182,7 +182,7 @@ $(document).ready(function() {
     } else if ($(this).hasClass('input-group')) {
       $(this).find('input').each(function() {
         $(this).removeClass('dropdown-toggle')
-          .removeAttr('data-toggle')
+          .removeAttr('data-bs-toggle')
           .attr("disabled", true);
         $(this).click(function(event) {
           event.preventDefault();
@@ -252,25 +252,4 @@ $(document).ready(function() {
       })
     });
   })
-
-  // responsive tabs
-  $('.responsive-tabs').tabCollapse({
-    tabsClass: 'hidden-xs',
-    accordionClass: 'js-tabcollapse-panel-group visible-xs'
-  });
-  $(document).on("shown.bs.collapse shown.bs.tab", function (e) {
-	  var target = $(e.target);
-	  if($(window).width() <= 767) {
-		  var offset = target.offset().top - 112;
-		  $("html, body").stop().animate({
-		    scrollTop: offset
-		  }, 100);
-	  }
-	  if(target.hasClass('panel-collapse')){
-	    var id = e.target.id.replace(/-collapse$/g, '');
-	    if(id){
-          localStorage.setItem('lastTag', '#'+id);
-        }
-      }
-  });
 });
diff --git a/data/web/js/site/admin.js b/data/web/js/site/admin.js
index eac7b21a..e1ddc1ba 100644
--- a/data/web/js/site/admin.js
+++ b/data/web/js/site/admin.js
@@ -64,7 +64,7 @@ jQuery(function($){
     eval(draw_table + '()');
   });
   function table_admin_ready(ft, name) {
-    heading = ft.$el.parents('.panel').find('.panel-heading')
+    heading = ft.$el.parents('.card').find('.card-header')
     var ft_paging = ft.use(FooTable.Paging)
     $(heading).children('.table-lines').text(function(){
       return ft_paging.totalRows;
@@ -282,8 +282,8 @@ jQuery(function($){
     if (table == 'relayhoststable') {
       $.each(data, function (i, item) {
         item.action = '<div class="btn-group footable-actions">' +
-          '<a href="#" data-toggle="modal" data-target="#testTransportModal" data-transport-id="' + encodeURI(item.id) + '" data-transport-type="sender-dependent" class="btn btn-xs btn-xs-third btn-default"><i class="bi bi-caret-right-fill"></i> Test</a>' +
-          '<a href="/edit/relayhost/' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-third btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+          '<a href="#" data-bs-toggle="modal" data-bs-target="#testTransportModal" data-transport-id="' + encodeURI(item.id) + '" data-transport-type="sender-dependent" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-caret-right-fill"></i> Test</a>' +
+          '<a href="/edit/relayhost/' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
           '<a href="#" data-action="delete_selected" data-id="single-rlyhost" data-api-url="delete/relayhost" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
           '</div>';
         if (item.used_by_mailboxes == '') { item.in_use_by = item.used_by_domains; }
@@ -294,14 +294,14 @@ jQuery(function($){
     } else if (table == 'transportstable') {
       $.each(data, function (i, item) {
         if (item.is_mx_based) {
-          item.destination = '<i class="bi bi-info-circle-fill text-info mx-info" data-toggle="tooltip" title="' + lang.is_mx_based + '"></i> <code>' + item.destination + '</code>';
+          item.destination = '<i class="bi bi-info-circle-fill text-info mx-info" data-bs-toggle="tooltip" title="' + lang.is_mx_based + '"></i> <code>' + item.destination + '</code>';
         }
         if (item.username) {
           item.username = '<i style="color:#' + intToRGB(hashCode(item.nexthop)) + ';" class="bi bi-square-fill"></i> ' + item.username;
         }
         item.action = '<div class="btn-group footable-actions">' +
-          '<a href="#" data-toggle="modal" data-target="#testTransportModal" data-transport-id="' + encodeURI(item.id) + '" data-transport-type="transport-map" class="btn btn-xs btn-xs-third btn-default"><i class="bi bi-caret-right-fill"></i> Test</a>' +
-          '<a href="/edit/transport/' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-third btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+          '<a href="#" data-bs-toggle="modal" data-bs-target="#testTransportModal" data-transport-id="' + encodeURI(item.id) + '" data-transport-type="transport-map" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-caret-right-fill"></i> Test</a>' +
+          '<a href="/edit/transport/' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
           '<a href="#" data-action="delete_selected" data-id="single-transport" data-api-url="delete/transport" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
           '</div>';
         item.chkbox = '<input type="checkbox" data-id="transports" name="multi_select" value="' + item.id + '" />';
@@ -314,7 +314,7 @@ jQuery(function($){
         });
         item.recipients = rcpts.join('<hr style="margin:1px!important">');
         item.action = '<div class="btn-group footable-actions">' +
-          '<a href="#" data-toggle="modal" data-target="#showQueuedMsg" data-queue-id="' + encodeURI(item.queue_id) + '" class="btn btn-xs btn-default">' + lang.queue_show_message + '</a>' +
+          '<a href="#" data-bs-toggle="modal" data-bs-target="#showQueuedMsg" data-queue-id="' + encodeURI(item.queue_id) + '" class="btn btn-xs btn-secondary">' + lang.queue_show_message + '</a>' +
           '</div>';
       });
     } else if (table == 'forwardinghoststable') {
@@ -327,7 +327,7 @@ jQuery(function($){
     } else if (table == 'oauth2clientstable') {
       $.each(data, function (i, item) {
         item.action = '<div class="btn-group footable-actions">' +
-          '<a href="/edit.php?oauth2client=' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-half btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+          '<a href="/edit.php?oauth2client=' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
           '<a href="#" data-action="delete_selected" data-id="single-oauth2-client" data-api-url="delete/oauth2-client" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
           '</div>';
         item.scope = "profile";
@@ -340,7 +340,7 @@ jQuery(function($){
         item.selected_domains = item.selected_domains.toString().replace(/,/g, "<br>");
         item.chkbox = '<input type="checkbox" data-id="domain_admins" name="multi_select" value="' + item.username + '" />';
         item.action = '<div class="btn-group footable-actions">' +
-          '<a href="/edit/domainadmin/' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-third btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+          '<a href="/edit/domainadmin/' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
           '<a href="#" data-action="delete_selected" data-id="single-domain-admin" data-api-url="delete/domain-admin" data-item="' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
           '<a href="/index.php?duallogin=' + encodeURIComponent(item.username) + '" class="btn btn-xs btn-xs-third btn-success"><i class="bi bi-person-fill"></i> Login</a>' +
           '</div>';
@@ -354,7 +354,7 @@ jQuery(function($){
         }
         item.chkbox = '<input type="checkbox" data-id="admins" name="multi_select" value="' + item.username + '" />';
         item.action = '<div class="btn-group footable-actions">' +
-          '<a href="/edit/admin/' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-half btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+          '<a href="/edit/admin/' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
           '<a href="#" data-action="delete_selected" data-id="single-admin" data-api-url="delete/admin" data-item="' + encodeURI(item.username) + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
           '</div>';
       });
@@ -483,11 +483,11 @@ jQuery(function($){
     if (type == "app_link") {
     cols = '<td><input class="input-sm input-xs-lg form-control" data-id="app_links" type="text" name="app" required></td>';
     cols += '<td><input class="input-sm input-xs-lg form-control" data-id="app_links" type="text" name="href" required></td>';
-    cols += '<td><a href="#" role="button" class="btn btn-sm btn-xs-lg btn-default" type="button">' + lang.remove_row + '</a></td>';
+    cols += '<td><a href="#" role="button" class="btn btn-sm btn-xs-lg btn-secondary" type="button">' + lang.remove_row + '</a></td>';
     } else if (type == "f2b_regex") {
     cols = '<td><input style="text-align:center" class="input-sm input-xs-lg form-control" data-id="f2b_regex" type="text" value="+" disabled></td>';
     cols += '<td><input class="input-sm input-xs-lg form-control regex-input" data-id="f2b_regex" type="text" name="regex" required></td>';
-    cols += '<td><a href="#" role="button" class="btn btn-sm btn-xs-lg btn-default" type="button">' + lang.remove_row + '</a></td>';
+    cols += '<td><a href="#" role="button" class="btn btn-sm btn-xs-lg btn-secondary" type="button">' + lang.remove_row + '</a></td>';
     }
     row.append(cols);
     table_id.append(row);
diff --git a/data/web/js/site/debug.js b/data/web/js/site/debug.js
index 8f2aa663..8f4c0f65 100644
--- a/data/web/js/site/debug.js
+++ b/data/web/js/site/debug.js
@@ -57,7 +57,7 @@ jQuery(function($){
     eval(draw_table + '()');
   });
   function table_log_ready(ft, name) {
-    heading = ft.$el.parents('.panel').find('.panel-heading')
+    heading = ft.$el.parents('.card').find('.card-header')
     var ft_paging = ft.use(FooTable.Paging)
     $('.refresh_table').prop("disabled", false);
     $(heading).children('.table-lines').text(function(){
@@ -573,7 +573,7 @@ jQuery(function($){
         },
         "ready.ft.table": function(e, ft){
           table_log_ready(ft, 'rspamd_history');
-          heading = ft.$el.parents('.panel').find('.panel-heading')
+          heading = ft.$el.parents('.card').find('.card-header')
           $(heading).children('.table-lines').text(function(){
             var ft_paging = ft.use(FooTable.Paging)
             return ft_paging.totalRows;
@@ -634,13 +634,13 @@ jQuery(function($){
         "value": scan_time
       };
       if (item.action === 'clean' || item.action === 'no action') {
-        item.action = "<div class='label label-success'>" + item.action + "</div>";
+        item.action = "<div class='badge fs-5 bg-success'>" + item.action + "</div>";
       } else if (item.action === 'rewrite subject' || item.action === 'add header' || item.action === 'probable spam') {
-        item.action = "<div class='label label-warning'>" + item.action + "</div>";
+        item.action = "<div class='badge fs-5 bg-warning'>" + item.action + "</div>";
       } else if (item.action === 'spam' || item.action === 'reject') {
-        item.action = "<div class='label label-danger'>" + item.action + "</div>";
+        item.action = "<div class='badge fs-5 bg-danger'>" + item.action + "</div>";
       } else {
-        item.action = "<div class='label label-info'>" + item.action + "</div>";
+        item.action = "<div class='badge fs-5 bg-info'>" + item.action + "</div>";
       }
       var score_content;
       if (item.score < item.required_score) {
@@ -667,13 +667,13 @@ jQuery(function($){
         }
         item.ua = '<span style="font-size:small">' + item.ua + '</span>';
         if (item.service == "activesync") {
-          item.service = '<span class="label label-info">ActiveSync</span>';
+          item.service = '<span class="badge fs-5 bg-info">ActiveSync</span>';
         }
         else if (item.service == "imap") {
-          item.service = '<span class="label label-success">IMAP, SMTP, Cal-/CardDAV</span>';
+          item.service = '<span class="badge fs-5 bg-success">IMAP, SMTP, Cal-/CardDAV</span>';
         }
         else {
-          item.service = '<span class="label label-danger">' + escapeHtml(item.service) + '</span>';
+          item.service = '<span class="badge fs-5 bg-danger">' + escapeHtml(item.service) + '</span>';
         }
       });
     } else if (table == 'watchdog') {
@@ -681,13 +681,13 @@ jQuery(function($){
         if (item.message == null) {
           item.message = 'Health level: ' + item.lvl + '% (' + item.hpnow + '/' + item.hptotal + ')';
           if (item.hpdiff < 0) {
-            item.trend = '<span class="label label-danger"><i class="bi bi-caret-down-fill"></i> ' + item.hpdiff + '</span>';
+            item.trend = '<span class="badge fs-5 bg-danger"><i class="bi bi-caret-down-fill"></i> ' + item.hpdiff + '</span>';
           }
           else if (item.hpdiff == 0) {
-            item.trend = '<span class="label label-info"><i class="bi bi-caret-right-fill"></i> ' + item.hpdiff + '</span>';
+            item.trend = '<span class="badge fs-5 bg-info"><i class="bi bi-caret-right-fill"></i> ' + item.hpdiff + '</span>';
           }
           else {
-            item.trend = '<span class="label label-success"><i class="bi bi-caret-up-fill"></i> ' + item.hpdiff + '</span>';
+            item.trend = '<span class="badge fs-5 bg-success"><i class="bi bi-caret-up-fill"></i> ' + item.hpdiff + '</span>';
           }
         }
         else {
@@ -701,13 +701,13 @@ jQuery(function($){
         item.user = escapeHtml(item.user);
         item.call = escapeHtml(item.call);
         item.task = '<code>' + item.task + '</code>';
-        item.type = '<span class="label label-' + item.type + '">' + item.type + '</span>';
+        item.type = '<span class="badge fs-5 bg-' + item.type + '">' + item.type + '</span>';
       });
     } else if (table == 'sasl_log_table') {
       $.each(data, function (i, item) {
         if (item === null) { return true; }
         item.username = escapeHtml(item.username);
-        item.service = '<div class="label label-default">' + item.service.toUpperCase() + '</div>';
+        item.service = '<div class="badge fs-5 bg-secondary">' + item.service.toUpperCase() + '</div>';
     });
     } else if (table == 'general_syslog') {
       $.each(data, function (i, item) {
@@ -726,20 +726,20 @@ jQuery(function($){
         var warning_class = ["warning", "warn"];
         var info_class = ["notice", "info", "debug"];
         if (jQuery.inArray(item.priority, danger_class) !== -1) {
-          item.priority = '<span class="label label-danger">' + item.priority + '</span>';
+          item.priority = '<span class="badge fs-5 bg-danger">' + item.priority + '</span>';
         } else if (jQuery.inArray(item.priority, warning_class) !== -1) {
-          item.priority = '<span class="label label-warning">' + item.priority + '</span>';
+          item.priority = '<span class="badge fs-5 bg-warning">' + item.priority + '</span>';
         } else if (jQuery.inArray(item.priority, info_class) !== -1) {
-          item.priority = '<span class="label label-info">' + item.priority + '</span>';
+          item.priority = '<span class="badge fs-5 bg-info">' + item.priority + '</span>';
         }
       });
     } else if (table == 'apilog') {
       $.each(data, function (i, item) {
         if (item === null) { return true; }
         if (item.method == 'GET') {
-          item.method = '<span class="label label-success">' + item.method + '</span>';
+          item.method = '<span class="badge fs-5 bg-success">' + item.method + '</span>';
         } else if (item.method == 'POST') {
-          item.method = '<span class="label label-warning">' + item.method + '</span>';
+          item.method = '<span class="badge fs-5 bg-warning">' + item.method + '</span>';
         }
         item.data = escapeHtml(item.data);
       });
@@ -770,7 +770,7 @@ jQuery(function($){
       return;
     }
     if (ft = FooTable.get($('#' + log_table))) {
-      var heading = ft.$el.parents('.panel').find('.panel-heading')
+      var heading = ft.$el.parents('.card').find('.card-header')
       var ft_paging = ft.use(FooTable.Paging)
       var load_rows = (ft_paging.totalRows + 1) + '-' + (ft_paging.totalRows + new_nrows)
       $.get('/api/v1/get/logs/' + log_url + '/' + load_rows).then(function(data){
@@ -796,7 +796,7 @@ jQuery(function($){
   draw_sasl_logs();
   draw_netfilter_logs();
   draw_rspamd_history();
-  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+  $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
     var target = $(e.target).attr("href");
     if (target == '#tab-rspamd-history') {
       rspamd_pie_graph();
diff --git a/data/web/js/site/mailbox.js b/data/web/js/site/mailbox.js
index 745c4f21..a9e64bf8 100644
--- a/data/web/js/site/mailbox.js
+++ b/data/web/js/site/mailbox.js
@@ -61,7 +61,7 @@ $(document).ready(function() {
     var table_id = $(parent_ul).data('table-id');
     FooTable.get('#' + table_id).pageSize(new_size);
     //$(this).parent().addClass('active').siblings().removeClass('active')
-    heading = $(this).parents('.panel').find('.panel-heading')
+    heading = $(this).parents('.card').find('.card-header')
     var n_results = $(heading).children('.table-lines').text().split(' / ')[1];
     $(heading).children('.table-lines').text(function(){
       if (new_size > n_results) {
@@ -258,7 +258,7 @@ jQuery(function($){
         .tooltip();
     }
     $('.refresh_table').prop("disabled", false);
-    heading = ft.$el.parents('.panel').find('.panel-heading')
+    heading = ft.$el.parents('.card').find('.card-header')
     var ft_paging = ft.use(FooTable.Paging)
     $(heading).children('.table-lines').text(function(){
       var total_rows = ft_paging.totalRows;
@@ -321,22 +321,22 @@ jQuery(function($){
             item.chkbox = '<input type="checkbox" data-id="domain" name="multi_select" value="' + encodeURIComponent(item.domain_name) + '" />';
             item.action = '<div class="btn-group footable-actions">';
             if (role == "admin") {
-              item.action += '<a href="/edit/domain/' + encodeURIComponent(item.domain_name) + '" class="btn btn-xs btn-xs-third btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              item.action += '<a href="/edit/domain/' + encodeURIComponent(item.domain_name) + '" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
                 '<a href="#" data-action="delete_selected" data-id="single-domain" data-api-url="delete/domain" data-item="' + encodeURIComponent(item.domain_name) + '" class="btn btn-xs btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
-                 '<a href="#dnsInfoModal" class="btn btn-xs btn-xs-third btn-info" data-toggle="modal" data-domain="' + encodeURIComponent(item.domain_name) + '"><i class="bi bi-globe2"></i> DNS</a></div>';
+                 '<a href="#dnsInfoModal" class="btn btn-xs btn-xs-third btn-info" data-bs-toggle="modal" data-domain="' + encodeURIComponent(item.domain_name) + '"><i class="bi bi-globe2"></i> DNS</a></div>';
             }
             else {
-              item.action += '<a href="/edit/domain/' + encodeURIComponent(item.domain_name) + '" class="btn btn-xs btn-xs-half btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
-              '<a href="#dnsInfoModal" class="btn btn-xs btn-xs-half btn-info" data-toggle="modal" data-domain="' + encodeURIComponent(item.domain_name) + '"><i class="bi bi-globe2"></i> DNS</a></div>';
+              item.action += '<a href="/edit/domain/' + encodeURIComponent(item.domain_name) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="#dnsInfoModal" class="btn btn-xs btn-xs-half btn-info" data-bs-toggle="modal" data-domain="' + encodeURIComponent(item.domain_name) + '"><i class="bi bi-globe2"></i> DNS</a></div>';
             }
 
             if (item.backupmx == 1) {
               if (item.relay_unknown_only == 1) {
-                item.domain_name = '<div class="label label-info">Relay Non-Local</div> ' + item.domain_name;
+                item.domain_name = '<div class="badge fs-5 bg-info">Relay Non-Local</div> ' + item.domain_name;
               } else if (item.relay_all_recipients == 1) {
-                item.domain_name = '<div class="label label-info">Relay All</div> ' + item.domain_name;
+                item.domain_name = '<div class="badge fs-5 bg-info">Relay All</div> ' + item.domain_name;
               } else {
-                item.domain_name = '<div class="label label-info">Relay</div> ' + item.domain_name;
+                item.domain_name = '<div class="badge fs-5 bg-info">Relay</div> ' + item.domain_name;
               }
             }
           });
@@ -405,9 +405,9 @@ jQuery(function($){
         },
         "formatter": function(value){
           res = value.split("/");
-          return '<div class="label label-last-login">IMAP @ ' + unix_time_format(Number(res[0])) + '</div><br>' +
-            '<div class="label label-last-login">POP3 @ ' + unix_time_format(Number(res[1])) + '</div><br>' +
-            '<div class="label label-last-login">SMTP @ ' + unix_time_format(Number(res[2])) + '</div>';
+          return '<div class="badge fs-5 bg-last-login">IMAP @ ' + unix_time_format(Number(res[0])) + '</div><br>' +
+            '<div class="badge fs-5 bg-last-login">POP3 @ ' + unix_time_format(Number(res[1])) + '</div><br>' +
+            '<div class="badge fs-5 bg-last-login">SMTP @ ' + unix_time_format(Number(res[2])) + '</div>';
         }},
         {"name":"last_pw_change","filterable": false,"title":lang.last_pw_change,"breakpoints":"all"},
         {"name":"quarantine_notification","filterable": false,"title":lang.quarantine_notification,"breakpoints":"all"},
@@ -479,7 +479,7 @@ jQuery(function($){
               if (ALLOW_ADMIN_EMAIL_LOGIN) btnSize = 'btn-xs-quart';
 
             item.action = '<div class="btn-group footable-actions">' +
-              '<a href="/edit/mailbox/' + encodeURIComponent(item.username) + '" class="btn btn-xs ' + btnSize + ' btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/mailbox/' + encodeURIComponent(item.username) + '" class="btn btn-xs ' + btnSize + ' btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
               '<a href="#" data-action="delete_selected" data-id="single-mailbox" data-api-url="delete/mailbox" data-item="' + encodeURIComponent(item.username) + '" class="btn btn-xs ' + btnSize + ' btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '<a href="/index.php?duallogin=' + encodeURIComponent(item.username) + '" class="login_as btn btn-xs ' + btnSize + ' btn-success"><i class="bi bi-person-fill"></i> Login</a>';
               if (ALLOW_ADMIN_EMAIL_LOGIN) {
@@ -489,7 +489,7 @@ jQuery(function($){
             }
             else {
             item.action = '<div class="btn-group">' +
-              '<a href="/edit/mailbox/' + encodeURIComponent(item.username) + '" class="btn btn-xs btn-xs-half btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/mailbox/' + encodeURIComponent(item.username) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
               '<a href="#" data-action="delete_selected" data-id="single-mailbox" data-api-url="delete/mailbox" data-item="' + encodeURIComponent(item.username) + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
             }
@@ -559,14 +559,14 @@ jQuery(function($){
         success: function (data) {
           $.each(data, function (i, item) {
             if (item.multiple_bookings == '0') {
-              item.multiple_bookings = '<span id="active-script" class="label label-success">' + lang.booking_0_short + '</span>';
+              item.multiple_bookings = '<span id="active-script" class="badge fs-5 bg-success">' + lang.booking_0_short + '</span>';
             } else if (item.multiple_bookings == '-1') {
-              item.multiple_bookings = '<span id="active-script" class="label label-warning">' + lang.booking_lt0_short + '</span>';
+              item.multiple_bookings = '<span id="active-script" class="badge fs-5 bg-warning">' + lang.booking_lt0_short + '</span>';
             } else {
-              item.multiple_bookings = '<span id="active-script" class="label label-danger">' + lang.booking_custom_short + ' (' + item.multiple_bookings + ')</span>';
+              item.multiple_bookings = '<span id="active-script" class="badge fs-5 bg-danger">' + lang.booking_custom_short + ' (' + item.multiple_bookings + ')</span>';
             }
             item.action = '<div class="btn-group footable-actions">' +
-              '<a href="/edit/resource/' + encodeURIComponent(item.name) + '" class="btn btn-xs btn-xs-half btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/resource/' + encodeURIComponent(item.name) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
               '<a href="#" data-action="delete_selected" data-id="single-resource" data-api-url="delete/resource" data-item="' + item.name + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
             item.chkbox = '<input type="checkbox" data-id="resource" name="multi_select" value="' + encodeURIComponent(item.name) + '" />';
@@ -632,16 +632,16 @@ jQuery(function($){
         success: function (data) {
           $.each(data, function (i, item) {
             item.action = '<div class="btn-group footable-actions">' +
-              '<a href="/edit/bcc/' + item.id + '" class="btn btn-xs btn-xs-half btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/bcc/' + item.id + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
               '<a href="#" data-action="delete_selected" data-id="single-bcc" data-api-url="delete/bcc" data-item="' + item.id + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
             item.chkbox = '<input type="checkbox" data-id="bcc" name="multi_select" value="' + item.id + '" />';
             item.local_dest = escapeHtml(item.local_dest);
             item.bcc_dest = escapeHtml(item.bcc_dest);
             if (item.type == 'sender') {
-              item.type = '<span id="active-script" class="label label-success">' + lang.bcc_sender_map + '</span>';
+              item.type = '<span id="active-script" class="badge fs-5 bg-success">' + lang.bcc_sender_map + '</span>';
             } else {
-              item.type = '<span id="inactive-script" class="label label-warning">' + lang.bcc_rcpt_map + '</span>';
+              item.type = '<span id="inactive-script" class="badge fs-5 bg-warning">' + lang.bcc_rcpt_map + '</span>';
             }
           });
         }
@@ -702,7 +702,7 @@ jQuery(function($){
               item.recipient_map_old = escapeHtml(item.recipient_map_old);
               item.recipient_map_new = escapeHtml(item.recipient_map_new);
               item.action = '<div class="btn-group footable-actions">' +
-                '<a href="/edit/recipient_map/' + item.id + '" class="btn btn-xs btn-xs-half btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+                '<a href="/edit/recipient_map/' + item.id + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
                 '<a href="#" data-action="delete_selected" data-id="single-recipient_map" data-api-url="delete/recipient_map" data-item="' + item.id + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
                 '</div>';
               item.chkbox = '<input type="checkbox" data-id="recipient_map" name="multi_select" value="' + item.id + '" />';
@@ -772,7 +772,7 @@ jQuery(function($){
                 item.parameters = '<code>' + escapeHtml(item.parameters) + '</code>';
               }
               item.action = '<div class="btn-group footable-actions">' +
-                '<a href="/edit/tls_policy_map/' + item.id + '" class="btn btn-xs btn-xs-half btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+                '<a href="/edit/tls_policy_map/' + item.id + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
                 '<a href="#" data-action="delete_selected" data-id="single-tls-policy-map" data-api-url="delete/tls-policy-map" data-item="' + item.id + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
                 '</div>';
               item.chkbox = '<input type="checkbox" data-id="tls-policy-map" name="multi_select" value="' + item.id + '" />';
@@ -837,7 +837,7 @@ jQuery(function($){
         success: function (data) {
           $.each(data, function (i, item) {
             item.action = '<div class="btn-group footable-actions">' +
-              '<a href="/edit/alias/' + encodeURIComponent(item.id) + '" class="btn btn-xs btn-xs-half btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/alias/' + encodeURIComponent(item.id) + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
               '<a href="#" data-action="delete_selected" data-id="single-alias" data-api-url="delete/alias" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
             item.chkbox = '<input type="checkbox" data-id="alias" name="multi_select" value="' + encodeURIComponent(item.id) + '" />';
@@ -855,7 +855,7 @@ jQuery(function($){
               item.private_comment = '-';
             }
             if (item.is_catch_all == 1) {
-              item.address = '<div class="label label-default">' + lang.catch_all + '</div> ' + escapeHtml(item.address);
+              item.address = '<div class="badge fs-5 bg-secondary">' + lang.catch_all + '</div> ' + escapeHtml(item.address);
             }
             else {
               item.address = escapeHtml(item.address);
@@ -864,13 +864,13 @@ jQuery(function($){
               item.goto = '⤷ <i class="bi bi-trash" style="font-size:12px"></i>';
             }
             else if (item.goto == "spam@localhost") {
-              item.goto = '<span class="label label-danger">' + lang.goto_spam + '</span>';
+              item.goto = '<span class="badge fs-5 bg-danger">' + lang.goto_spam + '</span>';
             }
             else if (item.goto == "ham@localhost") {
-              item.goto = '<span class="label label-success">' + lang.goto_ham + '</span>';
+              item.goto = '<span class="badge fs-5 bg-success">' + lang.goto_ham + '</span>';
             }
             if (item.in_primary_domain !== "") {
-              item.domain = '<i data-domainname="' + item.domain + '" class="bi bi-info-circle-fill alias-domain-info text-info" data-toggle="tooltip" title="' + lang.target_domain + ': ' + item.in_primary_domain + '"></i> ' + item.domain;
+              item.domain = '<i data-domainname="' + item.domain + '" class="bi bi-info-circle-fill alias-domain-info text-info" data-bs-toggle="tooltip" title="' + lang.target_domain + ': ' + item.in_primary_domain + '"></i> ' + item.domain;
             }
           });
         }
@@ -932,13 +932,13 @@ jQuery(function($){
         success: function (data) {
           $.each(data, function (i, item) {
             item.action = '<div class="btn-group footable-actions">' +
-              '<a href="/edit/aliasdomain/' + encodeURIComponent(item.alias_domain) + '" class="btn btn-xs btn-xs-third btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/aliasdomain/' + encodeURIComponent(item.alias_domain) + '" class="btn btn-xs btn-xs-third btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
               '<a href="#" data-action="delete_selected" data-id="single-alias-domain" data-api-url="delete/alias-domain" data-item="' + encodeURIComponent(item.alias_domain) + '" class="btn btn-xs btn-xs-third btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
-              '<a href="#dnsInfoModal" class="btn btn-xs btn-xs-third btn-info" data-toggle="modal" data-domain="' + encodeURIComponent(item.alias_domain) + '"><i class="bi bi-globe2"></i> DNS</a></div>' +
+              '<a href="#dnsInfoModal" class="btn btn-xs btn-xs-third btn-info" data-bs-toggle="modal" data-domain="' + encodeURIComponent(item.alias_domain) + '"><i class="bi bi-globe2"></i> DNS</a></div>' +
               '</div>';
             item.chkbox = '<input type="checkbox" data-id="alias-domain" name="multi_select" value="' + encodeURIComponent(item.alias_domain) + '" />';
             if(item.parent_is_backupmx == '1') {
-              item.target_domain = '<span><a href="/edit/domain/' + item.target_domain + '">' + item.target_domain + '</a> <div class="label label-warning">' + lang.alias_domain_backupmx + '</div></span>';
+              item.target_domain = '<span><a href="/edit/domain/' + item.target_domain + '">' + item.target_domain + '</a> <div class="badge fs-5 bg-warning">' + lang.alias_domain_backupmx + '</div></span>';
             } else {
               item.target_domain = '<span><a href="/edit/domain/' + item.target_domain + '">' + item.target_domain + '</a></span>';
             }
@@ -1004,7 +1004,7 @@ jQuery(function($){
         },
         success: function (data) {
           $.each(data, function (i, item) {
-            item.log = '<a href="#syncjobLogModal" data-toggle="modal" data-syncjob-id="' + encodeURIComponent(item.id) + '">' + lang.open_logs + '</a>'
+            item.log = '<a href="#syncjobLogModal" data-bs-toggle="modal" data-syncjob-id="' + encodeURIComponent(item.id) + '">' + lang.open_logs + '</a>'
             item.user2 = escapeHtml(item.user2);
             if (!item.exclude > 0) {
               item.exclude = '-';
@@ -1013,14 +1013,14 @@ jQuery(function($){
             }
             item.server_w_port = escapeHtml(item.user1) + '@' + item.host1 + ':' + item.port1;
             item.action = '<div class="btn-group footable-actions">' +
-              '<a href="/edit/syncjob/' + item.id + '" class="btn btn-xs btn-xs-half btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/syncjob/' + item.id + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
               '<a href="#" data-action="delete_selected" data-id="single-syncjob" data-api-url="delete/syncjob" data-item="' + item.id + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
             item.chkbox = '<input type="checkbox" data-id="syncjob" name="multi_select" value="' + item.id + '" />';
             if (item.is_running == 1) {
-              item.is_running = '<span id="active-script" class="label label-success">' + lang.running + '</span>';
+              item.is_running = '<span id="active-script" class="badge fs-5 bg-success">' + lang.running + '</span>';
             } else {
-              item.is_running = '<span id="inactive-script" class="label label-warning">' + lang.waiting + '</span>';
+              item.is_running = '<span id="inactive-script" class="badge fs-5 bg-warning">' + lang.waiting + '</span>';
             }
             if (!item.last_run > 0) {
               item.last_run = lang.waiting;
@@ -1096,14 +1096,14 @@ jQuery(function($){
         success: function (data) {
           $.each(data, function (i, item) {
             if (item.active == 1) {
-              item.active = '<span id="active-script" class="label label-success">' + lang.active + '</span>';
+              item.active = '<span id="active-script" class="badge fs-5 bg-success">' + lang.active + '</span>';
             } else {
-              item.active = '<span id="inactive-script" class="label label-warning">' + lang.inactive + '</span>';
+              item.active = '<span id="inactive-script" class="badge fs-5 bg-warning">' + lang.inactive + '</span>';
             }
             item.script_data = '<pre style="margin:0px">' + escapeHtml(item.script_data) + '</pre>'
-            item.filter_type = '<div class="label label-default">' + item.filter_type.charAt(0).toUpperCase() + item.filter_type.slice(1).toLowerCase() + '</div>'
+            item.filter_type = '<div class="badge fs-5 bg-secondary">' + item.filter_type.charAt(0).toUpperCase() + item.filter_type.slice(1).toLowerCase() + '</div>'
             item.action = '<div class="btn-group footable-actions">' +
-              '<a href="/edit/filter/' + item.id + '" class="btn btn-xs btn-xs-half btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+              '<a href="/edit/filter/' + item.id + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
               '<a href="#" data-action="delete_selected" data-id="single-filter" data-api-url="delete/filter" data-item="' + encodeURIComponent(item.id) + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
             item.chkbox = '<input type="checkbox" data-id="filter_item" name="multi_select" value="' + item.id + '" />'
diff --git a/data/web/js/site/qhandler.js b/data/web/js/site/qhandler.js
index 4d32547b..31ac569c 100644
--- a/data/web/js/site/qhandler.js
+++ b/data/web/js/site/qhandler.js
@@ -40,17 +40,17 @@ jQuery(function($){
           if (value.score > 0) highlightClass = 'negative'
           else if (value.score < 0) highlightClass = 'positive'
           else highlightClass = 'neutral'
-          $('#qid_detail_symbols').append('<span data-toggle="tooltip" class="rspamd-symbol ' + highlightClass + '" title="' + (value.options ? value.options.join(', ') : '') + '">' + value.name + ' (<span class="score">' + value.score + '</span>)</span>');
+          $('#qid_detail_symbols').append('<span data-bs-toggle="tooltip" class="rspamd-symbol ' + highlightClass + '" title="' + (value.options ? value.options.join(', ') : '') + '">' + value.name + ' (<span class="score">' + value.score + '</span>)</span>');
         });
-        $('[data-toggle="tooltip"]').tooltip()
+        $('[data-bs-toggle="tooltip"]').tooltip()
       }
       if (typeof data.score !== 'undefined' && typeof data.action !== 'undefined') {
         if (data.action === "add header") {
-          $('#qid_detail_score').append('<span class="label-rspamd-action label label-warning"><b>' + data.score + '</b> - ' + lang.junk_folder + '</span>');
+          $('#qid_detail_score').append('<span class="label-rspamd-action badge fs-5 bg-warning"><b>' + data.score + '</b> - ' + lang.junk_folder + '</span>');
         } else if (data.action === "reject") {
-          $('#qid_detail_score').append('<span class="label-rspamd-action label label-danger"><b>' + data.score + '</b> - ' + lang.rejected + '</span>');
+          $('#qid_detail_score').append('<span class="label-rspamd-action badge fs-5 bg-danger"><b>' + data.score + '</b> - ' + lang.rejected + '</span>');
         } else if (data.action === "rewrite subject") {
-          $('#qid_detail_score').append('<span class="label-rspamd-action label label-warning"><b>' + data.score + '</b> - ' + lang.rewrite_subject + '</span>');
+          $('#qid_detail_score').append('<span class="label-rspamd-action badge fs-5 bg-warning"><b>' + data.score + '</b> - ' + lang.rewrite_subject + '</span>');
         }
       }
       if (typeof data.recipients !== 'undefined') {
diff --git a/data/web/js/site/quarantine.js b/data/web/js/site/quarantine.js
index 57bd4cc1..4b37390a 100644
--- a/data/web/js/site/quarantine.js
+++ b/data/web/js/site/quarantine.js
@@ -15,7 +15,7 @@ jQuery(function($){
     var table_id = $(parent_ul).data('table-id');
     FooTable.get('#' + table_id).pageSize(new_size);
     //$(this).parent().addClass('active').siblings().removeClass('active')
-    heading = $(this).parents('.panel').find('.panel-heading')
+    heading = $(this).parents('.card').find('.card-header')
     var n_results = $(heading).children('.table-lines').text().split(' / ')[1];
     $(heading).children('.table-lines').text(function(){
       if (new_size > n_results) {
@@ -33,7 +33,7 @@ jQuery(function($){
   });
   function table_quarantine_ready(ft, name) {
     $('.refresh_table').prop("disabled", false);
-    heading = ft.$el.parents('.panel').find('.panel-heading')
+    heading = ft.$el.parents('.card').find('.card-header')
     var ft_paging = ft.use(FooTable.Paging)
     $(heading).children('.table-lines').text(function(){
       var total_rows = ft_paging.totalRows;
@@ -78,16 +78,16 @@ jQuery(function($){
               item.score = '-';
             }
             if (item.virus_flag > 0) {
-              item.virus = '<span class="label label-danger">' + lang.high_danger + '</span>';
+              item.virus = '<span class="badge fs-5 bg-danger">' + lang.high_danger + '</span>';
             } else {
-              item.virus = '<span class="label label-default">' + lang.neutral_danger + '</span>';
+              item.virus = '<span class="badge fs-5 bg-secondary">' + lang.neutral_danger + '</span>';
             }
             if (item.action === "reject") {
-              item.rspamdaction = '<span class="label label-danger">' + lang.rejected + '</span>';
+              item.rspamdaction = '<span class="badge fs-5 bg-danger">' + lang.rejected + '</span>';
             } else if (item.action === "add header") {
-              item.rspamdaction = '<span class="label label-warning">' + lang.junk_folder + '</span>';
+              item.rspamdaction = '<span class="badge fs-5 bg-warning">' + lang.junk_folder + '</span>';
             } else if (item.action === "rewrite subject") {
-              item.rspamdaction = '<span class="label label-warning">' + lang.rewrite_subject + '</span>';
+              item.rspamdaction = '<span class="badge fs-5 bg-warning">' + lang.rewrite_subject + '</span>';
             }
             if(item.notified > 0) {
               item.notified = '&#10004;';
@@ -175,9 +175,9 @@ jQuery(function($){
             if (value.score > 0) highlightClass = 'negative'
             else if (value.score < 0) highlightClass = 'positive'
             else highlightClass = 'neutral'
-            $('#qid_detail_symbols').append('<span data-toggle="tooltip" class="rspamd-symbol ' + highlightClass + '" title="' + (value.options ? value.options.join(', ') : '') + '">' + value.name + ' (<span class="score">' + value.score + '</span>)</span>');
+            $('#qid_detail_symbols').append('<span data-bs-toggle="tooltip" class="rspamd-symbol ' + highlightClass + '" title="' + (value.options ? value.options.join(', ') : '') + '">' + value.name + ' (<span class="score">' + value.score + '</span>)</span>');
           });
-          $('[data-toggle="tooltip"]').tooltip()
+          $('[data-bs-toggle="tooltip"]').tooltip()
         }
         if (typeof data.fuzzy_hashes === 'object' && data.fuzzy_hashes !== null && data.fuzzy_hashes.length !== 0) {
           $.each(data.fuzzy_hashes, function (index, value) {
@@ -188,11 +188,11 @@ jQuery(function($){
         }
         if (typeof data.score !== 'undefined' && typeof data.action !== 'undefined') {
           if (data.action == "add header") {
-            $('#qid_detail_score').append('<span class="label-rspamd-action label label-warning"><b>' + data.score + '</b> - ' + lang.junk_folder + '</span>');
+            $('#qid_detail_score').append('<span class="label-rspamd-action badge fs-5 bg-warning"><b>' + data.score + '</b> - ' + lang.junk_folder + '</span>');
           } else if (data.action == "reject") {
-            $('#qid_detail_score').append('<span class="label-rspamd-action label label-danger"><b>' + data.score + '</b> - ' + lang.rejected + '</span>');
+            $('#qid_detail_score').append('<span class="label-rspamd-action badge fs-5 bg-danger"><b>' + data.score + '</b> - ' + lang.rejected + '</span>');
           } else if (data.action == "rewrite subject") {
-            $('#qid_detail_score').append('<span class="label-rspamd-action label label-warning"><b>' + data.score + '</b> - ' + lang.rewrite_subject + '</span>');
+            $('#qid_detail_score').append('<span class="label-rspamd-action badge fs-5 bg-warning"><b>' + data.score + '</b> - ' + lang.rewrite_subject + '</span>');
           }
         }
         if (typeof data.recipients !== 'undefined') {
diff --git a/data/web/js/site/user.js b/data/web/js/site/user.js
index 8fd7b47f..f601d61c 100644
--- a/data/web/js/site/user.js
+++ b/data/web/js/site/user.js
@@ -101,7 +101,7 @@ jQuery(function($){
             $.each(data.sasl, function (i, item) {
               var datetime = new Date(item.datetime.replace(/-/g, "/"));
               var local_datetime = datetime.toLocaleDateString(undefined, {year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit"});
-              var service = '<div class="label label-default">' + item.service.toUpperCase() + '</div>';
+              var service = '<div class="badge fs-5 bg-secondary">' + item.service.toUpperCase() + '</div>';
               var app_password = item.app_password ? ' <a href="/edit/app-passwd/' + item.app_password + '"><i class="bi bi-app-indicator"></i> ' + escapeHtml(item.app_password_name || "App") + '</a>' : '';
               var real_rip = item.real_rip.startsWith("Web") ? item.real_rip : '<a href="https://bgp.he.net/ip/' + item.real_rip + '" target="_blank">' + item.real_rip + "</a>";
               var ip_location = item.location ? ' <span class="flag-icon flag-icon-' + item.location.toLowerCase() + '"></span>' : '';
@@ -200,7 +200,7 @@ jQuery(function($){
         success: function (data) {
           $.each(data, function (i, item) {
             item.user1 = escapeHtml(item.user1);
-            item.log = '<a href="#syncjobLogModal" data-toggle="modal" data-syncjob-id="' + item.id + '">' + lang.open_logs + '</a>'
+            item.log = '<a href="#syncjobLogModal" data-bs-toggle="modal" data-syncjob-id="' + item.id + '">' + lang.open_logs + '</a>'
             if (!item.exclude > 0) {
               item.exclude = '-';
             } else {
@@ -209,7 +209,7 @@ jQuery(function($){
             item.server_w_port = escapeHtml(item.user1 + '@' + item.host1 + ':' + item.port1);
             if (acl_data.syncjobs === 1) {
               item.action = '<div class="btn-group footable-actions">' +
-                '<a href="/edit/syncjob/' + item.id + '" class="btn btn-xs btn-xs-half btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+                '<a href="/edit/syncjob/' + item.id + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
                 '<a href="#" data-action="delete_selected" data-id="single-syncjob" data-api-url="delete/syncjob" data-item="' + item.id + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
                 '</div>';
               item.chkbox = '<input type="checkbox" data-id="syncjob" name="multi_select" value="' + item.id + '" />';
@@ -219,9 +219,9 @@ jQuery(function($){
               item.chkbox = '<input type="checkbox" disabled />';
             }
             if (item.is_running == 1) {
-              item.is_running = '<span id="active-script" class="label label-success">' + lang.running + '</span>';
+              item.is_running = '<span id="active-script" class="badge fs-5 bg-success">' + lang.running + '</span>';
             } else {
-              item.is_running = '<span id="inactive-script" class="label label-warning">' + lang.waiting + '</span>';
+              item.is_running = '<span id="inactive-script" class="badge fs-5 bg-warning">' + lang.waiting + '</span>';
             }
             if (!item.last_run > 0) {
               item.last_run = lang.waiting;
@@ -284,7 +284,7 @@ jQuery(function($){
             item.protocols = item.protocols.join(" ")
             if (acl_data.app_passwds === 1) {
               item.action = '<div class="btn-group footable-actions">' +
-                '<a href="/edit/app-passwd/' + item.id + '" class="btn btn-xs btn-xs-half btn-default"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
+                '<a href="/edit/app-passwd/' + item.id + '" class="btn btn-xs btn-xs-half btn-secondary"><i class="bi bi-pencil-fill"></i> ' + lang.edit + '</a>' +
                 '<a href="#" data-action="delete_selected" data-id="single-apppasswd" data-api-url="delete/app-passwd" data-item="' + item.id + '" class="btn btn-xs btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
                 '</div>';
               item.chkbox = '<input type="checkbox" data-id="apppasswd" name="multi_select" value="' + item.id + '" />';