From 556ba1fe80c7554ad9d3ca4a61c85b42b4aef6ac Mon Sep 17 00:00:00 2001
From: Corinna Hillebrand <corinna.hillebrand@wikimedia.de>
Date: Tue, 22 Oct 2024 15:07:29 +0200
Subject: [PATCH 1/2] Remove "scoped" modifier of vue component style section

- the scoped modifier influences how css is compiled and should not be used
- remove empty style tags that weren't used (cleanup)
---
 .../pages/donation_form/DonationReceipt/AddressFields.vue     | 4 ----
 .../DonationReceipt/AddressFieldsStreetAutocomplete.vue       | 4 ----
 .../donation_form/summary_content/PaymentSummaryAnonymous.vue | 4 ----
 .../donation_form/summary_content/PaymentSummaryCompany.vue   | 4 ----
 .../summary_content/PaymentSummaryCompanyWithContact.vue      | 4 ----
 .../donation_form/summary_content/PaymentSummaryEmail.vue     | 4 ----
 .../donation_form/summary_content/PaymentSummaryPrivate.vue   | 4 ----
 .../donation_form/summary_content/PaymentSummaryUnset.vue     | 4 ----
 src/components/shared/ButtonLink.vue                          | 2 +-
 9 files changed, 1 insertion(+), 33 deletions(-)

diff --git a/src/components/pages/donation_form/DonationReceipt/AddressFields.vue b/src/components/pages/donation_form/DonationReceipt/AddressFields.vue
index 6d896f847..e31592f53 100644
--- a/src/components/pages/donation_form/DonationReceipt/AddressFields.vue
+++ b/src/components/pages/donation_form/DonationReceipt/AddressFields.vue
@@ -151,7 +151,3 @@ const onCountryFieldChanged = ( country: Country | undefined ) => {
 };
 
 </script>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/src/components/pages/donation_form/DonationReceipt/AddressFieldsStreetAutocomplete.vue b/src/components/pages/donation_form/DonationReceipt/AddressFieldsStreetAutocomplete.vue
index d48f94b64..8dad74c0f 100644
--- a/src/components/pages/donation_form/DonationReceipt/AddressFieldsStreetAutocomplete.vue
+++ b/src/components/pages/donation_form/DonationReceipt/AddressFieldsStreetAutocomplete.vue
@@ -143,7 +143,3 @@ const onCountryFieldChanged = ( country: Country | undefined ) => {
 };
 
 </script>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/src/components/pages/donation_form/summary_content/PaymentSummaryAnonymous.vue b/src/components/pages/donation_form/summary_content/PaymentSummaryAnonymous.vue
