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

[04shubham7]

Description:
This pull request addresses the visual inconsistency of the header control elements (Login, Wishlist, and Cart) by refactoring them to use a standardized Material-UI Button component with a unified design. Previously, the "Login" element was a simple icon, while "Wishlist" and "Cart" were also icons within custom-styled div wrappers.

This change significantly improves the user interface's aesthetic consistency and user experience in the header section.

Key Changes & Improvements:

• Unified Component Usage: All three header controls (Login, Wishlist, Cart) are now rendered using Material-UI's Button component for consistency.
• Consistent Styling:
  • Applied a uniform backgroundColor (#FFE082), borderRadius (15px), and border (1px solid #FFC107) across all three buttons.
  • Implemented a consistent hover effect (#FFD700 background) for all buttons.
  • The "Login" button includes a LockOutlinedIcon as a startIcon.
  • "Wishlist" and "Cart" now display FavoriteBorderIcon and ShoppingCartOutlinedIcon respectively, inheriting the same button styling.
• Improved Spacing:
  • Refactored the controls__container CSS to utilize the gap property for consistent spacing between the buttons, replacing individual element margins.
  • Adjusted the overall positioning and padding of the control__bar__container to ensure proper alignment and spacing from the right edge of the header.
• Code Cleanliness & Maintainability:
  • Removed redundant custom CSS rules (.control class) that were previously styling icon wrappers, as Mui Button's sx prop now handles visual styling effectively.
  • Removed unused icon imports (PersonOutlineIcon).
  • Replaced the <Cart /> component with ShoppingCartOutlinedIcon within the button for visual consistency, assuming Cart was primarily rendering the icon. (If Cart had more complex functionality like a dropdown, this might need further consideration, but for header button consistency, this works.)
• Accessibility: Buttons are inherently more accessible than simple divs/icons when conveying interactive elements. aria-label has been added for improved screen reader support.

Visual Impact (refer to attached screenshots):

• Before: Inconsistent "Login" icon with PersonOutlineIcon, differing from "Wishlist" and "Cart" container styles. Potential PersonOutlineIcon showing behind the new "LOGIN" button.
• After (image_3097b6.jpg, image_3097b8.png): All three header controls now appear as visually cohesive, rounded-rectangular yellow buttons with appropriate icons and consistent spacing. The unwanted background icon is resolved.

This PR contributes to a more polished and professional user interface for TrendHora.

[vercel]

@04shubham7 is attempting to deploy a commit to the agamjotsingh18's projects Team on Vercel.

A member of the Team first needs to authorize it.

[04shubham7]

Pls Accept it faster

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
trendhora-api	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 28, 2025 7:03pm

[agamjotsingh18]

Can you tag the issue

[Tanziha-Sheikh]

Hello @agamjotsingh18

Provide me the access.

[Tanziha-Sheikh]

Can you tag the issue

Hello @04shubham7

Please tag the issue number.

[04shubham7]

#8
@Tanziha-Sheikh

[agamjotsingh18]

Hey , you were assigned for signup and login button, please pull the recent code as navbar has been updated already, you'll have go according to the theme now

[Tanziha-Sheikh]

Hello @04shubham7

Please resolve the conflicts and also join the server here - https://discord.gg/EykvBJqw