[BS5] change bootstrap panels/cards

data/web/templates/admin/tab-config-admins.twig

@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade show active" id="tab-config-admins" role="tabpanel" aria-labelledby="tab-config-admins">
-    <div class="panel panel-danger">
-      <div class="panel-heading xs-show">{{ lang.admin.admin_details }}</div>
-      <div class="panel-body">
+    <div class="card bg-danger text-white">
+      <div class="card-header">{{ lang.admin.admin_details }}</div>
+      <div class="card-body">
         <div class="table-responsive">
           <table class="table table-striped table-condensed" id="adminstable"></table>
         </div>
@@ -127,11 +127,11 @@
               <p class="help-block">{{ lang.admin.api_info|raw }}</p>
             </div>
             <div class="col-lg-6">
-              <div class="panel panel-default">
-                <div class="panel-heading">
-                  <h4 class="panel-title"><i class="bi bi-file-earmark-arrow-down"></i> {{ lang.admin.api_read_only }}</h4>
+              <div class="card">
+                <div class="card-header">
+                  <h4 class="card-title"><i class="bi bi-file-earmark-arrow-down"></i> {{ lang.admin.api_read_only }}</h4>
                 </div>
-                <div class="panel-body">
+                <div class="card-body">
                   <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
                     <div class="form-group">
                       <label class="control-label col-sm-3" for="allow_from_ro">{{ lang.admin.api_allow_from }}:</label>
@@ -172,11 +172,11 @@
               </div>
             </div>
             <div class="col-lg-6">
-              <div class="panel panel-default">
-                <div class="panel-heading">
-                  <h4 class="panel-title"><i class="bi bi-file-earmark-diff"></i> {{ lang.admin.api_read_write }}</h4>
+              <div class="card">
+                <div class="card-header">
+                  <h4 class="card-title"><i class="bi bi-file-earmark-diff"></i> {{ lang.admin.api_read_write }}</h4>
                 </div>
-                <div class="panel-body">
+                <div class="card-body">
                   <form class="form-horizontal" autocapitalize="none" autocorrect="off" role="form" method="post">
                     <div class="form-group">
                       <label class="control-label col-sm-3" for="allow_from_rw">{{ lang.admin.api_allow_from }}:</label>
@@ -221,9 +221,9 @@
       </div>
     </div>
 
-  <div class="panel panel-default">
-    <div class="panel-heading xs-show">{{ lang.admin.domain_admins }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.domain_admins }}</div>
+    <div class="card-body">
       <div class="table-responsive">
         <table class="table table-striped table-condensed" id="domainadminstable"></table>
       </div>

data/web/templates/admin/tab-config-customize.twig

@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-customize" role="tabpanel" aria-labelledby="tab-config-customize">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.customize }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.customize }}</div>
+    <div class="card-body">
       <legend><i class="bi bi-file-image"></i> {{ lang.admin.change_logo }}</legend>
       <p class="help-block">{{ lang.admin.logo_info }}</p>
       <form class="form-inline" role="form" method="post" enctype="multipart/form-data">

data/web/templates/admin/tab-config-dkim.twig

@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-dkim" role="tabpanel" aria-labelledby="tab-config-dkim">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.dkim_keys }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.dkim_keys }}</div>
+    <div class="card-body">
       <div class="btn-group" data-bs-toggle="button" style="margin-bottom: 20px;">
         <a class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default active" href="#" data-bs-toggle="collapse" data-bs-target=".dkim_key_valid">{{ lang.admin.dkim_key_valid }}</a>
         <a class="btn btn-sm btn-xs-third visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-default active" href="#" data-bs-toggle="collapse" data-bs-target=".dkim_key_unused">{{ lang.admin.dkim_key_unused }}</a>

data/web/templates/admin/tab-config-f2b.twig

@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-f2b" role="tabpanel" aria-labelledby="tab-config-f2b">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.f2b_parameters }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.f2b_parameters }}</div>
+    <div class="card-body">
       <form class="form" data-id="f2b" role="form" method="post">
         <div class="form-group">
           <label for="f2b_ban_time">{{ lang.admin.f2b_ban_time }}:</label>

