gabehf/BudgetBuddy
1
0
Fork 0
mirror of https://github.com/gabehf/BudgetBuddy.git synced 2026-03-08 23:18:15 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Nav fixes & Error messages

Browse source
This commit is contained in:
jveebs 2023-04-13 14:04:39 -04:00
parent 077e515dfb
commit edf43f30da
21 changed files with 135 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/components/AddExpenseForm.js
View file

@ -28,14 +28,14 @@ const AddExpenseForm = (props) => {
return (
<form onSubmit={onSubmit}>
<div class='row alert alert-secondary'>
{/* <div class='col-sm col-lg-4'>
<form for="name">
<div className='row alert alert-secondary'>
{/* <div className='col-sm col-lg-4'>
<form htmlFor="name">
<label >Choose a category:</label>
<select>
<option required='required'
type='text'
class='form-control'
className='form-control'
id='name'
value={name}
onChange={(event) => setName(event.target.value)}>Rent</option>
@ -43,32 +43,32 @@ const AddExpenseForm = (props) => {
</form>
</div> */}
<h3>Add Expense</h3>
<div class='col-sm col-lg-4'>
<label for='name'>Name</label>
<div className='col-sm col-lg-4'>
<label htmlFor='name'>Name</label>
<input
required='required'
type='text'
class='form-control'
className='form-control'
id='name'
value={name}
onChange={(event) => setName(event.target.value)}
></input>
</div>
<div class='col-sm col-lg-4'>
<label for='cost'>Cost</label>
<div className='col-sm col-lg-4'>
<label htmlFor='cost'>Cost</label>
<input
required='required'
type='number'
class='form-control'
className='form-control'
id='cost'
value={cost}
onChange={(event) => setCost(event.target.value)}
/>
</div>
<div class='row mt-3'>
<div class='col-sm'>
<button type='submit' class='btn btn-primary'>
<div className='row mt-3'>
<div className='col-sm'>
<button type='submit' className='btn btn-primary'>
Save
</button>
</div>

14
src/components/AddIncome.js
View file

@ -27,22 +27,22 @@ const AddExpenseForm = (props) => {
return (
<form onSubmit={onSubmit}>
<div class='row'>
<div class='col-lg-3'>
<label for='cost'>Income</label>
<div className='row'>
<div className='col-lg-3'>
<label htmlFor='cost'>Income</label>
<input
required='required'
type='number'
class='form-control'
className='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'>
<div className='row mt-3'>
<div className='col-sm'>
<button type='submit' className='btn btn-primary'>
Save
</button>
</div>

4
src/components/EditBudget.js
View file

@ -7,14 +7,14 @@ const EditBudget = (props) => {
<input
required='required'
type='number'
class='form-control mr-3'
className='form-control mr-3'
id='name'
value={value}
onChange={(event) => setValue(event.target.value)}
/>
<button
type='button'
class='btn btn-primary'
className='btn btn-primary'
onClick={() => props.handleSaveClick(value)}
>
Save

4
src/components/ExpenseItem.js
View file

@ -12,10 +12,10 @@ const ExpenseItem = (props) => {
};
return (
<li class='list-group-item d-flex justify-content-between align-items-center'>
<li className='list-group-item d-flex justify-content-between align-items-center'>
{props.name}
<div>
<span class='text-primary badge badge-primary badge-pill mr-3'>${props.cost}</span>
<span className='text-primary badge badge-primary badge-pill mr-3'>${props.cost}</span>
</div>
</li>
);

4
src/components/ExpenseList.js
View file

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

2
src/components/ExpenseTotal.js
View file

@ -11,7 +11,7 @@ const ExpenseTotal = () => {
}, 0);
return (
<div class='alert alert-secondary p-4'>
<div className='alert alert-secondary p-4'>
<img src={logo}></img>
<span>This Month's Expenses: ${total}</span>
</div>

57
src/components/NavBar.js
View file

@ -4,39 +4,28 @@ import { Toolbar, Typography, Button, IconButton, Link } from "@material-ui/core
import AccountCircle from '@mui/icons-material/AccountCircle';
import logo from "../assets/BudgetBuddyLogo.png"
import "./NavBar.css"
import checkLogin from "../utils/utils";
import {checkLogin, getFirstName} from "../utils/utils";
import NavDropdown from 'react-bootstrap/NavDropdown';
export default function NavBar() {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleLogin = () => {
handleClose();
window.location.href='/login';
}
const handleSignup = () => {
handleClose();
window.location.href='/signup';
}
const handleLogout= () => {
handleClose();
document.cookie.split(";").forEach(function(c) { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); });
window.location.href='/welcome';
}
const handleMenu = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<Toolbar position="sticky" className="bar">
<Link href="/" class="nav-brand">
<img src={logo} className="logo"/>
<Link href="/" className="nav-brand">
<img src={logo} className="logo w-100"/>
<Typography
className="nav-header"
variant="h5" >
@ -47,39 +36,17 @@ export default function NavBar() {
{checkLogin()
? // Logged In
<div>
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="inherit" >
<AccountCircle />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorEl)}
onClose={handleClose} >
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleLogout}>Log Out</MenuItem>
</Menu>
<NavDropdown title={`Logged in as ${getFirstName()}`}>
<NavDropdown.Item>Profile</NavDropdown.Item>
<NavDropdown.Item>My account</NavDropdown.Item>
<NavDropdown.Item onClick={handleLogout}>Sign Out</NavDropdown.Item>
</NavDropdown>
</div>
: // Logged Out
<span style={{display: "flex"}}>
<Button onClick={handleLogin}>Login</Button>
<span className="mx-0" style={{display: "flex"}}>
<Button className="mx-0" onClick={handleLogin}>Login</Button>
<p style={{marginTop: "9px"}}>or</p>
<Button onClick={handleSignup}>Signup</Button>
<Button className="mx-0" onClick={handleSignup}>Signup</Button>
</span>
}
</div>

2
src/components/Remaining.js
View file

@ -13,7 +13,7 @@ const RemainingBudget = () => {
const alertType = totalExpenses > budget ? 'alert-danger' : 'alert-success';
return (
<div class={`alert p-4 ${alertType}`}>
<div className={`alert p-4 ${alertType}`}>
<img src={logo}></img>
<span>Budget Remaining: ${budget - totalExpenses}</span>
</div>

8
src/components/SideNav.css
View file

@ -1,3 +1,7 @@
.sidebar {
height: 100vh;
}
.sidebar-header {
display: flex;
align-items: center;
@ -7,4 +11,8 @@
.sidebar-avatar {
justify-content: center;
}
.sidebar-welcome {
font-weight: bold;
}

15
src/components/SideNav.js
View file

@ -5,20 +5,21 @@ import ContactSupportOutlinedIcon from '@mui/icons-material/ContactSupportOutlin
import PrivacyTipOutlinedIcon from '@mui/icons-material/PrivacyTipOutlined';
import SupervisedUserCircleOutlinedIcon from '@mui/icons-material/SupervisedUserCircleOutlined';
import ContactPageOutlinedIcon from '@mui/icons-material/ContactPageOutlined';
import LogoutIcon from '@mui/icons-material/Logout';
import { Avatar, Typography } from '@material-ui/core';
import { Link } from '@material-ui/core';
import { Link, Divider } from '@material-ui/core';
import './SideNav.css'
export default function SideNav() {
return(
<Sidebar backgroundColor='transparent'>
<Sidebar className="sidebar" backgroundColor='transparent' style={{border:"none"}}>
<div className='sidebar-header'>
<div className='sidebar-avatar'>
<Avatar />
</div>
<div className='sidebar-text'>
<Typography variant='h6'>Welcome, Jacob</Typography>
<Typography className='sidebar-welcome' variant='h6'>Welcome, Jacob</Typography>
<Typography variant='subtitle2'> Your Budget Overiew</Typography>
</div>
</div>
@ -40,21 +41,29 @@ export default function SideNav() {
Support
</MenuItem>
*/}
{/*
<MenuItem
component={<Link href="/privacy" />}
icon={<PrivacyTipOutlinedIcon/>}>
Privacy
</MenuItem>
*/}
<MenuItem
component={<Link href="/about-us" />}
icon={<SupervisedUserCircleOutlinedIcon/>}>
About Us
</MenuItem>
{/*
<MenuItem
component={<Link href="/contact-us" />}
icon={<ContactPageOutlinedIcon/>}>
Contact Us
</MenuItem>
*/}
<MenuItem
icon={<LogoutIcon/>}>
Sign Out
</MenuItem>
</Menu>
</Sidebar>
);

2
src/components/ViewBudget.js
View file

@ -7,7 +7,7 @@ const ViewBudget = (props) => {
<>
<img src={logo}></img>
<span>Current Balance: ${props.budget}</span>
<button type='button' class='btn btn-primary' onClick={props.handleEditClick}>
<button type='button' className='btn btn-primary' onClick={props.handleEditClick}>
Edit
</button>
</>

2
src/components/budget.js
View file

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

5
src/components/css/ViewBudget.css
View file

@ -1,4 +1,7 @@
/* MAKE SURE TO BE SPECIFIC WITH STYLING CUZ THIS CHANGED DIFFERENT SPANS
span {
float: right;
margin-right: 50px;
}
}
*/