Fix chevron colours

The chevron swatch colours in the banners were broken and the fill was only being set thought js. This restores the swatch colours, and adds a new specific icon for the form back button so no more overriding has to happen.
wmde · Nov 22, 2024 · 84db80a · 84db80a
1 parent 25d8bb9
commit 84db80a
Show file tree

Hide file tree

Showing 13 changed files with 26 additions and 31 deletions.
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_14/styles/MainBanner.scss b/banners/desktop/C24_WMDE_Desktop_DE_14/styles/MainBanner.scss
@@ -2,11 +2,6 @@ $banner-height: 357px !default;
 $form-width: 300px !default;
 
 .wmde-banner {
-
-	.previous {
-		--slider-chevron: var( --previous-button-fill );
-	}
-
 	&-main {
 		min-height: $banner-height;
 		display: flex;

diff --git a/src/components/DonationForm/Forms/AddressTypeButtonForm.vue b/src/components/DonationForm/Forms/AddressTypeButtonForm.vue
@@ -2,7 +2,7 @@
 	<form @submit.prevent="onSubmit" class="wmde-banner-sub-form wmde-banner-form-address-type">
 		<div class="wmde-banner-form-address-type-title">
 			<a tabIndex="-1" href="#" class="previous" @click.prevent="onPrevious">
-				<ChevronLeftIcon/>
+				<FormPreviousIcon/>
 				{{ $translate( 'back-button' ) }}
 			</a>
 			{{ $translate( 'address-type-label' ) }}
@@ -42,14 +42,14 @@ export default {
 </script>
 
 <script setup lang="ts">
-import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
 import { computed, inject } from 'vue';
 import { DonationFormItems } from '@src/utils/FormItemsBuilder/DonationFormItems';
 import { useFormModel } from '@src/components/composables/useFormModel';
 import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods';
 import { Translator } from '@src/Translator';
 import { Tracker } from '@src/tracking/Tracker';
 import { useFormStepShownEvent } from '@src/components/DonationForm/Forms/useFormStepShownEvent';
+import FormPreviousIcon from '@src/components/Icons/FormPreviousIcon.vue';
 
 interface Props {
 	isCurrent: boolean

diff --git a/src/components/DonationForm/Forms/AddressTypeForm.vue b/src/components/DonationForm/Forms/AddressTypeForm.vue
@@ -2,7 +2,7 @@
 	<form @submit.prevent="onSubmit" class="wmde-banner-sub-form wmde-banner-form-address-type">
 		<div class="wmde-banner-form-address-type-back">
 			<a tabIndex="-1" href="#" class="previous" @click.prevent="onPrevious">
-				<ChevronLeftIcon/>
+				<FormPreviousIcon/>
 			</a>
 		</div>
 
@@ -44,7 +44,6 @@ export default {
 </script>
 
 <script setup lang="ts">
-import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
 import { isValidOrUnset } from '@src/components/DonationForm/Forms/isValidOrUnset';
 import SelectGroup from '@src/components/DonationForm/SubComponents/SelectGroup.vue';
 import { computed, inject } from 'vue';
@@ -56,6 +55,7 @@ import { Validity } from '@src/utils/FormModel/Validity';
 import { Translator } from '@src/Translator';
 import { Tracker } from '@src/tracking/Tracker';
 import { useFormStepShownEvent } from '@src/components/DonationForm/Forms/useFormStepShownEvent';
+import FormPreviousIcon from '@src/components/Icons/FormPreviousIcon.vue';
 
 interface Props {
 	isCurrent: boolean

diff --git a/src/components/DonationForm/Forms/CustomAmountForm.vue b/src/components/DonationForm/Forms/CustomAmountForm.vue
@@ -4,7 +4,7 @@
 		<div class="wmde-banner-form-new-custom-amount-title">
 			<a tabIndex="-1" href="#" class="previous"
 					@click.prevent="onPrevious">
-				<ChevronLeftIcon/>
+				<FormPreviousIcon/>
 			</a>
 		</div>
 
@@ -63,14 +63,14 @@ import { computed, inject, ref } from 'vue';
 import { parseFloatFromFormattedString } from '@src/utils/parseFloatFromFormattedString';
 import { validateAmount } from '@src/validation/validateAmount';
 import { AmountValidity } from '@src/utils/FormModel/AmountValidity';
-import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
 import { isValidOrUnset } from '@src/components/DonationForm/Forms/isValidOrUnset';
 import { Currency } from '@src/utils/DynamicContent/formatters/Currency';
 import { amountValidityMessageKey } from '@src/utils/amountValidityMessageKey';
 import { Tracker } from '@src/tracking/Tracker';
 import { useFormModel } from '@src/components/composables/useFormModel';
 import { CustomAmountChangedEvent } from '@src/tracking/events/CustomAmountChangedEvent';
 import { useFormStepShownEvent } from '@src/components/DonationForm/Forms/useFormStepShownEvent';
+import FormPreviousIcon from '@src/components/Icons/FormPreviousIcon.vue';
 
 interface Props {
 	isCurrent: boolean

diff --git a/src/components/DonationForm/Forms/UpgradeToMonthlyForm.vue b/src/components/DonationForm/Forms/UpgradeToMonthlyForm.vue
@@ -1,7 +1,7 @@
 <template>
 	<form @submit.prevent="onSubmit" class="wmde-banner-sub-form wmde-banner-form-upgrade">
 		<a tabIndex="-1" href="#" class="wmde-banner-form-upgrade-back" @click.prevent="onPrevious">
-			<ChevronLeftIcon/>
+			<FormPreviousIcon/>
 		</a>
 		<div class="wmde-banner-form-upgrade-notice">
 			<p><strong>{{ $translate( 'upgrade-to-monthly-header', { amount: secondPageAmountMonthlyFraction } ) }}</strong></p>
@@ -92,12 +92,12 @@ export default {
 import { inject, ref, watch } from 'vue';
 import { useFormModel } from '@src/components/composables/useFormModel';
 import { Validity } from '@src/utils/FormModel/Validity';
-import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
 import { Intervals } from '@src/utils/FormItemsBuilder/fields/Intervals';
 import { Currency } from '@src/utils/DynamicContent/formatters/Currency';
 import { Tracker } from '@src/tracking/Tracker';
 import { UpgradeToMonthlyEvent } from '@src/tracking/events/UpgradeToMonthlyEvent';
 import { useFormStepShownEvent } from '@src/components/DonationForm/Forms/useFormStepShownEvent';
+import FormPreviousIcon from '@src/components/Icons/FormPreviousIcon.vue';
 
 interface AmountSuggestion {
 	lowerRangeLimit: number,

diff --git a/src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue b/src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue
@@ -3,7 +3,7 @@
         <div class="wmde-banner-form-upgrade-title">
             <a tabIndex="-1" href="#" class="previous" @click.prevent="onPrevious">
 				<slot name="back">
-					<ChevronLeftIcon/>
+					<FormPreviousIcon/>
 				</slot>
             </a>
             {{ $translate( 'upgrade-to-yearly-header', { amount: secondPageAmount } ) }}
@@ -50,7 +50,7 @@ import { Currency } from '@src/utils/DynamicContent/formatters/Currency';
 import { useFormStepShownEvent } from '@src/components/DonationForm/Forms/useFormStepShownEvent';
 import { Tracker } from '@src/tracking/Tracker';
 import { UpgradeToYearlyEvent } from '@src/tracking/events/UpgradeToYearlyEvent';
-import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
+import FormPreviousIcon from '@src/components/Icons/FormPreviousIcon.vue';
 
 interface Props {
 	isCurrent: boolean;

diff --git a/src/components/DonationForm/Forms/UpgradeToYearlyForm.vue b/src/components/DonationForm/Forms/UpgradeToYearlyForm.vue
@@ -1,7 +1,7 @@
 <template>
 	<form @submit.prevent="onSubmit" class="wmde-banner-sub-form wmde-banner-form-upgrade">
 		<a tabIndex="-1" href="#" class="wmde-banner-form-upgrade-back" @click.prevent="onPrevious">
-			<ChevronLeftIcon/>
+			<FormPreviousIcon/>
 		</a>
 		<div class="wmde-banner-form-upgrade-notice">
 			<p><strong>{{ $translate( 'upgrade-to-yearly-header', { amount: secondPageAmount } ) }}</strong></p>
@@ -92,12 +92,12 @@ export default {
 import { computed, inject, ref } from 'vue';
 import { useFormModel } from '@src/components/composables/useFormModel';
 import { Validity } from '@src/utils/FormModel/Validity';
-import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
 import { Intervals } from '@src/utils/FormItemsBuilder/fields/Intervals';
 import { Currency } from '@src/utils/DynamicContent/formatters/Currency';
 import { Tracker } from '@src/tracking/Tracker';
 import { UpgradeToYearlyEvent } from '@src/tracking/events/UpgradeToYearlyEvent';
 import { useFormStepShownEvent } from '@src/components/DonationForm/Forms/useFormStepShownEvent';
+import FormPreviousIcon from '@src/components/Icons/FormPreviousIcon.vue';
 
 interface Props {
 	isCurrent: boolean

diff --git a/src/components/Icons/ChevronLeftIcon.vue b/src/components/Icons/ChevronLeftIcon.vue
@@ -4,12 +4,6 @@
 		15.7575C7.74401 16.0888 8.28382 16.0794 8.60343 15.7369L8.77734 15.5506C9.08027 15.2259 9.07325
 		14.7201 8.76143 14.4039L2.63553 8.19386C2.5295 8.08638 2.5295 7.91362 2.63553 7.80614L8.76143
 		1.59605C9.07325 1.27995 9.08027 0.774089 8.77734 0.449448L8.60343 0.263065C8.28382 -0.0794487
-		7.74401 -0.0887552 7.41279 0.242538L0.242482 7.41446Z" :fill="fill"/>
+		7.74401 -0.0887552 7.41279 0.242538L0.242482 7.41446Z" style="fill: var( --slider-chevron );"/>
 	</svg>
 </template>
-
-<script setup lang="ts">
-
-withDefaults( defineProps<{fill?: string}>(), { fill: `var( --slider-chevron )` } );
-
-</script>
diff --git a/src/components/Icons/ChevronRightIcon.vue b/src/components/Icons/ChevronRightIcon.vue
@@ -4,12 +4,6 @@
 		-0.088754 0.71618 -0.079448 0.396574 0.263065L0.222655 0.449448C-0.080274 0.77409 -0.0732549 1.27995
 		0.238566 1.59605L6.36447 7.80614C6.4705 7.91362 6.4705 8.08638 6.36447 8.19386L0.238567 14.4039C-0.0732528
 		14.7201 -0.0802727 15.2259 0.222656 15.5506L0.396575 15.7369C0.716182 16.0794 1.25599 16.0888 1.58721
-		15.7575L8.75752 8.58554Z" :fill="fill"/>
+		15.7575L8.75752 8.58554Z" style="fill: var( --slider-chevron );"/>
 	</svg>
 </template>
-
-<script setup lang="ts">
-
-withDefaults( defineProps<{fill?: string}>(), { fill: `var( --slider-chevron )` } );
-
-</script>
diff --git a/src/components/Icons/FormPreviousIcon.vue b/src/components/Icons/FormPreviousIcon.vue
@@ -0,0 +1,9 @@
+<template>
+	<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M0.242482 7.41446C-0.0808273 7.73785 -0.0808275 8.26215 0.242482 8.58554L7.41279
+		15.7575C7.74401 16.0888 8.28382 16.0794 8.60343 15.7369L8.77734 15.5506C9.08027 15.2259 9.07325
+		14.7201 8.76143 14.4039L2.63553 8.19386C2.5295 8.08638 2.5295 7.91362 2.63553 7.80614L8.76143
+		1.59605C9.07325 1.27995 9.08027 0.774089 8.77734 0.449448L8.60343 0.263065C8.28382 -0.0794487
+		7.74401 -0.0887552 7.41279 0.242538L0.242482 7.41446Z" style="fill: var( --previous-button-fill );"/>
+	</svg>
+</template>
diff --git a/src/themes/Svingle/swatches/color_dark.scss b/src/themes/Svingle/swatches/color_dark.scss
@@ -51,6 +51,7 @@ $blue800: #20303f;
 	--button-close-fill: #{$grey600};
 	--button-background: #{$blue700};
 	--button-color: #{$white};
+	--previous-button-fill: #{$white};
 
 	--footer-color: #{$grey100};
 	--input-selection-color: #{$grey100};

diff --git a/src/themes/Treedip/swatches/color_dark.scss b/src/themes/Treedip/swatches/color_dark.scss
@@ -46,6 +46,7 @@ $blue800: #20303f;
 	--button-close-fill: #{$grey600};
 	--button-background: #{$blue700};
 	--button-color: #{$white};
+	--previous-button-fill: #{$white};
 
 	--footer-color: #{$grey100};
 	--input-selection-color: #{$grey100};

diff --git a/src/themes/Treedip/swatches/color_light.scss b/src/themes/Treedip/swatches/color_light.scss
@@ -42,6 +42,7 @@ $blue700: #2a4b8d;
 	--button-close-fill: #{$grey600};
 	--button-background: #{$blue700};
 	--button-color: #{$white};
+	--previous-button-fill: #{$grey600};
 
 	--footer-color: #{$black};
 	--input-selection-color: #{$black};