Making Widgets Look Nice 1.0

src/components/AddExpenseForm.css

@@ -0,0 +1,41 @@
+/* Dropdown Button */
+.dropbtn {
+    background-color: #04AA6D;
+    color: white;
+    padding: 16px;
+    font-size: 16px;
+    border: none;
+  }
+  
+  /* The container <div> - needed to position the dropdown content */
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+  
+  /* Dropdown Content (Hidden by Default) */
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f1f1f1;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+  }
+  
+  /* Links inside the dropdown */
+  .dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+  }
+  
+  /* Change color of dropdown links on hover */
+  .dropdown-content a:hover {background-color: #ddd;}
+  
+  /* Show the dropdown menu on hover */
+  .dropdown:hover .dropdown-content {display: block;}
+  
+  /* Change the background color of the dropdown button when the dropdown content is shown */
+  .dropdown:hover .dropbtn {background-color: #3e8e41;}

src/components/AddExpenseForm.js

@@ -1,6 +1,7 @@
 import React, { useContext, useState } from 'react';
 import { AppContext } from '../context/AppContext';
 import { v4 as uuidv4 } from 'uuid';
+import './AddExpenseForm.css'
 
 const AddExpenseForm = (props) => {
 	const { dispatch } = useContext(AppContext);
@@ -27,7 +28,21 @@ const AddExpenseForm = (props) => {
 
 	return (
 		<form onSubmit={onSubmit}>
-			<div class='row'>
+			<div class='row alert alert-secondary'>
+				{/* <div class='col-sm col-lg-4'>
+				<form for="name">
+				<label >Choose a category:</label>
+					<select>
+						<option required='required'
+						type='text'
+						class='form-control'
+						id='name'
+						value={name}
+						onChange={(event) => setName(event.target.value)}>Rent</option>
+					</select>
+				</form>
+				</div> */}
+				<h3>Add Expense</h3>
 				<div class='col-sm col-lg-4'>
 					<label for='name'>Name</label>
 					<input
@@ -37,8 +52,9 @@ const AddExpenseForm = (props) => {
 						id='name'
 						value={name}
 						onChange={(event) => setName(event.target.value)}
-					/>
-				</div>
+					></input>
+				
+				</div>  
 				<div class='col-sm col-lg-4'>
 					<label for='cost'>Cost</label>
 					<input
@@ -50,14 +66,14 @@ const AddExpenseForm = (props) => {
 						onChange={(event) => setCost(event.target.value)}
 					/>
 				</div>
-			</div>
 			<div class='row mt-3'>
 				<div class='col-sm'>
 					<button type='submit' class='btn btn-primary'>
 						Save
 					</button>
 				</div>
-			</div>
+			</div></div>
+			
 		</form>
 	);
 };

src/components/AddIncome.js

@@ -0,0 +1,54 @@
+import React, { useContext, useState } from 'react';
+import { AppContext } from '../context/AppContext';
+import { v4 as uuidv4 } from 'uuid';
+
+const AddExpenseForm = (props) => {
+	const { dispatch } = useContext(AppContext);
+
+	const [name, setName] = useState('');
+	const [cost, setCost] = useState('');
+
+	const onSubmit = (event) => {
+		event.preventDefault();
+		const expense = {
+			id: uuidv4(),
+			name,
+			cost: parseInt(cost),
+		};
+
+		dispatch({
+			type: 'ADD_EXPENSE',
+			payload: expense,
+		});
+
+		setName('');
+		setCost('');
+	};
+
+	return (
+		<form onSubmit={onSubmit}>
+			<div class='row'>
+				<div class='col-lg-3'>
+					<label for='cost'>Income</label>
+					<input
+						required='required'
+						type='number'
+						class='form-control'
+						id='cost'
+						value={cost}
+						onChange={(event) => setCost(event.target.value)}
+					/>
+				</div>
+			</div>
+			<div class='row mt-3'>
+				<div class='col-sm'>
+					<button type='submit' class='btn btn-primary'>
+						Save
+					</button>
+				</div>
+			</div>
+		</form>
+	);
+};
+
+export default AddExpenseForm;

src/components/ExpenseList.js

@@ -20,12 +20,12 @@ const ExpenseList = () => {
 
 	return (
 		<>
-			<input
+			{/* <input
 				type='text'
 				class='form-control mb-2 mr-sm-2'
 				placeholder='Type to search...'
 				onChange={handleChange}
-			/>
+			/>  */}
 			<ul class='list-group mt-3 mb-3'>
 				{filteredExpenses.map((expense) => (
 					<ExpenseItem

src/components/ExpenseTotal.js

@@ -1,5 +1,7 @@
 import React, { useContext } from 'react';
 import { AppContext } from '../context/AppContext';
+import logo from './widget_logos/expenses_logo.png';
+import './css/ExpenseTotal.css'
 
 const ExpenseTotal = () => {
 	const { expenses } = useContext(AppContext);
@@ -10,6 +12,7 @@ const ExpenseTotal = () => {
 
 	return (
 		<div class='alert alert-secondary p-4'>
+			<img src={logo}></img>
 			<span>This Month's Expenses: ${total}</span>
 		</div>
 	);

src/components/Remaining.js

@@ -1,5 +1,7 @@
 import React, { useContext } from 'react';
 import { AppContext } from '../context/AppContext';
+import logo from './widget_logos/budget_logo.png';
+import './css/Remaining.css'
 
 const RemainingBudget = () => {
 	const { expenses, budget } = useContext(AppContext);
@@ -12,6 +14,7 @@ const RemainingBudget = () => {
 
 	return (
 		<div class={`alert p-4 ${alertType}`}>
+			<img src={logo}></img> 
 			<span>Budget Remaining: ${budget - totalExpenses}</span>
 		</div>
 	);

src/components/ViewBudget.js

@@ -1,8 +1,11 @@
 import React from 'react';
+import './css/ViewBudget.css'
+import logo from './widget_logos/current_balance_logo.png';
 
 const ViewBudget = (props) => {
 	return (
 		<>
+			<img src={logo}></img> 
 			<span>Current Balance: ${props.budget}</span>
 			<button type='button' class='btn btn-primary' onClick={props.handleEditClick}>
 				Edit

src/components/budget.js

@@ -20,7 +20,7 @@ const Budget = () => {
 	};
 
 	return (
-		<div class='alert alert-secondary p-3 d-flex align-items-center justify-content-between'>
+		<div class='alert alert-secondary d-flex align-items-center justify-content-between'>
 			{isEditing ? (
 				<EditBudget handleSaveClick={handleSaveClick} budget={budget} />
 			) : (

src/components/css/Remaining.css

@@ -0,0 +1,3 @@
+img {
+    width: 50px;
+}

src/components/css/ViewBudget.css

@@ -0,0 +1,4 @@
+span {
+    float: right;
+    margin-right: 50px;
+}

src/context/AppContext.js

@@ -29,11 +29,8 @@ export const AppReducer = (state, action) => {
 const initialState = {
 	budget: 2000,
 	expenses: [
-		{ id: uuidv4(), name: 'Groceries', cost: 50 },
-		{ id: uuidv4(), name: 'Leisure', cost: 300 },
-		{ id: uuidv4(), name: 'Pet', cost: 70 },
-		{ id: uuidv4(), name: 'Gas', cost: 40 },
-		{ id: uuidv4(), name: 'Rent', cost: 500 },
+		
+		
 	],
 };
 

src/pages/Dashboard.jsx

@@ -7,6 +7,7 @@ import ExpenseTotal from '../components/ExpenseTotal';
 import ExpenseList from '../components/ExpenseList';
 import AddExpenseForm from '../components/AddExpenseForm';
 import RemainingBudget from '../components/Remaining';
+import AddIncome from '../components/AddIncome'
 
 export default function Dashboard() {
   return (
@@ -24,18 +25,23 @@ export default function Dashboard() {
 						<ExpenseTotal />
 					</div>
 				</div>
-				<h3 className='mt-3'>Expenses</h3>
-				<div className='row '>
-					<div className='col-sm'>
-						<ExpenseList />
+				
+				<div className='row mt-3'>
+					<div className='col-sm alert alert-secondary'>
+						<h3 className='mt-3'>Expenses</h3><ExpenseList />
 					</div>
 				</div>
-				<h3 className='mt-3'>Add Expense</h3>
 				<div className='row mt-3'>
 					<div className='col-sm'>
 						<AddExpenseForm />
 					</div>
 				</div>
+				
+				<div className='row mt-3'>
+					<div className='col-sm'>
+						{/*<h3 className='mt-3'>Add Income</h3><AddIncome /> */}
+					</div>
+				</div>
 			</div>
 		</AppProvider>
 	);