data/web/templates/admin/tab-config-fwdhosts.twig

@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-fwdhosts" role="tabpanel" aria-labelledby="tab-config-fwdhosts">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.forwarding_hosts }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.forwarding_hosts }}</div>
+    <div class="card-body">
       <p style="margin-bottom:40px">{{ lang.admin.forwarding_hosts_hint }}</p>
       <div class="table-responsive">
         <table class="table table-striped table-condensed" id="forwardinghoststable"></table>

data/web/templates/admin/tab-config-oauth2.twig

@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-oauth2" role="tabpanel" aria-labelledby="tab-config-oauth2">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.oauth2_apps }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.oauth2_apps }}</div>
+    <div class="card-body">
       <p>{{ lang.admin.oauth2_info|raw }}</p>
       <div class="table-responsive">
         <table class="table table-striped" id="oauth2clientstable"></table>

data/web/templates/admin/tab-config-password-policy.twig

@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-password-policy" role="tabpanel" aria-labelledby="tab-config-password-policy">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.password_policy }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.password_policy }}</div>
+    <div class="card-body">
       <form class="form-horizontal" data-id="passwordpolicy" role="form" method="post">
         {% for name, value in password_complexity %}
           {% if name == 'length' %}

data/web/templates/admin/tab-config-quarantine.twig

@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-quarantine" role="tabpanel" aria-labelledby="tab-config-quarantine">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.quarantine }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.quarantine }}</div>
+    <div class="card-body">
       {% if not q_data.retention_size or not q_data.max_size %}
       <div class="alert alert-info">{{ lang.quarantine.disabled_by_config }}</div>
       {% endif %}

data/web/templates/admin/tab-config-quota.twig

@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-quota" role="tabpanel" aria-labelledby="tab-config-quota">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.quota_notifications }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.quota_notifications }}</div>
+    <div class="card-body">
       <p>{{ lang.admin.quota_notifications_info }}</p>
       <form class="form" role="form" data-id="quota_notification" method="post">
         <div class="row">

data/web/templates/admin/tab-config-rsettings.twig

@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-rsettings" role="tabpanel" aria-labelledby="tab-config-rsettings">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.rspamd_settings_map }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.rspamd_settings_map }}</div>
+    <div class="card-body">
       <legend data-bs-target="#active_settings_map" style="cursor:pointer" unselectable="on" data-bs-toggle="collapse">
         <i style="font-size:10pt;" class="bi bi-plus-square"></i> {{ lang.admin.active_rspamd_settings_map }}
       </legend>

data/web/templates/admin/tab-config-rspamd.twig

@@ -1,9 +1,9 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-rspamd" role="tabpanel" aria-labelledby="tab-config-rspamd">
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      <h3 class="panel-title">Rspamd UI</h3>
+  <div class="card">
+    <div class="card-header">
+      <h3 class="card-title">Rspamd UI</h3>
     </div>
-    <div class="panel-body">
+    <div class="card-body">
       <div class="row">
         <div class="col-xs-12 visible-xs">
           <img class="img-responsive" src="/img/rspamd_logo.png" alt="Rspamd UI">

data/web/templates/admin/tab-globalfilter-regex.twig

@@ -1,9 +1,9 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-globalfilter-regex" role="tabpanel" aria-labelledby="tab-globalfilter-regex">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ lang.admin.rspamd_global_filters }}
     </div>
-    <div class="panel-body">
+    <div class="card-body">
       <p>{{ lang.admin.rspamd_global_filters_info }}</p>
       <div id="confirm_show_rspamd_global_filters"{% if show_rspamd_global_filters %} class="hidden"{% endif %}>
         <div class="form-group">

data/web/templates/admin/tab-ldap.twig

@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-config-ldap-admins" role="tabpanel" aria-labelledby="tab-config-ldap-admins">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.admins_ldap }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.admins_ldap }}</div>
+    <div class="card-body">
     </div>
   </div>
 </div>

data/web/templates/admin/tab-mailq.twig

