Add text about legal fees and outalys, and make set loan to max butto…

…n clearer
UniqueClone · Jul 29, 2024 · 2941921 · 2941921
1 parent 2af7b26
commit 2941921
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 15 deletions.
diff --git a/src/components/FeesPanel/FeesPanel.tsx b/src/components/FeesPanel/FeesPanel.tsx
@@ -64,14 +64,17 @@ export const FeesPanel: React.FC<FeesPanelProps> = (props: FeesPanelProps) => {
                     style={{
                         fontWeight: "600",
                         fontSize: "1rem",
-                        margin: "2rem 0 0 0",
+                        marginTop: "2.5rem",
+                        marginBottom: "0rem",
                     }}
                 >
                     Legal Fees and Outlays
                 </h2>
 
                 <Text variant="medium">
-                    This is some text about legal fees and outlays.
+                    An outlay is money spent by the solicitor on your behalf in
+                    the conveyancing process e.g. land registry fees. Your legal
+                    fees are your solicitor fees.
                 </Text>
 
                 <TextField

diff --git a/src/components/MortgageDetails/MortgageDetails.tsx b/src/components/MortgageDetails/MortgageDetails.tsx
@@ -123,23 +123,40 @@ export const MortgageDetails: React.FC<MortgageDetailsProps> = (
                 />
             </Stack.Item>
 
-            <Stack.Item grow>
+            <Stack.Item
+                grow
+                style={{
+                    margin: "0.5rem 0 0 0",
+                }}
+            >
+                <Text variant="xxLarge">OR</Text>
+            </Stack.Item>
+
+            <Stack.Item
+                grow
+                style={{
+                    margin: "0.5rem 0 0 0",
+                }}
+            >
+                <PrimaryButton
+                    onClick={() =>
+                        setLoanAmountToMax(houseValue, maxLoan, setLoanAmount)
+                    }
+                >
+                    Set loan to max
+                </PrimaryButton>{" "}
                 <TooltipHost
                     className="tooltip"
-                    content="The maximum loan amount you can borrow is 90% of the house value, or the max loan amount you have set."
+                    content="This is 90% of the house value, unless you have set a maximum loan amount above that is less than 90% of the house value. In that case, the maximum loan amount will be used."
                     directionalHint={5}
                 >
-                    <PrimaryButton
-                        onClick={() =>
-                            setLoanAmountToMax(
-                                houseValue,
-                                maxLoan,
-                                setLoanAmount
-                            )
-                        }
-                    >
-                        Set loan to max
-                    </PrimaryButton>
+                    <Icon
+                        iconName="Info"
+                        style={{
+                            fontSize: "0.85rem",
+                            color: "lightgreen",
+                        }}
+                    />
                 </TooltipHost>
             </Stack.Item>