Improving comparison styling

UniqueClone · Jun 6, 2024 · 6655f22 · 6655f22
1 parent 9a708ff
commit 6655f22
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 17 deletions.
diff --git 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))}
                 />
             </label>
-            <h3>House Price: {formatter.format(housePrice)}</h3>
+            <h3>
+                House Price: <p>{formatter.format(housePrice)}</p>
+            </h3>
             <h3>
                 Monthly Payment:{" "}
-                {formatter.format(
-                    getMonthlyPayment(
-                        housePrice * 0.9,
-                        option.interestRate,
-                        option.mortgageTerm
-                    )
-                )}
+                <p>
+                    {formatter.format(
+                        getMonthlyPayment(
+                            housePrice * 0.9,
+                            option.interestRate,
+                            option.mortgageTerm
+                        )
+                    )}
+                </p>
             </h3>
             <h3>
                 Savings Required:{" "}
-                {formatter.format(
-                    housePrice * option.depositPercentage +
-                        option.fees.valuationFee +
-                        option.fees.surveyFee +
-                        option.fees.legalFee +
-                        housePrice * 0.01 + // stamp duty
-                        option.fees.searchFee
-                )}
+                <p>
+                    {formatter.format(
+                        housePrice * option.depositPercentage +
+                            option.fees.valuationFee +
+                            option.fees.surveyFee +
+                            option.fees.legalFee +
+                            housePrice * 0.01 + // stamp duty
+                            option.fees.searchFee
+                    )}
+                </p>
             </h3>
         </div>
     );

diff --git 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
+    }
 }