Skip to content

feat: Standardize Header Controls - Login, Wishlist, and Cart Button Consistency #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
04shubham7 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: Standardize Header Controls - Login, Wishlist, and Cart Button Consistency #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified client/src/asset/icons/user1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
51 changes: 32 additions & 19 deletions client/src/components/Nav/Controls/Control.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,52 @@

/* Control.css */

.control__bar__container {
height: auto;
width: 200px;
margin: auto;
width: auto; /* Allow width to be determined by content or parent */
margin: auto; /* This centers the container if its parent allows */
display: flex;
justify-content: center;
justify-content: flex-end; /* Align the controls to the right of the header */
align-items: center;
position: relative;
z-index: 1000;
padding-right: 15px; /* Adds space from the right edge of the viewport/parent */
}

.controls__container {
display: flex;
justify-content: space-around;
justify-content: flex-end; /* Align items to the right within this inner container */
align-items: center;
flex-direction: row;
width: 80%;
height: 50px;
width: auto; /* Allow width to be determined by content */
height: 50px; /* Keep consistent height for the bar containing controls */
gap: 10px; /* This adds 10px spacing BETWEEN the LOGIN, Heart, and Cart buttons */
/* Adjust this 'gap' value as needed to get your desired separation */
}

/* The .control class is now effectively redundant for styling the buttons themselves.
You can remove it entirely or keep it only if it serves some other non-visual purpose
(e.g., a common selector for JavaScript events not tied to the Button component).
For visual styling, stick to Mui Button's sx prop. */

/* If you delete the .control class from your JSX, you can remove this CSS block */
/*
.control {
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
border-style: solid;
border-color: #FFE26E;
border-radius: 10px;
cursor: pointer;
margin: 5px;
// These styles are now handled by the Mui Button's sx prop
// width: 45px;
// height: 45px;
// display: flex;
// justify-content: center;
// align-items: center;
// border-style: solid;
// border-color: #FFE26E;
// border-radius: 10px;
// cursor: pointer;
// margin: 5px; // Replaced by 'gap' on controls__container
}

.control:hover {
background-color: #FFE26E;
color: black;
// Handled by Mui Button's sx prop hover state
// background-color: #FFE26E;
// color: black;
}
*/
112 changes: 92 additions & 20 deletions client/src/components/Nav/Controls/Control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,109 @@
import './Control.css'
import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
import './Control.css' // Keep your custom CSS file for overall layout
// REMOVED: import PersonOutlineIcon from '@mui/icons-material/PersonOutline'; // Remove if not used elsewhere
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined'; // Assuming this is your cart icon, ensure it's imported
import Badge from '@mui/material/Badge';
import { Link } from 'react-router-dom';
import Cart from '../../Card/Cart/Cart';
// REMOVED: import Cart from '../../Card/Cart/Cart'; // We'll use a direct icon for consistency unless Cart handles more
import { useContext } from 'react';
import { WishItemsContext } from '../../../Context/WishItemsContext';

// Import Material-UI components
import Button from '@mui/material/Button';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
import Box from '@mui/material/Box'; // For flexible container and spacing

const Control = () => {
const wishItems = useContext(WishItemsContext)
const wishItems = useContext(WishItemsContext);
// If you have a CartContext for the badge, uncomment and import:
// const cartItems = useContext(CartContext);

// Define common button styles using a single object for consistency
const commonButtonStyle = {
backgroundColor: '#FFE082', // Yellowish background color
color: 'black', // Text/icon color
borderRadius: '15px', // Rounded corners
border: '1px solid #FFC107', // Border to mimic the outline
minWidth: 'unset', // Allow button to shrink to content
height: '45px', // Consistent height for all buttons
display: 'flex', // Use flex to center content
alignItems: 'center', // Center content vertically
justifyContent: 'center', // Center content horizontally
'&:hover': {
backgroundColor: '#FFD700', // Slightly darker yellow on hover
// You might want to remove the border on hover if it looks better:
// border: '1px solid #FFD700',
},
};

// Styles for buttons that only contain an icon (Heart and Cart)
const iconButtonStyle = {
...commonButtonStyle, // Inherit common styles
width: '45px', // Make them square
padding: '0', // No internal padding for icon-only buttons
};

return (
return (
<div className="control__bar__container">
<div className="controls__container">
<div className="control">
<Link to="/account/login">
<PersonOutlineIcon color="black" size="large" sx={{ width: '35px'}}/>

{/* LOGIN Button */}
{/* Wrap in Box if you need individual item spacing not handled by gap on controls__container */}
<Box>
<Link to="/account/login" style={{ textDecoration: 'none' }}>
<Button
variant="contained"
sx={{
...commonButtonStyle, // Apply base styles
padding: '6px 15px', // Specific padding for text+icon button to make it wider
}}
startIcon={<LockOutlinedIcon sx={{ color: 'black' }} />}
>
LOGIN
</Button>
</Link>
</Box>

{/* Wishlist Button (Heart Icon) */}
<Box>
<Link to="/wishlist" style={{ textDecoration: 'none' }}>
<Badge badgeContent={wishItems.items.length} color="error" overlap="circular">
<Button
variant="contained"
sx={iconButtonStyle} // Apply square icon button styles
aria-label="Wishlist" // Good for accessibility
>
<FavoriteBorderIcon sx={{ color: 'black', fontSize: '24px' }}/>
</Button>
</Badge>
</Link>
</div>
<div className="control">
<Link to="/wishlist">
<Badge badgeContent={wishItems.items.length} color="error">
<FavoriteBorderIcon color="black" sx={{ width: '35px'}}/>
</Box>

{/* Cart Button (Shopping Cart Icon) */}
<Box>
{/* Assuming '/cart' is the path for the cart page */}
<Link to="/cart" style={{ textDecoration: 'none' }}>
<Badge
badgeContent={/* cartItems.items.length || */ 0} // Replace 0 with actual cart item count
color="error"
overlap="circular"
showZero // Show badge even if count is 0
>
<Button
variant="contained"
sx={iconButtonStyle} // Apply square icon button styles
aria-label="Shopping Cart" // Good for accessibility
>
{/* Using ShoppingCartOutlinedIcon directly for consistency */}
<ShoppingCartOutlinedIcon sx={{ color: 'black', fontSize: '24px' }}/>
</Button>
</Badge>
</Link>
</div>
<div className="control">
<Cart />
</div>

</Box>

</div>
</div>
);
);
}

export default Control;