[BUG] Inconsistencies in Dark and Light Mode Implementation

[kavya410004]

Description

I have noticed several inconsistencies in the dark and light mode implementations across various components of the web application. These inconsistencies are affecting the user experience and visual uniformity of the site. Below is a list of the identified issues:

Identified Issues:

• Input Fields: In dark mode, the styling of input fields does not match the overall UI, leading to a jarring user experience.
• Buttons: Some buttons in dark mode do not align with the rest of the dark mode design, appearing out of place.
• Category Container: The styles for category containers in light mode have a mismatched background and border effects that look odd on the webpage.
• Item Cards on Cart Page: The UI of item cards in the cart page lacks consistency, with misaligned elements and properties, which affects the visual appeal and readability.
• Feature containers in light mode: The styles for feature containers in light mode also have a mismatched background and border effects that look odd on the webpages.
• Icons in contact page: Items in contact page are not visible to the users due to its background color which is not user friendly

Proposed Solution:

I would like to address these issues by:

• Adjusting the input fields styling in dark mode to better align with the overall UI theme.
• Updating the button styles in dark mode to ensure consistency with other components.
• Refining the category container styles in light mode, including background and border effects, for a more cohesive appearance.
• Improving the alignment and layout of item cards in the cart page for a more uniform and visually appealing display.
• Updating feature container styles in light mode for better integration with the page's design.
• Adjusting icon visibility on the contact page for improved user readability.

Benefits:

• Enhances the user experience by providing a more visually consistent design.
• Improves the overall aesthetics of the site in dark mode.
• Ensures better readability and alignment of elements, particularly in the cart page.

I will correct anymore inconsistencies like these if I find them while solving this issue.
Please let me know if there are any additional guidelines or preferences to follow while implementing these changes. I am confident that these adjustments will significantly improve the user experience.

Screenshots

I am attaching screenshots of few inconsistencies mentioned above:

Any additional information?

No response

What browser are you seeing the problem on?

No response

Checklist

• I have checked the existing issues
• I have read the Contributing Guidelines
• I'm a GSSoC'24-Extd contributor
• I'm a Hacktoberfest'24 contributor
• I am willing to work on this issue (optional)

[github-actions]

Hello kavya410004! Thanks for opening an issue in Ezyshop! 🚀

• We'll get back to you as soon as possible.

• Hope you star our Repo.

• Join our Discord Server to collaborate and discuss further.