From 4ea78d2838538da33f3bd4041b28bf5ddba224c9 Mon Sep 17 00:00:00 2001
From: Fishbakh-N <54896745+Fishbakh-N@users.noreply.github.com>
Date: Thu, 15 Aug 2024 20:14:36 +0300
Subject: [PATCH] fix: amount text alignment (#412)

---
 .../PaymentProcess/DonationAmount/index.tsx   | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/donate-button-v4/src/components/widget/components/PaymentProcess/DonationAmount/index.tsx b/packages/donate-button-v4/src/components/widget/components/PaymentProcess/DonationAmount/index.tsx
index 04659037..47da47ac 100644
--- a/packages/donate-button-v4/src/components/widget/components/PaymentProcess/DonationAmount/index.tsx
+++ b/packages/donate-button-v4/src/components/widget/components/PaymentProcess/DonationAmount/index.tsx
@@ -20,6 +20,7 @@ import {verticalStackCss, Spacing} from 'src/components/widget/theme/spacing';
 import {DEFAULT_CURRENCY} from 'src/constants/currency';
 import css from 'src/helpers/css';
 import {isTouchDevice} from 'src/helpers/isTouchDevice';
+import joinClassNames from 'src/helpers/joinClassNames';
 
 const preventDecimal = (
 	event: JSXInternal.TargetedEvent<HTMLInputElement, KeyboardEvent>
@@ -60,7 +61,12 @@ const abbreviateNumber = (n: number, significantDigits?: number): string => {
 export const DonationAmount = () => {
 	const inputRef = useRef<HTMLInputElement>(null);
 
-	const {primaryColor, addAmounts, amount: fixedAmount} = useConfigContext();
+	const {
+		primaryColor,
+		addAmounts,
+		amount: fixedAmount,
+		frequency: fixedFrequency
+	} = useConfigContext();
 
 	const {setDonationAmount, donationAmount, setSubmitError, submitError} =
 		useWidgetContext();
@@ -86,7 +92,16 @@ export const DonationAmount = () => {
 				})}
 			>
 				<legend className={legendCss}>Donation amount</legend>
-				<p className={fixedAmountsCss}>${fixedAmount}</p>
+				<p
+					className={joinClassNames([
+						fixedAmountsCss,
+						css({
+							textAlign: fixedFrequency ? 'left' : 'center'
+						})
+					])}
+				>
+					${fixedAmount}
+				</p>
 			</fieldset>
 		);
 	}