From 010afb99721edb827682ead79a86292ed03d8d97 Mon Sep 17 00:00:00 2001
From: PioBar <72926984+Pio-Bar@users.noreply.github.com>
Date: Tue, 7 Jan 2025 13:43:02 +0100
Subject: [PATCH] test and fix dialogs affected by the removal of extended
 bootstrap clases (#19803)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: kpawelczak <42094017+kpawelczak@users.noreply.github.com>
Co-authored-by: Roman <129765378+rmch91@users.noreply.github.com>
---
 .../styles/components/_clear-cart-dialog.scss |  7 -----
 .../styles/_import-entries-dialog.scss        |  7 -----
 .../styles/_saved-cart-form-dialog.scss       |  7 -----
 .../_customer-ticketing-dialog.scss           |  6 ----
 .../tracking-events.component.html            |  4 +--
 ...t-order-cancellation-dialog.component.html |  8 ++---
 .../order-history/_consignment-tracking.scss  |  6 ----
 .../_replenishment-order-cancellation.scss    | 30 ++++---------------
 .../styles/_pickup-option-dialog.scss         |  3 --
 .../styles/_product-image-zoom-dialog.scss    |  7 -----
 .../suggested-addresses-dialog.component.html |  4 +--
 .../close-account-modal.component.html        |  2 +-
 .../profile/styles/_close-account-modal.scss  |  9 ------
 .../styles/_suggested-addresses-dialog.scss   | 10 -------
 .../opf-error-modal.component.html            |  2 +-
 .../styles/components/_opf-error-modal.scss   |  9 ------
 .../coupon-dialog.component.html              |  4 +--
 .../stock-notification-dialog.component.html  |  4 +--
 .../anonymous-consent-dialog.component.html   | 11 ++++---
 .../myaccount/_my-coupons-dialog.scss         |  5 ----
 .../_anonymous-consent-dialog.scss            |  8 -----
 .../_stock-notification-dialog.scss           | 10 -------
 .../bootstrap-copy/scss/mixins/_image.scss    |  2 +-
 23 files changed, 27 insertions(+), 138 deletions(-)

diff --git a/feature-libs/cart/base/styles/components/_clear-cart-dialog.scss b/feature-libs/cart/base/styles/components/_clear-cart-dialog.scss
index 2fd7daf44c5..ccab2c187d8 100644
--- a/feature-libs/cart/base/styles/components/_clear-cart-dialog.scss
+++ b/feature-libs/cart/base/styles/components/_clear-cart-dialog.scss
@@ -2,12 +2,7 @@
   background-color: rgba(0, 0, 0, 0.5);
 
   .cx-clear-cart-dialog {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-
     .cx-clear-cart-container {
-      // @extend .modal-content;
-
       .cx-clear-cart-header {
         .cx-clear-cart-title {
           font-size: var(--cx-font-size, 1.375rem);
@@ -17,8 +12,6 @@
       }
 
       .cx-clear-cart-body {
-        // @extend .modal-body;
-
         .clear-cart-msg {
           margin-bottom: 1.5rem;
         }
diff --git a/feature-libs/cart/import-export/styles/_import-entries-dialog.scss b/feature-libs/cart/import-export/styles/_import-entries-dialog.scss
index fe4eaf44451..c05b59b0074 100644
--- a/feature-libs/cart/import-export/styles/_import-entries-dialog.scss
+++ b/feature-libs/cart/import-export/styles/_import-entries-dialog.scss
@@ -2,11 +2,7 @@ cx-import-entries-dialog {
   background-color: rgba(0, 0, 0, 0.5);
 
   .cx-import-entries-dialog {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-
     .cx-import-entries-container {
-      // @extend .modal-content;
       pointer-events: none;
 
       button,
@@ -32,7 +28,6 @@ cx-import-entries-dialog {
 
       cx-import-entries-form,
       cx-import-to-new-saved-cart-form {
-        // @extend .modal-body;
         background-color: var(--cx-color-inverse);
         .cx-import-entries-subtitle {
           font-weight: var(--cx-font-weight-bold);
@@ -95,8 +90,6 @@ cx-import-entries-dialog {
       }
 
       cx-import-entries-summary {
-        // @extend .modal-body;
-
         ul {
           margin: -0.75rem 0 1.5rem;
           overflow: auto;
diff --git a/feature-libs/cart/saved-cart/styles/_saved-cart-form-dialog.scss b/feature-libs/cart/saved-cart/styles/_saved-cart-form-dialog.scss
index cfe0ed8f005..5d114fc0575 100644
--- a/feature-libs/cart/saved-cart/styles/_saved-cart-form-dialog.scss
+++ b/feature-libs/cart/saved-cart/styles/_saved-cart-form-dialog.scss
@@ -2,12 +2,7 @@ cx-saved-cart-form-dialog {
   background-color: rgba(0, 0, 0, 0.5);
 
   .cx-saved-cart-form-dialog {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-
     .cx-saved-cart-form-container {
-      // @extend .modal-content;
-
       .cx-saved-cart-form-header {
         .cx-saved-cart-form-title {
           font-size: var(--cx-font-size, 1.375rem);
@@ -17,8 +12,6 @@ cx-saved-cart-form-dialog {
       }
 
       .cx-saved-cart-form-body {
-        // @extend .modal-body;
-
         .cx-saved-cart-form-row {
           margin-bottom: 1.5rem;
 
diff --git a/feature-libs/customer-ticketing/styles/components/_customer-ticketing-dialog.scss b/feature-libs/customer-ticketing/styles/components/_customer-ticketing-dialog.scss
index cd4ff07f98c..5f1f541f8e3 100644
--- a/feature-libs/customer-ticketing/styles/components/_customer-ticketing-dialog.scss
+++ b/feature-libs/customer-ticketing/styles/components/_customer-ticketing-dialog.scss
@@ -4,12 +4,7 @@
   background-color: rgba(0, 0, 0, 0.5);
 
   .cx-customer-ticket-form-dialog {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-
     .cx-customer-ticket-form-container {
-      // @extend .modal-content;
-
       .cx-customer-ticket-form-header {
         .cx-customer-ticket-form-title {
           font-size: var(--cx-font-size, 1.375rem);
@@ -19,7 +14,6 @@
       }
 
       .cx-customer-ticket-form-body {
-        // @extend .modal-body;
         display: flex;
         flex-direction: column;
         gap: 1rem;
diff --git a/feature-libs/order/components/order-details/order-detail-items/consignment-tracking/tracking-events/tracking-events.component.html b/feature-libs/order/components/order-details/order-detail-items/consignment-tracking/tracking-events/tracking-events.component.html
index a21a6e123c9..2864f7a6dea 100644
--- a/feature-libs/order/components/order-details/order-detail-items/consignment-tracking/tracking-events/tracking-events.component.html
+++ b/feature-libs/order/components/order-details/order-detail-items/consignment-tracking/tracking-events/tracking-events.component.html
@@ -1,5 +1,5 @@
 <div
-  class="modal-dialog modal-dialog-centered modal-lgcx-consignment-tracking-dialog"
+  class="modal-dialog modal-dialog-centered modal-lg cx-consignment-tracking-dialog"
   [cxFocus]="focusConfig"
   (esc)="close('Escape clicked')"
 >
@@ -8,7 +8,7 @@
       *ngIf="tracking$ | async as consignmentTracking; else loading"
     >
       <!-- Modal Header -->
-      <div class="cx-modal-header">
+      <div class="modal-header cx-modal-header">
         <div class="modal-title cx-consignment-tracking-title">
           {{ 'orderDetails.consignmentTracking.dialog.header' | cxTranslate }}
         </div>
diff --git a/feature-libs/order/components/replenishment-order-cancellation-dialog/replenishment-order-cancellation-dialog.component.html b/feature-libs/order/components/replenishment-order-cancellation-dialog/replenishment-order-cancellation-dialog.component.html
index 93b62312628..631892795d4 100644
--- a/feature-libs/order/components/replenishment-order-cancellation-dialog/replenishment-order-cancellation-dialog.component.html
+++ b/feature-libs/order/components/replenishment-order-cancellation-dialog/replenishment-order-cancellation-dialog.component.html
@@ -1,12 +1,12 @@
 <div
   [cxFocus]="focusConfig"
   (esc)="close('Escape clicked')"
-  class="modal-dialog modal-dialog-centered modal-sm cx-cancel-replenishment-dialog-foreground"
+  class="modal-dialog modal-dialog-centered modal-sm"
   role="dialog"
   aria-labelledby="dialogTitle"
 >
-  <div class="modal-content cx-cancel-replenishment-dialog-content">
-    <div class="modal-header cx-cancel-replenishment-dialog-header">
+  <div class="modal-content">
+    <div class="modal-header">
       <h3 id="dialogTitle">
         {{ 'orderDetails.cancelReplenishment.title' | cxTranslate }}
       </h3>
@@ -26,7 +26,7 @@ <h3 id="dialogTitle">
       {{ 'orderDetails.cancelReplenishment.description' | cxTranslate }}
     </div>
 
-    <div class="modal-body cx-cancel-replenishment-dialog-body">
+    <div class="modal-body">
       <div class="cx-cancel-replenishment-btns row">
         <div class="col-md-6">
           <button
diff --git a/feature-libs/order/styles/components/order-history/_consignment-tracking.scss b/feature-libs/order/styles/components/order-history/_consignment-tracking.scss
index 23927b27972..c705a17b6d4 100644
--- a/feature-libs/order/styles/components/order-history/_consignment-tracking.scss
+++ b/feature-libs/order/styles/components/order-history/_consignment-tracking.scss
@@ -6,13 +6,7 @@
 
 %cx-tracking-events {
   .cx-consignment-tracking-dialog {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-    // @extend .modal-lg;
-
     .cx-consignment-tracking-container {
-      // @extend .modal-content;
-
       .cx-consignment-tracking-title {
         @include type('3');
       }
diff --git a/feature-libs/order/styles/components/replenishment-order/_replenishment-order-cancellation.scss b/feature-libs/order/styles/components/replenishment-order/_replenishment-order-cancellation.scss
index 8acfc888336..27d90b1f75c 100644
--- a/feature-libs/order/styles/components/replenishment-order/_replenishment-order-cancellation.scss
+++ b/feature-libs/order/styles/components/replenishment-order/_replenishment-order-cancellation.scss
@@ -22,30 +22,10 @@
   color: var(--cx-color-text);
   background-color: rgba(0, 0, 0, 0.5);
 
-  .cx-cancel-replenishment-dialog-foreground {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-    // @extend .modal-sm;
-
-    .cx-cancel-replenishment-dialog-content {
-      // @extend .modal-content;
-
-      .cx-cancel-replenishment-dialog {
-        &-header {
-          // @extend .modal-header;
-        }
-
-        &-description {
-          padding-top: 10px;
-          padding-inline-start: 25px;
-          padding-inline-end: 25px;
-          padding-bottom: 0;
-        }
-
-        &-body {
-          // @extend .modal-body;
-        }
-      }
-    }
+  .cx-cancel-replenishment-dialog-description {
+    padding-top: 10px;
+    padding-inline-start: 25px;
+    padding-inline-end: 25px;
+    padding-bottom: 0;
   }
 }
diff --git a/feature-libs/pickup-in-store/styles/_pickup-option-dialog.scss b/feature-libs/pickup-in-store/styles/_pickup-option-dialog.scss
index d0f13850b17..3480d18297e 100644
--- a/feature-libs/pickup-in-store/styles/_pickup-option-dialog.scss
+++ b/feature-libs/pickup-in-store/styles/_pickup-option-dialog.scss
@@ -4,8 +4,6 @@
   .cx-pickup-option-dialog {
     align-items: normal;
 
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
     @include media-breakpoint-down(md) {
       height: 100%;
     }
@@ -15,7 +13,6 @@
         height: 100%;
       }
 
-      // @extend .modal-content;
       .cx-dialog-header {
         margin-bottom: 0;
         padding-bottom: 0;
diff --git a/feature-libs/product/image-zoom/styles/_product-image-zoom-dialog.scss b/feature-libs/product/image-zoom/styles/_product-image-zoom-dialog.scss
index 6ee6b0bae15..5dce4ed6c09 100644
--- a/feature-libs/product/image-zoom/styles/_product-image-zoom-dialog.scss
+++ b/feature-libs/product/image-zoom/styles/_product-image-zoom-dialog.scss
@@ -5,10 +5,6 @@ cx-product-image-zoom-dialog {
   background-color: rgba(0, 0, 0, 0.5);
 
   .cx-image-zoom-dialog {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-    // @extend .modal-lg;
-
     @include media-breakpoint-up(md) {
       // !important is required to override bootstrap
       max-width: 90vw !important;
@@ -25,11 +21,9 @@ cx-product-image-zoom-dialog {
     }
 
     .cx-dialog-content {
-      // @extend .modal-content;
       height: 100%;
 
       .cx-dialog-header {
-        // @extend .modal-header;
         padding: 1.5rem 1.75rem 0.85rem;
         border-bottom: none;
         max-height: 76px;
@@ -53,7 +47,6 @@ cx-product-image-zoom-dialog {
         }
       }
       .cx-dialog-body {
-        // @extend .modal-body;
         background-color: var(--cx-color-inverse);
         height: calc(100% - 76px);
 
diff --git a/feature-libs/user/profile/components/address-book/address-form/suggested-addresses-dialog/suggested-addresses-dialog.component.html b/feature-libs/user/profile/components/address-book/address-form/suggested-addresses-dialog/suggested-addresses-dialog.component.html
index d9ded63ceef..c35a094d2e2 100644
--- a/feature-libs/user/profile/components/address-book/address-form/suggested-addresses-dialog/suggested-addresses-dialog.component.html
+++ b/feature-libs/user/profile/components/address-book/address-form/suggested-addresses-dialog/suggested-addresses-dialog.component.html
@@ -7,7 +7,7 @@
 >
   <div
     *ngIf="data$ | async as data"
-    class="modal-contentcx-suggested-addresses-container"
+    class="modal-content cx-suggested-addresses-container"
   >
     <div class="cx-suggested-addresses-header cx-modal-header">
       <h3
@@ -36,7 +36,7 @@
         </span>
       </button>
     </div>
-    <div class="modal-body cx-suggested-addresses-body" ngForm>
+    <div class="modal-body" ngForm>
       <div class="cx-dialog-info">
         <p>
           {{ 'addressSuggestion.ensureAccuracySuggestChange' | cxTranslate }}
diff --git a/feature-libs/user/profile/components/close-account/components/close-account-modal/close-account-modal.component.html b/feature-libs/user/profile/components/close-account/components/close-account-modal/close-account-modal.component.html
index 70cfe995a15..379d8646ebe 100644
--- a/feature-libs/user/profile/components/close-account/components/close-account-modal/close-account-modal.component.html
+++ b/feature-libs/user/profile/components/close-account/components/close-account-modal/close-account-modal.component.html
@@ -29,7 +29,7 @@ <h3 class="cx-close-account-modal-title">
       </div>
 
       <ng-template #loaded>
-        <div class="modal-body cx-close-account-modal-body">
+        <div class="modal-body">
           <p class="cx-confirmation">
             {{ 'closeAccount.confirmAccountClosureMessage' | cxTranslate }}
           </p>
diff --git a/feature-libs/user/profile/styles/_close-account-modal.scss b/feature-libs/user/profile/styles/_close-account-modal.scss
index d7997802fae..2ffd9270b99 100644
--- a/feature-libs/user/profile/styles/_close-account-modal.scss
+++ b/feature-libs/user/profile/styles/_close-account-modal.scss
@@ -1,11 +1,6 @@
 %cx-close-account-modal {
   .cx-close-account-modal {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-
     .cx-close-account-modal-container {
-      // @extend .modal-content;
-
       .cx-close-account-modal-header {
         display: flex;
         justify-content: space-between;
@@ -14,10 +9,6 @@
         }
       }
 
-      .cx-close-account-modal-body {
-        // @extend .modal-body;
-      }
-
       .cx-confirmation {
         margin-bottom: 0px;
       }
diff --git a/feature-libs/user/profile/styles/_suggested-addresses-dialog.scss b/feature-libs/user/profile/styles/_suggested-addresses-dialog.scss
index 3e821a21456..42ebf9150f4 100644
--- a/feature-libs/user/profile/styles/_suggested-addresses-dialog.scss
+++ b/feature-libs/user/profile/styles/_suggested-addresses-dialog.scss
@@ -1,12 +1,6 @@
 %cx-suggested-addresses-dialog {
   .cx-suggested-addresses-dialog {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-    // @extend .modal-lg;
-
     .cx-suggested-addresses-container {
-      // @extend .modal-content;
-
       .cx-suggested-addresses-header {
         display: flex;
         justify-content: space-between;
@@ -16,10 +10,6 @@
         }
       }
 
-      .cx-suggested-addresses-body {
-        // @extend .modal-body;
-      }
-
       .cx-suggested-addresses-footer {
         .cx-dialog-buttons {
           &:focus {
diff --git a/integration-libs/opf/base/components/opf-error-modal/opf-error-modal.component.html b/integration-libs/opf/base/components/opf-error-modal/opf-error-modal.component.html
index f475a62f3f6..93d1f0e84fb 100644
--- a/integration-libs/opf/base/components/opf-error-modal/opf-error-modal.component.html
+++ b/integration-libs/opf/base/components/opf-error-modal/opf-error-modal.component.html
@@ -8,7 +8,7 @@
       class="modal-content cx-opf-error-modal-container"
       *ngIf="opfErrorDialogOptions$ | async as opfErrorDialogOptions"
     >
-      <div class="modal-body cx-opf-error-modal-body">
+      <div class="modal-body">
         <p class="cx-confirmation">
           {{ opfErrorDialogOptions?.message }}
         </p>
diff --git a/integration-libs/opf/base/styles/components/_opf-error-modal.scss b/integration-libs/opf/base/styles/components/_opf-error-modal.scss
index d131f7e1e50..7b56568c756 100644
--- a/integration-libs/opf/base/styles/components/_opf-error-modal.scss
+++ b/integration-libs/opf/base/styles/components/_opf-error-modal.scss
@@ -2,12 +2,7 @@
 
 %cx-opf-error-modal {
   .cx-opf-error-modal {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-
     .cx-opf-error-modal-container {
-      // @extend .modal-content;
-
       .cx-opf-error-modal-header {
         display: flex;
         justify-content: space-between;
@@ -16,10 +11,6 @@
         }
       }
 
-      .cx-opf-error-modal-body {
-        // @extend .modal-body;
-      }
-
       .cx-confirmation {
         margin-bottom: 0px;
       }
diff --git a/projects/storefrontlib/cms-components/myaccount/my-coupons/coupon-card/coupon-dialog/coupon-dialog.component.html b/projects/storefrontlib/cms-components/myaccount/my-coupons/coupon-card/coupon-dialog/coupon-dialog.component.html
index 2973e51b920..c0fc7a720ab 100644
--- a/projects/storefrontlib/cms-components/myaccount/my-coupons/coupon-card/coupon-dialog/coupon-dialog.component.html
+++ b/projects/storefrontlib/cms-components/myaccount/my-coupons/coupon-card/coupon-dialog/coupon-dialog.component.html
@@ -1,11 +1,11 @@
 <div
-  class="cx-coupon-dialog"
+  class="modal-dialog modal-dialog-centered cx-coupon-dialog"
   role="dialog"
   [cxFocus]="focusConfig"
   (esc)="close('Escape clicked')"
   aria-labelledby="dialogTitle"
 >
-  <div class="cx-coupon-container">
+  <div class="modal-content cx-coupon-container">
     <!-- Modal Header -->
 
     <div class="cx-dialog-header modal-header">
diff --git a/projects/storefrontlib/cms-components/product/stock-notification/stock-notification-dialog/stock-notification-dialog.component.html b/projects/storefrontlib/cms-components/product/stock-notification/stock-notification-dialog/stock-notification-dialog.component.html
index 6d4521fe513..b144119a5a2 100644
--- a/projects/storefrontlib/cms-components/product/stock-notification/stock-notification-dialog/stock-notification-dialog.component.html
+++ b/projects/storefrontlib/cms-components/product/stock-notification/stock-notification-dialog/stock-notification-dialog.component.html
@@ -1,11 +1,11 @@
 <div
-  class="cx-stock-notification-dialog"
+  class="modal-dialog modal-dialog-centered modal-lg"
   role="dialog"
   [cxFocus]="focusConfig"
   (esc)="close('Escape clicked')"
   aria-labelledby="dialogTitle"
 >
-  <div class="cx-stock-notification-container">
+  <div class="modal-content">
     <div class="cx-dialog-header cx-modal-header">
       <h3
         *cxFeature="'a11yDialogsHeading'"
diff --git a/projects/storefrontlib/shared/components/anonymous-consents-dialog/anonymous-consent-dialog.component.html b/projects/storefrontlib/shared/components/anonymous-consents-dialog/anonymous-consent-dialog.component.html
index 600a6a98465..df4cbd3cfa6 100644
--- a/projects/storefrontlib/shared/components/anonymous-consents-dialog/anonymous-consent-dialog.component.html
+++ b/projects/storefrontlib/shared/components/anonymous-consents-dialog/anonymous-consent-dialog.component.html
@@ -1,11 +1,11 @@
 <div
-  class="cx-anonymous-consent-dialog"
+  class="modal-dialog modal-dialog-centered modal-lg cx-anonymous-consent-dialog"
   role="dialog"
   [cxFocus]="focusConfig"
   (esc)="close('Escape clicked')"
   aria-labelledby="dialogTitle"
 >
-  <div class="cx-dialog-content">
+  <div class="modal-content cx-dialog-content">
     <div *ngIf="loading$ | async; else dialogBody">
       <cx-spinner></cx-spinner>
     </div>
@@ -15,7 +15,7 @@
         role="status"
         [attr.aria-label]="'common.loaded' | cxTranslate"
       ></div>
-      <div class="cx-dialog-header">
+      <div class="modal-header cx-dialog-header">
         <h3 id="dialogTitle">
           {{ 'anonymousConsents.dialog.title' | cxTranslate }}
         </h3>
@@ -58,7 +58,10 @@ <h3 id="dialogTitle">
         </ng-container>
       </div>
       <!-- Modal Body -->
-      <div class="cx-dialog-body" *ngIf="templates$ | async as templates">
+      <div
+        class="modal-body cx-dialog-body"
+        *ngIf="templates$ | async as templates"
+      >
         <ng-container *ngIf="consents$ | async as consents">
           <div
             class="cx-dialog-row col-sm-12 col-md-6"
diff --git a/projects/storefrontstyles/scss/components/myaccount/_my-coupons-dialog.scss b/projects/storefrontstyles/scss/components/myaccount/_my-coupons-dialog.scss
index 28b81357a88..0593c94bc01 100644
--- a/projects/storefrontstyles/scss/components/myaccount/_my-coupons-dialog.scss
+++ b/projects/storefrontstyles/scss/components/myaccount/_my-coupons-dialog.scss
@@ -1,12 +1,7 @@
 %cx-coupon-dialog {
   background-color: rgba(0, 0, 0, 0.5);
   .cx-coupon-dialog {
-    @extend .modal-dialog;
-    @extend .modal-dialog-centered;
-    @extend .modal-lg;
-
     .cx-coupon-container {
-      @extend .modal-content;
       .cx-dialog-item {
         padding-inline-end: 1rem;
       }
diff --git a/projects/storefrontstyles/scss/components/myaccount/anonymous-consent/_anonymous-consent-dialog.scss b/projects/storefrontstyles/scss/components/myaccount/anonymous-consent/_anonymous-consent-dialog.scss
index 7f070c10926..e2c72b0a63b 100644
--- a/projects/storefrontstyles/scss/components/myaccount/anonymous-consent/_anonymous-consent-dialog.scss
+++ b/projects/storefrontstyles/scss/components/myaccount/anonymous-consent/_anonymous-consent-dialog.scss
@@ -5,15 +5,8 @@
   background-color: rgba(0, 0, 0, 0.5);
 
   .cx-anonymous-consent-dialog {
-    @extend .modal-dialog;
-    @extend .modal-dialog-centered;
-    @extend .modal-lg;
-
     .cx-dialog-content {
-      @extend .modal-content;
-
       .cx-dialog-header {
-        @extend .modal-header;
         padding-top: 2rem;
         padding-inline-end: 1.75rem;
         padding-bottom: 0.85rem;
@@ -23,7 +16,6 @@
         }
       }
       .cx-dialog-body {
-        @extend .modal-body;
         padding-top: 0;
         background-color: var(--cx-color-inverse);
 
diff --git a/projects/storefrontstyles/scss/components/product/details/stock-notification/_stock-notification-dialog.scss b/projects/storefrontstyles/scss/components/product/details/stock-notification/_stock-notification-dialog.scss
index be8fbe20567..319678eae56 100644
--- a/projects/storefrontstyles/scss/components/product/details/stock-notification/_stock-notification-dialog.scss
+++ b/projects/storefrontstyles/scss/components/product/details/stock-notification/_stock-notification-dialog.scss
@@ -1,10 +1,4 @@
 %cx-stock-notification-dialog {
-  .cx-stock-notification-dialog {
-    @extend .modal-dialog;
-    @extend .modal-dialog-centered;
-    @extend .modal-lg;
-  }
-
   .cx-dialog-title {
     @include type('3');
   }
@@ -15,10 +9,6 @@
     }
   }
 
-  .cx-stock-notification-container {
-    @extend .modal-content;
-  }
-
   .cx-stock-notification-text {
     margin: 0;
   }
diff --git a/projects/styles/bootstrap-copy/scss/mixins/_image.scss b/projects/styles/bootstrap-copy/scss/mixins/_image.scss
index 6bdf3cfc3a8..62f914de5d2 100644
--- a/projects/styles/bootstrap-copy/scss/mixins/_image.scss
+++ b/projects/styles/bootstrap-copy/scss/mixins/_image.scss
@@ -25,7 +25,7 @@
   // but doesn't convert dppx=>dpi.
   // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
   // Compatibility info: https://caniuse.com/css-media-resolution
-  @media only screen and (min-resolution: 192dpi),
+  @media only screen and (min-resolution: 192dpi) {
     // IE9-11 don't support dppx only screen and (min-resolution: 2dppx) {
     // Standardized
     background-image: url($file-2x);