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.
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.
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)