[IMP][CSS] Revamp modal to use all BS classes and variables

extensions/odoo_theme/static/js/layout.js

@@ -6,18 +6,19 @@
         let imageModalId = 0;
         content.querySelectorAll('img').forEach(image => {
             // Enforce the presence of the `img-fluid` class on all images.
-            image.classList.add('img-fluid');
+            image.classList.add('img-fluid', 'img-thumbnail');
 
             // Add a modal to each image that does not explicitly block it and has no target.
             if (!image.classList.contains('o-no-modal') && image.parentElement.tagName !== 'A') {
                 const modalContainer = document.createElement('div');
-                modalContainer.classList.add('o_image_modal');
                 modalContainer.innerHTML = `<div class="modal fade" id="modal-${imageModalId}">
                        <div class="modal-dialog modal-dialog-centered">
                          <div class="modal-content">
+                           <div class="modal-header">
+                           <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+                           </div>
                            <div class="modal-body">
-                             <img src="${image.src}" alt="${image.alt}" class="o-no-modal img-fluid"/>
+                             <img src="${image.src}" alt="${image.alt}" class="o-no-modal img-fluid img-thumbnail"/>
-                             <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                          </div>
                        </div>

extensions/odoo_theme/static/scss/bootstrap_overridden.scss

@@ -46,6 +46,10 @@ $h4-font-size:                              $font-size-base * 1.266 !default;
 $h5-font-size:                              $font-size-base * 1.125 !default;
 $h6-font-size:                              $font-size-base !default;
 
+// Images
+
+$thumbnail-padding:                         .5rem;
+
 // Buttons
 // For each of Bootstrap's buttons, define text, background, and border color.
 
@@ -61,6 +65,17 @@ $dropdown-min-width:                        4.5rem;
 // Modals
 $modal-backdrop-opacity:                    .7;
 
+$modal-content-bg:                          transparent;
+$modal-content-border-color:                transparent;
+$modal-content-border-width:                0;
+
+$modal-header-padding:                      0;
+
+$modal-sm:                                  fit-content;
+$modal-md:                                  fit-content;
+$modal-lg:                                  fit-content;
+$modal-xl:                                  fit-content;
+
 // Accordion
 $accordion-body-padding-y:                  0 !default;
 $accordion-body-padding-x:                  0 !default;

extensions/odoo_theme/static/style.scss

@@ -752,9 +752,6 @@ header {
                 }
 
                 img {
-                    border: 1px solid $o-gray-border;
-                    background: $white;
-                    padding: .5rem;
                     margin-bottom: 1rem;
                 }
 
@@ -1160,25 +1157,6 @@ header {
     }
 }
 
-//------------------------------------------------------------------------------
-// Image modals
-//------------------------------------------------------------------------------
-
-.o_image_modal {
-    .modal-dialog {
-        max-width: fit-content;
-    }
-    .modal-content {
-        background-color: transparent;
-        border: none;
-    }
-    .modal-body {
-        padding: 2.2rem;
-    }
-    .btn-close {
-        @include o-position-absolute($top: 0);
-    }
-}
 //------------------------------------------------------------------------------
 // Footer
 //------------------------------------------------------------------------------