@@ -1,12 +1,12 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-mailq" role="tabpanel" aria-labelledby="tab-mailq">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ lang.admin.queue_manager }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right">
         <button class="btn btn-xs btn-default refresh_table" data-draw="draw_queue" data-table="queuetable">{{ lang.admin.refresh }}</button>
       </div>
     </div>
-    <div class="panel-body">
+    <div class="card-body">
       <div class="table-responsive">
         <table class="table table-striped table-condensed" id="queuetable"></table>
       </div>

data/web/templates/admin/tab-routing.twig

@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-routing" role="tabpanel" aria-labelledby="tab-routing">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.relayhosts }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.relayhosts }}</div>
+    <div class="card-body">
       <p style="margin-bottom:40px">{{ lang.admin.relayhosts_hint|raw }}</p>
       <div class="table-responsive">
         <table class="table table-striped table-condensed" id="relayhoststable"></table>
@@ -43,9 +43,9 @@
     </div>
   </div>
 
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.transport_maps }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.transport_maps }}</div>
+    <div class="card-body">
       <p style="margin-bottom:40px">{{ lang.admin.transports_hint|raw }}</p>
       <div class="table-responsive">
         <table class="table table-striped table-condensed" id="transportstable"></table>

data/web/templates/admin/tab-sys-mails.twig

@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-sys-mails" role="tabpanel" aria-labelledby="tab-sys-mails">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.admin.sys_mails }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.admin.sys_mails }}</div>
+    <div class="card-body">
       <form class="form-horizontal" autocapitalize="none" data-id="admin" autocorrect="off" role="form" method="post">
         <div class="form-group">
           <label class="control-label col-sm-2" for="admin_mass_from">{{ lang.admin.from }}:</label>

data/web/templates/domainadmin.twig

@@ -2,9 +2,9 @@
 
 {% block content %}
 <h3>{{ lang.user.user_settings }}</h3>
-<div class="panel panel-default">
-  <div class="panel-heading">{{ lang.user.user_settings }}</div>
-  <div class="panel-body">
+<div class="card">
+  <div class="card-header">{{ lang.user.user_settings }}</div>
+  <div class="card-body">
     <div class="row">
       <div class="col-sm-offset-3 col-sm-9">
         <p><a href="#pwChangeModal" data-bs-toggle="modal">[{{ lang.user.change_password }}]</a></p>

data/web/templates/edit.twig

@@ -3,11 +3,11 @@
 {% block content %}
 <div class="row">
   <div class="col-md-12">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <h3 class="panel-title">{{ lang.edit.title }}</h3>
+    <div class="card">
+      <div class="card-header">
+        <h3 class="card-title">{{ lang.edit.title }}</h3>
       </div>
-      <div class="panel-body">
+      <div class="card-body">
         {% block inner_content %}
           {% if access_denied %}
           <div class="alert alert-danger" role="alert">{{ lang.danger.access_denied }}</div>

data/web/templates/index.twig

@@ -5,9 +5,9 @@
 {% block content %}
 <div class="row">
   <div class="col-md-offset-3 col-md-6">
-    <div class="panel panel-default panel-login">
-      <div class="panel-heading"><i class="bi bi-person-fill"></i> {{ lang.login.login }}</div>
-      <div class="panel-body">
+    <div class="card card-default card-login">
+      <div class="card-header"><i class="bi bi-person-fill"></i> {{ lang.login.login }}</div>
+      <div class="card-body">
         <div class="text-center mailcow-logo"><img src="{{ logo|default('/img/cow_mailcow.svg') }}" alt="mailcow"></div>
         {% if ui_texts.ui_announcement_text and ui_texts.ui_announcement_active %}
         <div class="alert alert-{{ ui_texts.ui_announcement_type }} rot-enc ui-announcement-alert">{{ ui_texts.ui_announcement_text|rot13 }}</div>
@@ -86,12 +86,12 @@
   </div>
   {% if not oauth2_request %}
   <div class="col-md-offset-3 col-md-6">
