From 3b8e17c21ff9080f097b1c331bb572e803d7a645 Mon Sep 17 00:00:00 2001
From: FreddleSpl0it <patschul@posteo.de>
Date: Mon, 26 Sep 2022 11:23:04 +0200
Subject: [PATCH] fix layout issues

---
 data/web/css/build/013-mailcow.css          | 29 +++++++++++
 data/web/css/themes/mailcow-darkmode.css    | 47 ++++++++++--------
 data/web/js/build/014-mailcow.js            |  2 +-
 data/web/js/site/mailbox.js                 | 55 +--------------------
 data/web/templates/admin/tab-sys-mails.twig |  4 +-
 data/web/templates/base.twig                |  2 +-
 data/web/templates/index.twig               | 10 ++--
 7 files changed, 66 insertions(+), 83 deletions(-)

diff --git a/data/web/css/build/013-mailcow.css b/data/web/css/build/013-mailcow.css
index 685eb80d..9be8b024 100644
--- a/data/web/css/build/013-mailcow.css
+++ b/data/web/css/build/013-mailcow.css
@@ -394,3 +394,32 @@ button[aria-expanded='true'] > .caret {
 .list-group-header {
   background: #f7f7f7;
 } 
+
+
+.bg-primary, .alert-primary, .btn-primary {
+  background-color: #0F688D !important;
+  border-color: #0d526d !important;
+}
+.bg-info, .alert-info, .btn-info {
+  background-color: #148DBC !important;
+  border-color: #127ea8 !important;
+}
+
+.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary {
+  color: rgb(137 137 137)!important;
+}
+
+.progress {
+  background-color: #d5d5d5;
+}
+
+
+.btn-outline-secondary:hover {
+    background-color: #f0f0f0;
+}
+.btn.btn-outline-secondary {
+  border-color: #cfcfcf !important;  
+}
+.btn-check:checked+.btn-outline-secondary, .btn-check:active+.btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
+    background-color: #f0f0f0 !important;
+}
diff --git a/data/web/css/themes/mailcow-darkmode.css b/data/web/css/themes/mailcow-darkmode.css
index 7a84ddaa..03f99307 100644
--- a/data/web/css/themes/mailcow-darkmode.css
+++ b/data/web/css/themes/mailcow-darkmode.css
@@ -84,9 +84,13 @@ legend {
 .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
     color: #fafafa;
 }
+
 .bootstrap-select>.dropdown-toggle.bs-placeholder, .bootstrap-select>.dropdown-toggle.bs-placeholder:active, .bootstrap-select>.dropdown-toggle.bs-placeholder:focus, .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
     color: #fff;
 }
+.bootstrap-select>.dropdown-toggle.bs-placeholder, .bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary {
+    color: #d4d4d4 !important;
+}
 tbody tr {
     color: #555;
 }
@@ -150,12 +154,6 @@ input.form-control:disabled, textarea.form-disabled {
     background-color: #242424;
 }
 
