Merge pull request #36 from UniqueClone/main

Add text about legal fees and outlays, and make set loan to max button clearer
UniqueClone · Jul 29, 2024 · cee1a79 · cee1a79
2 parents b17829c + 2941921
commit cee1a79
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -1,12 +1,13 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Irish Mortgage Calculator</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/public/abacus.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Irish Mortgage Calculator</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
 </html>
diff --git a/public/abacus.png b/public/abacus.png
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/MortgageComparison/MortgageComparison.tsx b/src/components/MortgageComparison/MortgageComparison.tsx
@@ -119,8 +119,9 @@ export const MortgageComparison: React.FC<MortgageComparisonProps> = () => {
             <Text variant="medium">
                 If you found this useful, consider{" "}
                 <Link
-                    target="_blank"
                     href="https://www.buymeacoffee.com/ryanlynch"
+                    style={{ color: "rgb(33, 171, 56)" }}
+                    target="_blank"
                 >
                     buying me a coffee! <Icon iconName="CoffeeScript" />{" "}
                 </Link>

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>