index 4b22b0cb8..faf622f1c 100644
--- a/src/components/pages/donation_form/summary_content/PaymentSummaryAnonymous.vue
+++ b/src/components/pages/donation_form/summary_content/PaymentSummaryAnonymous.vue
@@ -31,7 +31,3 @@ export default {
 	},
 };
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/components/pages/donation_form/summary_content/PaymentSummaryCompany.vue b/src/components/pages/donation_form/summary_content/PaymentSummaryCompany.vue
index 84bed0448..7b20770dc 100644
--- a/src/components/pages/donation_form/summary_content/PaymentSummaryCompany.vue
+++ b/src/components/pages/donation_form/summary_content/PaymentSummaryCompany.vue
@@ -55,7 +55,3 @@ export default {
 	},
 };
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/components/pages/donation_form/summary_content/PaymentSummaryCompanyWithContact.vue b/src/components/pages/donation_form/summary_content/PaymentSummaryCompanyWithContact.vue
index 84bed0448..7b20770dc 100644
--- a/src/components/pages/donation_form/summary_content/PaymentSummaryCompanyWithContact.vue
+++ b/src/components/pages/donation_form/summary_content/PaymentSummaryCompanyWithContact.vue
@@ -55,7 +55,3 @@ export default {
 	},
 };
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/components/pages/donation_form/summary_content/PaymentSummaryEmail.vue b/src/components/pages/donation_form/summary_content/PaymentSummaryEmail.vue
index c579bdcbf..0f3907573 100644
--- a/src/components/pages/donation_form/summary_content/PaymentSummaryEmail.vue
+++ b/src/components/pages/donation_form/summary_content/PaymentSummaryEmail.vue
@@ -54,7 +54,3 @@ export default {
 	},
 };
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/components/pages/donation_form/summary_content/PaymentSummaryPrivate.vue b/src/components/pages/donation_form/summary_content/PaymentSummaryPrivate.vue
index e2f42d362..ee3b3cd34 100644
--- a/src/components/pages/donation_form/summary_content/PaymentSummaryPrivate.vue
+++ b/src/components/pages/donation_form/summary_content/PaymentSummaryPrivate.vue
@@ -64,7 +64,3 @@ export default {
 	},
 };
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/components/pages/donation_form/summary_content/PaymentSummaryUnset.vue b/src/components/pages/donation_form/summary_content/PaymentSummaryUnset.vue
index bf9fd8d25..f1cfdf6f7 100644
--- a/src/components/pages/donation_form/summary_content/PaymentSummaryUnset.vue
+++ b/src/components/pages/donation_form/summary_content/PaymentSummaryUnset.vue
@@ -31,7 +31,3 @@ export default {
 	},
 };
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/components/shared/ButtonLink.vue b/src/components/shared/ButtonLink.vue
index f03a1e62a..a488e148c 100644
--- a/src/components/shared/ButtonLink.vue
+++ b/src/components/shared/ButtonLink.vue
@@ -27,7 +27,7 @@ defineEmits( [ 'click' ] );
 
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 @use '@src/scss/settings/colors';
 
 .button-link {

From 346da725478615c459cc7290a71f77c9438a5451 Mon Sep 17 00:00:00 2001
From: Corinna Hillebrand <corinna.hillebrand@wikimedia.de>
Date: Tue, 22 Oct 2024 16:16:20 +0200
Subject: [PATCH 2/2] Fix global headline styling

- while adding the new iban calculator a global css change on h2 slipped in that
influenced the style on the confirmation page
- change the h2 headline to h3 because it is nested inside a context that has an h2 header

this fixes https://phabricator.wikimedia.org/T377833
---
 src/components/shared/IbanFields.vue | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/shared/IbanFields.vue b/src/components/shared/IbanFields.vue
index e8284d9c5..a4fc44885 100644
--- a/src/components/shared/IbanFields.vue
+++ b/src/components/shared/IbanFields.vue
@@ -17,9 +17,9 @@
 			<ScrollTarget target-id="iban-calculator-scroll-target"/>
 
 			<div class="iban-calculator-content">
-				<h2 class="icon-title">
+				<h3 class="icon-title">
 					<BankIcon/> {{ $t( 'donation_form_iban_calculator_title' ) }}
-				</h2>
+				</h3>
 
 				<button class="iban-calculator-close" @click.prevent="showCalculator = false" aria-controls="iban-calculator">
 					<span class="is-sr-only">{{ $t( 'close' ) }}</span>
@@ -375,17 +375,17 @@ watch( () => store.state.bankdata.values.iban, ( newIban: string ) => {
 			}
 		}
 	}
-}
 
-h2.icon-title {
-	padding: map.get(units.$spacing, 'small') 0 0 1.5rem;
-	margin: 0 map.get(units.$spacing, 'small');
-	font-size: 18px;
-	line-height: 25px;
+	.icon-title {
+		padding: map.get(units.$spacing, 'small') 0 0 1.5rem;
+		margin: 0 map.get(units.$spacing, 'small');
+		font-size: 18px;
+		line-height: 25px;
 
-	svg {
-		float: left;
-		margin: 4px 0 0 -1.5rem;
+		svg {
+			float: left;
+			margin: 4px 0 0 -1.5rem;
+		}
 	}
 }