-.tag-add {
-    color: #ccc;
-}
-.tag-add:hover {
-    color: #d1d1d1;
-}
 
 
 .list-group-item {
@@ -198,6 +196,17 @@ input.form-control:disabled, textarea.form-disabled {
     border-color: #d8d8d8;
 }
 
+.table-light {
+    --bs-table-bg: #f6f6f6;
+    --bs-table-striped-bg: #eaeaea;
+    --bs-table-striped-color: #000;
+    --bs-table-active-bg: #dddddd;
+    --bs-table-active-color: #000;
+    --bs-table-hover-bg: #e4e4e4;
+    --bs-table-hover-color: #000;
+    color: #000;
+    border-color: #dddddd;
+}
 
 .form-control-plaintext {
     color: #e0e0e0;
@@ -239,17 +248,6 @@ a:hover {
 }
 
 
-.table-light {
-    --bs-table-bg: #f6f6f6;
-    --bs-table-striped-bg: #eaeaea;
-    --bs-table-striped-color: #000;
-    --bs-table-active-bg: #dddddd;
-    --bs-table-active-color: #000;
-    --bs-table-hover-bg: #e4e4e4;
-    --bs-table-hover-color: #000;
-    color: #000;
-    border-color: #dddddd;
-}
 
 
 .accordion-item {
@@ -290,7 +288,12 @@ a:hover {
     color: #fff;
     background-color: #555;
 }
-
+.tag-add {
+    color: #ccc;
+}
+.tag-add:hover {
+    color: #d1d1d1;
+}
 
 
 table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before:hover, 
@@ -316,12 +319,15 @@ table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty {
 .btn-check-label {
   color: #fff;
 }
+.btn-outline-secondary:hover {
+    background-color: #c3c3c3;
+}
 .btn.btn-outline-secondary {
   color: #fff !important;
   border-color: #7a7a7a !important;  
 }
 .btn-check:checked+.btn-outline-secondary, .btn-check:active+.btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
-    background-color: #7a7a7a !important;
+    background-color: #9b9b9b !important;
 }
 
 
@@ -347,4 +353,5 @@ table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty {
 }
 .list-group-header {
     background: #333;
-}
\ No newline at end of file
+}
+
diff --git a/data/web/js/build/014-mailcow.js b/data/web/js/build/014-mailcow.js
index 27bc54ce..a2e25547 100644
--- a/data/web/js/build/014-mailcow.js
+++ b/data/web/js/build/014-mailcow.js
@@ -247,7 +247,7 @@ $(document).ready(function() {
     $('#containerName').text(container);
     $('#triggerRestartContainer').click(function(){
       $(this).prop("disabled",true);
-      $(this).html('<div class="spinner-border text-secondary" role="status"><span class="visually-hidden">Loading...</span></div>');
+      $(this).html('<div class="spinner-border text-white" role="status"><span class="visually-hidden">Loading...</span></div>');
       $('#statusTriggerRestartContainer').html(lang_footer.restarting_container);
       $.ajax({
         method: 'get',
diff --git a/data/web/js/site/mailbox.js b/data/web/js/site/mailbox.js
index ee2b4a16..8f541ffa 100644
--- a/data/web/js/site/mailbox.js
+++ b/data/web/js/site/mailbox.js
@@ -1,58 +1,5 @@
 $(document).ready(function() {
   acl_data = JSON.parse(acl);
-  // FooTable.domainFilter = FooTable.Filtering.extend({
-  //   construct: function(instance){
-  //     this._super(instance);
-  //     this.def = lang.all_domains;
-  //     this.$domain = null;
-  //   },
-  //   $create: function(){
-  //     this._super();
-  //     var self = this;
-  //     var domains = [];
-
-  //     $.each(self.ft.rows.all, function(i, row){
-  //       if((row.val().domain != null) && ($.inArray(row.val().domain, domains) === -1)) domains.push(row.val().domain);
-  //     });
-
-  //     $form_grp = $('<div/>', {'class': 'form-group'})
-  //       .append($('<label/>', {'class': 'sr-only', text: 'Domain'}))
-  //       .prependTo(self.$form);
-  //     self.$domain = $('<select/>', { 'class': 'aform-control' })
-  //       .on('change', {self: self}, self._onDomainDropdownChanged)
-  //       .append($('<option/>', {text: self.def}))
-  //       .appendTo($form_grp);
-
-  //     $.each(domains, function(i, domain){
-  //       domainname = $($.parseHTML(domain)).data('domainname')
-  //       if (domainname !== undefined) {
-  //         self.$domain.append($('<option/>').text(domainname));
-  //       } else {
-  //         self.$domain.append($('<option/>').text(domain));
-  //       }
-  //     });
-  //   },
-  //   _onDomainDropdownChanged: function(e){
-  //     var self = e.data.self,
-  //       selected = $(this).val();
-  //     if (selected !== self.def){
-  //       self.addFilter('domain', selected, ['domain']);
-  //     } else {
-  //       self.removeFilter('domain');
-  //     }
-  //     self.filter();
-  //   },
-  //   draw: function(){
-  //     this._super();
-  //     var domain = this.find('domain');
-  //     if (domain instanceof FooTable.Filter){
-  //       this.$domain.val(domain.query.val());
-  //     } else {
-  //       this.$domain.val(this.def);
-  //     }
-  //     $(this.$domain).closest("select").selectpicker();
-  //   }
-  // });
   // Set paging
   // Clone mailbox mass actions
   $("div").find("[data-actions-header='true'").each(function() {
@@ -118,7 +65,7 @@ $(document).ready(function() {
   // Log modal
   $('#dnsInfoModal').on('show.bs.modal', function(e) {
     var domain = $(e.relatedTarget).data('domain');
-    $('.dns-modal-body').html('<div class="spinner-border text-secondary" role="status"><span class="visually-hidden">Loading...</span></div>');
+    $('.dns-modal-body').html('<div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div>');
     $.ajax({
       url: '/inc/ajax/dns_diagnostics.php',
       data: { domain: domain },
diff --git a/data/web/templates/admin/tab-sys-mails.twig b/data/web/templates/admin/tab-sys-mails.twig
index be93d91d..dc602134 100644
--- a/data/web/templates/admin/tab-sys-mails.twig
+++ b/data/web/templates/admin/tab-sys-mails.twig
@@ -28,7 +28,7 @@
             <p class="text-muted">{{ lang.admin.include_exclude_info|raw }}</p>
           </label>
           <div class="col-sm-5">
-            <label class="control-label" for="mass_exclude">{{ lang.admin.excludes }}:</label>
+            <label class="d-block" for="mass_exclude">{{ lang.admin.excludes }}:</label>
             <select id="mass_exclude" name="mass_exclude[]" data-live-search="true" data-width="100%"  size="30" multiple>
               {% for mailbox in mailboxes %}
                 <option>{{ mailbox }}</option>
@@ -36,7 +36,7 @@
             </select>
           </div>
           <div class="col-sm-5">
-            <label class="control-label" for="mass_include">{{ lang.admin.includes }}:</label>
+            <label class="d-block" for="mass_include">{{ lang.admin.includes }}:</label>
             <select id="mass_include" name="mass_include[]" data-live-search="true" data-width="100%"  size="30" multiple>
               {% for mailbox in mailboxes %}
                 <option>{{ mailbox }}</option>
diff --git a/data/web/templates/base.twig b/data/web/templates/base.twig
index 70de0234..cef125f4 100644
--- a/data/web/templates/base.twig
+++ b/data/web/templates/base.twig
@@ -117,7 +117,7 @@
 <form action="/" method="post" id="logout"><input type="hidden" name="logout"></form>
 
 {% if ui_texts.ui_announcement_text and ui_texts.ui_announcement_active and not is_root_uri %}
-<div class="container">
+<div class="container mt-4">
   <div class="alert alert-{{ ui_texts.ui_announcement_type }}">{{ ui_texts.ui_announcement_text }}</div>
 </div>
 {% endif %}
diff --git a/data/web/templates/index.twig b/data/web/templates/index.twig
index 827aba86..656b2e71 100644
--- a/data/web/templates/index.twig
+++ b/data/web/templates/index.twig
@@ -69,18 +69,18 @@
         <div class="my-4" id="fido2-alerts"></div>
         {% if not oauth2_request and (mailcow_apps or app_links) %}
         <legend><i class="bi bi-link-45deg"></i> {{ ui_texts.apps_name|raw }}</legend><hr />
-        <div class="my-4 apps">
+        <div class="my-2 d-flex flex-wrap apps">
           {% for app in mailcow_apps %}
             {% if not skip_sogo or not is_uri('SOGo', app.link) %}
-            <div>
-              <a href="{{ app.link }}" role="button" {% if app.description %}title="{{ app.description }}"{% endif %} class="btn btn-primary btn-lg btn-block">{{ app.name }}</a>
+            <div class="m-2">
+              <a href="{{ app.link }}" role="button" {% if app.description %}title="{{ app.description }}"{% endif %} class="btn btn-primary btn-block">{{ app.name }}</a>
             </div>
           {% endif %}
           {% endfor %}
           {% for row in app_links %}
             {% for key, val in row %}
-              <div>
-                <a href="{{ val }}" role="button" class="btn btn-primary btn-lg btn-block">{{ key }}</a>
+              <div class="m-2">
+                <a href="{{ val }}" role="button" class="btn btn-primary btn-block">{{ key }}</a>
               </div>
             {% endfor %}
           {% endfor %}