-    <div class="panel panel-default">
-      <div class="panel-heading">
+    <div class="card card-default">
+      <div class="card-header">
         <a data-bs-toggle="collapse" href="#collapse1"><i class="bi bi-patch-question-fill"></i> {{ lang.start.help }}</a>
       </div>
-      <div id="collapse1" class="panel-collapse collapse">
-        <div class="panel-body">
+      <div id="collapse1" class="card-collapse collapse">
+        <div class="card-body">
           {% if ui_texts.help_text %}
           <p>{{ ui_texts.help_text|raw }}</p>
           {% else %}

data/web/templates/mailbox/tab-bcc.twig

@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-bcc" role="tabpanel" aria-labelledby="tab-bcc">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ lang.mailbox.bcc_maps }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.bcc_maps }}" data-bs-toggle="modal" data-bs-target="#addBCCModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_bcc_entry }}</button>
@@ -36,8 +36,8 @@
       </div>
     </div>
   </div>
-  <div class="panel panel-default{% if mailcow_cc_role != 'admin' %} hidden{% endif %}">
-    <div class="panel-heading">
+  <div class="card{% if mailcow_cc_role != 'admin' %} hidden{% endif %}">
+    <div class="card-header">
       {{ lang.mailbox.recipient_maps }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addRecipientMapModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_recipient_map_entry }}</button>

data/web/templates/mailbox/tab-domain-aliases.twig

@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-domain-aliases" role="tabpanel" aria-labelledby="tab-domain-aliases">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ lang.mailbox.domain_aliases }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.alias_domains }}" data-bs-toggle="modal" data-bs-target="#addAliasDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain_alias }}</button>

data/web/templates/mailbox/tab-domains.twig

@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade show active" id="tab-domains" role="tabpanel" aria-labelledby="tab-domains">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ lang.mailbox.domains }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         {% if mailcow_cc_role == 'admin' %}

data/web/templates/mailbox/tab-filters.twig

@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-filters" role="tabpanel" aria-labelledby="tab-filters">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ lang.mailbox.filters }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.filters }}" data-bs-toggle="modal" data-bs-target="#addFilterModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_filter }}</button>
@@ -11,7 +11,7 @@
         </ul>
       </div>
     </div>
-    <div class="panel-body">
+    <div class="card-body">
       <p class="help-block">{{ lang.mailbox.sieve_info|raw }}</p><br>
     </div>
 {#    <div class="mass-actions-mailbox" data-actions-header="true"></div>#}
@@ -35,7 +35,7 @@
         <a class="btn btn-sm visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addFilterModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_filter }}</a>
       </div>
     </div>
-    <div class="panel-body{% if mailcow_cc_role != 'admin' %} hidden{% endif %}">
+    <div class="card-body{% if mailcow_cc_role != 'admin' %} hidden{% endif %}">
     <div class="row">
       <div class="col-lg-6">
         <h5>Global Prefilter</h5>

data/web/templates/mailbox/tab-mailbox-defaults.twig

@@ -1,9 +1,9 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-mailbox-defaults" role="tabpanel" aria-labelledby="tab-mailbox-defaults">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ lang.mailbox.mailbox_defaults }}
     </div>
-    <div class="panel-body help-block">
+    <div class="card-body help-block">
       {{ lang.mailbox.mailbox_defaults_info }}
     </div>
   </div>

data/web/templates/mailbox/tab-mailboxes.twig

@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-mailboxes" role="tabpanel" aria-labelledby="tab-mailboxes">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ lang.mailbox.mailboxes }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_mailbox }}</button>

data/web/templates/mailbox/tab-mbox-aliases.twig

@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-mbox-aliases" role="tabpanel" aria-labelledby="tab-mbox-aliases">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ lang.mailbox.aliases }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addAliasModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_alias }}</button>
@@ -11,7 +11,7 @@
         </ul>
       </div>
     </div>
-    <div class="panel-body help-block">
+    <div class="card-body help-block">
       {{ lang.mailbox.alias_domain_alias_hint|raw }}
     </div>
     <!-- <div class="mass-actions-mailbox" data-actions-header="true"></div> -->

data/web/templates/mailbox/tab-resources.twig

@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-resources" role="tabpanel" aria-labelledby="tab-resources">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ lang.mailbox.resources }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addResourceModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_resource }}</button>
@@ -11,7 +11,7 @@
         </ul>
       </div>
     </div>
-    <div class="panel-body help-block">
+    <div class="card-body help-block">
       <p><span class="label label-success">{{ lang.mailbox.booking_0_short }}</span> - {{ lang.mailbox.booking_null }}</p>
       <p><span class="label label-warning">{{ lang.mailbox.booking_lt0_short }}</span> - {{ lang.mailbox.booking_ltnull }}</p>
       <p><span class="label label-danger">{{ lang.mailbox.booking_custom_short }}</span> - {{ lang.mailbox.booking_custom }}</p>

data/web/templates/mailbox/tab-syncjobs.twig

@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-syncjobs"  role="tabpanel" aria-labelledby="tab-syncjobs">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ lang.mailbox.sync_jobs }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         <button data-acl="{{ acl.syncjobs }}" class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addSyncJobModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.user.create_syncjob }}</button>

data/web/templates/mailbox/tab-tls-policy.twig

@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade{% if mailcow_cc_role != 'admin' %} d-none{% endif %}" id="tab-tls-policy" role="tabpanel" aria-labelledby="tab-tls-policy">
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ lang.mailbox.tls_policy_maps_long }} <span class="badge badge-info table-lines"></span>
       <div class="btn-group pull-right hidden-xs">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addTLSPolicyMapAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_tls_policy_map }}</button>

