diff --git a/src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx b/src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx index 1ece2df..4827f92 100644 --- a/src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx +++ b/src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx @@ -59,27 +59,33 @@ const OptionSection: React.FC<{ onChange={(e) => setHousePrice(parseInt(e.target.value))} /> -

House Price: {formatter.format(housePrice)}

+

+ House Price:

{formatter.format(housePrice)}

+

Monthly Payment:{" "} - {formatter.format( - getMonthlyPayment( - housePrice * 0.9, - option.interestRate, - option.mortgageTerm - ) - )} +

+ {formatter.format( + getMonthlyPayment( + housePrice * 0.9, + option.interestRate, + option.mortgageTerm + ) + )} +

Savings Required:{" "} - {formatter.format( - housePrice * option.depositPercentage + - option.fees.valuationFee + - option.fees.surveyFee + - option.fees.legalFee + - housePrice * 0.01 + // stamp duty - option.fees.searchFee - )} +

+ {formatter.format( + housePrice * option.depositPercentage + + option.fees.valuationFee + + option.fees.surveyFee + + option.fees.legalFee + + housePrice * 0.01 + // stamp duty + option.fees.searchFee + )} +

); diff --git a/src/components/MortgageCalculator/MortgageCalculator.css b/src/components/MortgageCalculator/MortgageCalculator.css index c33cc83..543b176 100644 --- a/src/components/MortgageCalculator/MortgageCalculator.css +++ b/src/components/MortgageCalculator/MortgageCalculator.css @@ -75,5 +75,7 @@ h2 { h3 { font-size: large; - color: lightgreen + p { + color: lightgreen + } } \ No newline at end of file