From 827ff0f58b6eae964a0d6b1e19daaff8b5b9350f Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Wed, 27 Oct 2021 16:26:28 +1100
Subject: [PATCH] Modal forms fixes

- Update bootstrap classes and terminology
- Visual tweaks to modal form title block
---
 InvenTree/InvenTree/static/css/inventree.css |  9 ++++++---
 InvenTree/templates/js/translated/forms.js   |  2 +-
 InvenTree/templates/js/translated/modals.js  | 10 ++++------
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css
index 6f8bd858b7..7f0d3ea9ae 100644
--- a/InvenTree/InvenTree/static/css/inventree.css
+++ b/InvenTree/InvenTree/static/css/inventree.css
@@ -676,7 +676,10 @@
 }
 
 .modal-header {
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid #ccc;
+    background-color: #dcdcdc;
+    color: #555;
+    padding: 10px;
 }
 
 .modal-footer {
@@ -798,8 +801,8 @@ input[type="submit"] {
     padding-bottom: 3px;
 }
 
-.modal .btn-secondary {
-    background-color: #5e7d87;
+.modal .btn-form-secondary {
+    margin-bottom: 10px;
 }
 
 .inventree-navs {
diff --git a/InvenTree/templates/js/translated/forms.js b/InvenTree/templates/js/translated/forms.js
index 037a729aa8..f9958ee127 100644
--- a/InvenTree/templates/js/translated/forms.js
+++ b/InvenTree/templates/js/translated/forms.js
@@ -1296,7 +1296,7 @@ function addSecondaryModal(field, fields, options) {
 
     var html = `
     <span style='float: right;'>
-        <div type='button' class='btn btn-primary btn-secondary' title='${secondary.title || secondary.label}' id='btn-new-${name}'>
+        <div type='button' class='btn btn-primary btn-secondary btn-form-secondary' title='${secondary.title || secondary.label}' id='btn-new-${name}'>
             ${secondary.label || secondary.title}
         </div>
     </span>`;
diff --git a/InvenTree/templates/js/translated/modals.js b/InvenTree/templates/js/translated/modals.js
index f281760cc2..0134f2efa8 100644
--- a/InvenTree/templates/js/translated/modals.js
+++ b/InvenTree/templates/js/translated/modals.js
@@ -47,14 +47,12 @@ function createNewModal(options={}) {
         <div class='modal-dialog'>
             <div class='modal-content'>
                 <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label='{% trans "Close" %}'>
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                    <h3 id='modal-title'>
+                    <h3 id='modal-title' class='modal-title'>
                         <!-- Form title to be injected here -->
                     </h3>
+                    <button type='button' class='btn-close' data-bs-dismiss='modal' aria-label='{% trans "Close" %}'></button>
                 </div>
-                <div class='modal-form-content-wrapper'>
+                <div class='modal-body modal-form-content-wrapper'>
                     <div id='non-field-errors'>
                         <!-- Form error messages go here -->
                     </div>
@@ -73,7 +71,7 @@ function createNewModal(options={}) {
                     <div id='modal-footer-buttons'>
                         <!-- Extra buttons can be inserted here -->
                     </div>
-                    <button type='button' class='btn btn-default' id='modal-form-close' data-dismiss='modal'>{% trans "Cancel" %}</button>
+                    <button type='button' class='btn btn-secondary' id='modal-form-close' data-bs-dismiss='modal'>{% trans "Cancel" %}</button>
                     <button type='button' class='btn btn-primary' id='modal-form-submit'>{% trans "Submit" %}</button>
                 </div>
             </div>