Fixed income not in budget remaining bug hopefully

src/components/ExpenseList.js

@@ -102,7 +102,6 @@ const ExpenseList = () => {
 				var row = `<tr>
 								<td>${data1[i]}</td>
 								<td>$${data2[i]}</td>
-								
 						  </tr>`
 				table.innerHTML += row
 	
@@ -117,8 +116,6 @@ const ExpenseList = () => {
 		const transaction_balance = await getTransactionsBalance();
 		const date = await getDate();
 
-			
-
 		setCategories(categories);
 		setTransactions(transaction_balance);
 		setTime(date);
@@ -141,7 +138,7 @@ const ExpenseList = () => {
 			<h4>Recent Transactions</h4>
 			{/* <h4>{category}</h4>
 			<h4>{transaction}</h4>	 */}
-			<table><tbody id="myTable">
+			<table class="table table-striped"><tbody id="myTable">
         
     		</tbody></table>
 			

src/components/ExpenseTotal.js

@@ -23,7 +23,7 @@ const ExpenseTotal = () => {
 	}, [])
 
 	return (
-		<div className='widget'>
+		<div className="widget">
 			<h5 class="textttt">This Month's Expenses:</h5>
 			<img src={logo} class="imageee"></img>
 			<h1 class="displayyyy">${expense}</h1>

src/components/Remaining.js

@@ -55,14 +55,33 @@ export default function Remaining() {
 			console.error(error);
 		  }
 	  }
+	  async function getIncome() {
+		try {
+			const response = await fetch('https://api.bb.gabefarrell.com/w/income/month', {
+			  method: 'GET',
+			  headers: {
+				'x-session-key': getSessionKey(),
+			  },
+			});
+			const data = await response.json();
+			const whole = data.whole;
+			const decimal = data.decimal;
+			const total_expenses = whole + '.' + decimal;
+			console.log(total_expenses + "<- Income By Month"); 
+			return Number(total_expenses);
+		  } catch (error) {
+			console.error(error);
+		  }
+	  }
 	async function fetchBudget() {
             const name = await getBudget();
 			const expenses = await getMonthlyExpenses();
-			const budget_remaining = (name - expenses).toFixed(2);
+			
+			const income = await getIncome();
+			const budget_remaining = (name - expenses + income).toFixed(2);
             setBudget(budget_remaining);
         }
 	useEffect(() => {
-		
         fetchBudget();
 	}, [])
 		

src/components/css/ExpenseList.css

@@ -1,6 +1,6 @@
 td {
     padding-top: 8px;
   padding-bottom: 8px;
-  padding-left: 50px;
+  padding-left: 20px;
   border: 1px solid;
 }