From ee114ea3aa5dd2a00151655a7bc5cddea9a65d74 Mon Sep 17 00:00:00 2001
From: jveebs <83558932+jveebs@users.noreply.github.com>
Date: Sun, 23 Apr 2023 17:39:15 -0400
Subject: [PATCH] Jake's stuff

---
 src/components/LoanCalculator.js | 32 ++++++++++++++++----------------
 src/pages/Dashboard.jsx          |  7 +++++--
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/LoanCalculator.js b/src/components/LoanCalculator.js
index 8f2983e..8d08aa2 100644
--- a/src/components/LoanCalculator.js
+++ b/src/components/LoanCalculator.js
@@ -25,22 +25,22 @@ const LoanCalculator = () => {
     }, [monthlyPayment]);
 
     return (
-        <>
-        <h4 className="mb-5">Loan Calculator</h4>
-
-        <form onSubmit={(event) => event.preventDefault()}>
-            <FormInputGroup text="Loan Amount $" placeholder="Enter the value of the loan" value={loanAmount} onInput={(event) => setLoanAmount(event.target.value)}/>
-            <FormInputGroup text="Interest Rate %" placeholder="Enter interest rate of the loan" value={interestRate} onInput={(event) => setInterestRate(event.target.value)}/>
-            <FormInputGroup text="Loan Duration in Years" placeholder="Enter the duration of the loan in years" value={loanDuration} onInput={(event) => setLoanDuration(event.target.value)}/>
-            
-            <h4 className="alert alert-info fw-bold">
-                Monthly Payment: ${parseFloat(monthlyPayment.toFixed(2))}
-                <h5 className="mt-4">Principal Paid: ${loanAmount}</h5>
-                <h5>Interest Paid: ${parseFloat(interestPaid.toFixed(2))}</h5>
-            </h4>
-            <button type="submit" className="btn btn-primary btn-lg w-100 mt-3 center" onClick={calculateMonthlyPayment}>Calculate</button>
-        </form>
-        </>
+        <div className="widget">
+            <h4 className="mb-5">Loan Calculator</h4>
+
+            <form onSubmit={(event) => event.preventDefault()}>
+                <FormInputGroup text="Loan Amount $" placeholder="Enter the value of the loan" value={loanAmount} onInput={(event) => setLoanAmount(event.target.value)}/>
+                <FormInputGroup text="Interest Rate %" placeholder="Enter interest rate of the loan" value={interestRate} onInput={(event) => setInterestRate(event.target.value)}/>
+                <FormInputGroup text="Loan Duration in Years" placeholder="Enter the duration of the loan in years" value={loanDuration} onInput={(event) => setLoanDuration(event.target.value)}/>
+                
+                <h4 className="alert alert-info fw-bold">
+                    Monthly Payment: ${parseFloat(monthlyPayment.toFixed(2))}
+                    <h5 className="mt-4">Principal Paid: ${loanAmount}</h5>
+                    <h5>Interest Paid: ${parseFloat(interestPaid.toFixed(2))}</h5>
+                </h4>
+                <button type="submit" className="btn btn-primary btn-lg w-100 mt-3 center" onClick={calculateMonthlyPayment}>Calculate</button>
+            </form>
+        </div>
     )
 };
 
diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index 5837a92..3190118 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -42,10 +42,13 @@ export default function Dashboard() {
 				</div>
 
 				<div className='row mt-3'>
-					<div className='col-12 col-lg-6'>
+					<div className='col-12 col-md-12 col-lg-4'>
+						<LoanCalculator/>
+					</div>
+					<div className='col-12 col-lg-4'>
 						<CategorizedExpenses/>
 					</div>
-					<div className='col-12 col-lg-6'>
+					<div className='col-12 col-lg-4'>
 						<CategorizedIncome/>
 					</div>
 				</div>