fix(modals): apply base styles everywhere, fixes #12524

website/client/src/assets/scss/index.scss

@@ -37,3 +37,4 @@
 @import './tiers';
 @import './payments';
 @import './spacing';
+@import './modal';

website/client/src/assets/scss/mixins.scss

@@ -0,0 +1,9 @@
+@mixin centeredModal() {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+
+  header, footer {
+    border: 0;
+  }
+}

website/client/src/assets/scss/modal.scss

@@ -1,16 +1,5 @@
-
 @import '~@/assets/scss/colors.scss';
 
-@mixin centeredModal() {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-
-  header, footer {
-    border: 0;
-  }
-}
-
 .modal {
   z-index: 1350;
   padding-left: 0px !important;

website/client/src/components/achievements/genericAchievement.vue

@@ -45,7 +45,7 @@
 </template>
 
 <style lang="scss">
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   #generic-achievement {
     @include centeredModal();

website/client/src/components/inventory/equipment/equipGearModal.vue

@@ -71,7 +71,7 @@
 <style lang="scss">
 
   @import '~@/assets/scss/colors.scss';
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   #equipgear-modal {
     @include centeredModal();

website/client/src/components/inventory/stable/hatchedPetDialog.vue

@@ -46,7 +46,8 @@
 </template>
 
 <style lang="scss">
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
+  @import '~@/assets/scss/colors.scss';
 
   #hatchedPet-modal {
     @include centeredModal();

website/client/src/components/inventory/stable/hatchingModal.vue

@@ -46,7 +46,7 @@
 </template>
 
 <style lang="scss">
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   #hatching-modal {
     @include centeredModal();

website/client/src/components/inventory/stable/index.vue

@@ -330,7 +330,7 @@
 
 <style lang="scss">
   @import '~@/assets/scss/colors.scss';
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   .standard-page .clearfix .float-right {
     margin-right: 24px;

website/client/src/components/inventory/stable/mountRaisedModal.vue

@@ -38,7 +38,7 @@
 
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   #mount-raised-modal {
     @include centeredModal();

website/client/src/components/inventory/stable/welcomeModal.vue

@@ -24,7 +24,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   #welcome-modal {
     @include centeredModal();

website/client/src/components/payments/selectUserModal.vue

@@ -67,7 +67,7 @@
 </template>
 
 <style lang="scss">
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   #select-user-modal {
     @include centeredModal();

website/client/src/components/shops/buyModal.vue

@@ -192,7 +192,7 @@
 
 <style lang="scss">
   @import '~@/assets/scss/colors.scss';
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   #buy-modal {
     @include centeredModal();

website/client/src/components/shops/market/sellModal.vue

@@ -83,9 +83,8 @@
   </b-modal>
 </template>
 <style lang="scss">
-
-  @import '~@/assets/scss/modal.scss';
   @import '~@/assets/scss/colors.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   #sell-modal {
     @include centeredModal();

website/client/src/components/shops/quests/buyQuestModal.vue

@@ -111,7 +111,7 @@
 
 <style lang="scss">
   @import '~@/assets/scss/colors.scss';
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   #buy-quest-modal {
     @include centeredModal();