data/web/templates/oauth/authorize.twig

@@ -1,9 +1,9 @@
 {% extends 'base.twig' %}
 
 {% block content %}
-<div class="panel panel-default">
-  <div class="panel-heading">{{ lang.oauth2.authorize_app }}</div>
-  <div class="panel-body">
+<div class="card">
+  <div class="card-header">{{ lang.oauth2.authorize_app }}</div>
+  <div class="card-body">
     {% if mailcow_cc_role == 'user' %}
     <p>{{ lang.oauth2.scope_ask_permission }}:</p>
     <dl class="dl-horizontal">

data/web/templates/qhandler.twig

@@ -4,9 +4,9 @@
 <div class="row">
 {% if quick_release or quick_delete %}
   <div class="col-md-offset-2 col-md-8">
-    <div class="panel panel-default">
-      <div class="panel-heading"><i class="bi bi-patch-exclamation-fill"></i> {{ lang.header.quarantine }}</div>
-      <div class="panel-body">
+    <div class="card">
+      <div class="card-header"><i class="bi bi-patch-exclamation-fill"></i> {{ lang.header.quarantine }}</div>
+      <div class="card-body">
         <legend>
           {% if quick_release %}
             {{ lang.quarantine.release }}
@@ -21,9 +21,9 @@
 {% else %}
 {% if is_action_release_delete and is_hash_present %}
   <div class="col-md-offset-2 col-md-8">
-    <div class="panel panel-default">
-      <div class="panel-heading"><i class="bi bi-patch-exclamation-fill"></i> {{ lang.header.quarantine }}</div>
-      <div class="panel-body">
+    <div class="card">
+      <div class="card-header"><i class="bi bi-patch-exclamation-fill"></i> {{ lang.header.quarantine }}</div>
+      <div class="card-body">
         {% if action == 'release' %}
         <legend id="qtitle" data-hash="{{ hash }}">{{ lang.quarantine.release }}</legend>
         {% endif %}

data/web/templates/quarantine.twig

@@ -3,8 +3,8 @@
 {% block content %}
 <div class="row">
   <div class="col-md-12">
-    <div class="panel panel-default panel-xs-lg">
-      <div class="panel-heading">
+    <div class="card card-xs-lg">
+      <div class="card-header">
         {{ lang.quarantine.quarantine }} <span class="badge badge-info table-lines"></span>
         <div class="btn-group pull-right">
           <button class="btn btn-xs btn-xs-lg btn-default refresh_table" data-draw="draw_quarantine_table" data-table="quarantinetable">{{ lang.quarantine.refresh }}</button>
