search

Trisha-tech / OnlineBookSales

This project named Online Book Sales - Backend deals with developing an e-commerce website for Online Book Sale. It provides the user with a catalog of different books available for purchase in the store. In order to facilitate online purchase, a shopping cart is provided to the user.
https://book4u-j5au.onrender.com/
MIT License
87 stars 131 forks source link

UI Enhancements for Cart Page – Cart Table, Dark Mode, Suggested Products, Empty Cart, and Error Message Improvements #298

Open vijay1172 opened 3 days ago

vijay1172 commented 3 days ago

I would like to work on the following UI improvements for the shopping cart page:

  1. Cart Table Design Improvements

-Add subtle horizontal lines between rows to improve readability. -Bold and center the table headers (Image, Name, Price, Quantity, Action).

  1. Implement Dark Mode -Add a dark mode toggle that switches the UI to a darker color scheme. -Ensure that the contrast and readability of text and buttons are optimized for both light and dark modes.

  2. Suggested Products Section Redesign -Replace the text list with product cards displaying images, product names, and "Add to Cart" buttons. -Arrange the product cards horizontally for a better layout and user experience. -Add hover effects to make the product cards interactive and visually engaging.

  3. Empty Cart State Enhancement -Add an image or icon to visually indicate the empty cart state. -Include a "Start Shopping" call-to-action that redirects users back to the product listing page.

  4. Error Message Redesign

image

vijay1172 commented 3 days ago

@Trisha-tech I would love to redesign the UI for Cart page as mentioned above if you assign me this issue

Trisha-tech commented 2 days ago

I would like to work on the following UI improvements for the shopping cart page:

  1. Cart Table Design Improvements

-Add subtle horizontal lines between rows to improve readability. -Bold and center the table headers (Image, Name, Price, Quantity, Action).

  1. Implement Dark Mode -Add a dark mode toggle that switches the UI to a darker color scheme. -Ensure that the contrast and readability of text and buttons are optimized for both light and dark modes.
  2. Suggested Products Section Redesign -Replace the text list with product cards displaying images, product names, and "Add to Cart" buttons. -Arrange the product cards horizontally for a better layout and user experience. -Add hover effects to make the product cards interactive and visually engaging.
  3. Empty Cart State Enhancement -Add an image or icon to visually indicate the empty cart state. -Include a "Start Shopping" call-to-action that redirects users back to the product listing page.
  4. Error Message Redesign
  • implementing the error message in a card format with a close button for user dismissal.

image

Hello @vijay1172, Go for it All the Best