saurabhbakolia / SCROLLME--ECOMMERCE-WEBSITE

ScrollMe is an open-source eCommerce platform built with JavaScript, React, Styled Components, Node.js (Express), and MongoDB. It offers a modern shopping experience with a scalable backend, perfect for contributors or those learning modern web development.
https://www.scrollme.online/
MIT License
19 stars 65 forks source link

UI Improvements for Sign-In Page – Button Consistency, Readability, and Alignment #215

Closed biswajit-sarkar-007 closed 1 month ago

biswajit-sarkar-007 commented 1 month ago

Issue Report

Title

UI Improvements for Sign-In Page – Button Consistency, Readability, and Alignment

Description

Inconsistent Button and Link Design

The "LOGIN" button and the "Sign in with Google" button have different design styles, creating a visual inconsistency. They should have a similar design for uniformity. The "LOGIN" button seems small compared to the "Sign in with Google" button, which stands out too much.

Font and Link Contrast

The links such as "DO NOT YOU REMEMBER THE PASSWORD?" and "CREATE A NEW ACCOUNT" are in a very thin, light font, which could be difficult to read for users. The readability would improve with higher contrast and a slightly bolder font.

Lack of Hover Effects

The "LOGIN" button and links do not appear to have any hover effects, which could enhance user interaction. Adding a slight color change or underline on hover would improve the user experience.

Alignment and Spacing

The alignment of the text and buttons feels a bit off, especially the positioning of the "Sign in with Google" button. It seems to occupy a larger space, breaking the balance of the form. More uniform spacing between elements would make the form look more structured and professional.


Steps to Reproduce the Issue

To assist us in understanding and resolving the issue, please outline the steps you took that led to the problem:

Action 1: Standardize Button Design

Ensure both the "LOGIN" and "Sign in with Google" buttons have consistent size, color, and font styling for uniformity.

Action 2: Improve Link Readability

Increase font weight and contrast for the "Forgot Password?" and "Create a New Account" links to enhance visibility.

Action 3: Add Hover Effects

Introduce hover effects (e.g., color changes or underlining) on the buttons and links for better user interaction feedback.


Screenshots (if applicable)

signup2 0


thakuratul2 commented 1 month ago

@biswajit-sarkar-007 not needed