@@ -22,7 +22,7 @@
       <p style="margin:10px" class="help-block">{{ lang.quarantine.qinfo|raw }}</p>
       <p style="margin:10px">
         {% if not quarantine_settings.retention_size or not quarantine_settings.max_size %}
-        <div class="panel-body"><div class="alert alert-info">{{ lang.quarantine.disabled_by_config }}</div></div>
+        <div class="card-body"><div class="alert alert-info">{{ lang.quarantine.disabled_by_config }}</div></div>
         {% else %}
         <p style="margin:10px" class="help-block">
           {{ lang.quarantine.settings_info|format(quarantine_settings.retention_size, quarantine_settings.max_size)|raw }}

data/web/templates/user/AppPasswds.twig

@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="AppPasswds">
+<div role="tabpanel" class="tab-pane fade" id="AppPasswds" role="tabpanel" aria-labelledby="AppPasswds">
   <p>{{ lang.user.app_hint|raw }}</p>
   <div class="table-responsive">
     <table class="table table-striped" id="app_passwd_table"></table>

data/web/templates/user/Pushover.twig

@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="Pushover">
+<div role="tabpanel" class="tab-pane fade" id="Pushover" role="tabpanel" aria-labelledby="Pushover">
   <form data-id="pushover" class="form well" method="post">
     <input type="hidden" value="0" name="evaluate_x_prio">
     <input type="hidden" value="0" name="only_x_prio">

data/web/templates/user/SpamAliases.twig

@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="SpamAliases">
+<div role="tabpanel" class="tab-pane fade" id="SpamAliases" role="tabpanel" aria-labelledby="SpamAliases">
   <div class="row">
     <div class="col-md-12 col-sm-12 col-xs-12">
       <div class="table-responsive">

data/web/templates/user/Spamfilter.twig

@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="Spamfilter">
+<div role="tabpanel" class="tab-pane fade" id="Spamfilter" role="tabpanel" aria-labelledby="Spamfilter">
   <h4>{{ lang.user.spamfilter_behavior }}</h4>
   <div class="row">
     <div class="col-sm-12">

data/web/templates/user/Syncjobs.twig

@@ -1,4 +1,4 @@
-<div role="tabpanel" class="tab-pane" id="Syncjobs">
+<div role="tabpanel" class="tab-pane fade" id="Syncjobs" role="tabpanel" aria-labelledby="Syncjobs">
   <div class="table-responsive">
     <table class="table table-striped" id="sync_job_table"></table>
   </div>

data/web/templates/user/tab-user-auth.twig

@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade show active" id="tab-user-auth" role="tabpanel" aria-labelledby="tab-user-auth">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.user.mailbox_general }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.user.mailbox_general }}</div>
+    <div class="card-body">
       {% if not skip_sogo %}
       <div class="row">
         <div class="hidden-xs col-md-3 col-xs-5 text-right"></div>

data/web/templates/user/tab-user-details.twig

@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-user-details" role="tabpanel" aria-labelledby="tab-user-details">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.user.mailbox_details }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.user.mailbox_details }}</div>
+    <div class="card-body">
       <div class="row">
         <div class="col-sm-4 col-md-3 col-xs-12 text-right text-xs-left"><i class="bi bi-pin-angle"></i> {{ lang.user.direct_aliases }}:
           <p class="small">{{ lang.user.direct_aliases_desc }}</p>

data/web/templates/user/tab-user-settings.twig

@@ -1,7 +1,7 @@
 <div role="tabpanel" class="tab-pane fade" id="tab-user-settings" role="tabpanel" aria-labelledby="tab-user-settings">
-  <div class="panel panel-default">
-    <div class="panel-heading">{{ lang.user.mailbox_settings }}</div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header">{{ lang.user.mailbox_settings }}</div>
+    <div class="card-body">
       {# Show tagging options #}
       <div class="row">
         <div class="col-sm-3 col-xs-12 text-right text-xs-left text-xs-bold space20">{{ lang.user.tag_handling }}:</div>