[Style Change] Balance dark and light element in login and signup page

[AlfiyaSiddique]

Description

Currently, the color combination of the signup and login page is too dark as shown below.

All the elements on this page have color properties that are in the dark color category. This reduces the contrast, visibility, and readability of the page. I want to change the color of the form fields and display the form as a card which will balance the dark and light elements of the page. Also, add some other changes which will increase the contrast of both of these pages.

Normally, it is recommended to display light elements on dark background and dark elements on light background, I will use this principle and make the page more visually appealing to users.

Screenshots

No response

Additional information

No response

Checklist

• [X] I agree to follow this project's Code of Conduct
• [X] I have checked the existing issues
• [X] I'm a GSSoC'23 contributor
• [X] I want to work on this issue

[github-actions[bot]]

Hello AlfiyaSiddique, thanks for opening an issue, your contribution is valuable to us. The maintainers will review this issue and provide feedback as soon as possible.

[AlfiyaSiddique]

@Fenrir-04 This is the changed UI of signup/login form How's it?

If you want me to chnage or add anything, then please let me know

[Fenrir-04]

hey @AlfiyaSiddique nice work, but i think the color contrast is a bit too much, so instead of white can we make it a more easy-on-the-eyes colour like the github sign up page ? do tell me what you think.

[AlfiyaSiddique]

hey @AlfiyaSiddique nice work, but i think the color contrast is a bit too much, so instead of white can we make it a more easy-on-the-eyes colour like the github sign up page ? do tell me what you think.

Oh okay, Got you. Will share a new design by taking references from GitHub! Also, the black background color of this site is too black which is normally not considered a good color for huge background. So can we change it to a slightly less dark black one? Do let me know your opinion

[AlfiyaSiddique]

Hello @Fenrir-04

Here are the two different color combinations that I would like to implement. The designs are as follows:

In my opinion, the first one is slightly better in color combination, but let me know your opinion and suggest any changes if you have any. If you find the second one better then I think we should change the background black color to little less black. What do you say?

Also can you please add gssoc23 labels to my merged PR #169 Inline-Validation in Forms****

[Fenrir-04]

nice work @AlfiyaSiddique 1st color combination looks better imo. How about we change the black screen with a dark grey kind color or something matching with the smaller sign up portion in the 1st ? Do tell me what you think :)

[AlfiyaSiddique]

nice work @AlfiyaSiddique 1st color combination looks better imo. How about we change the black screen with a dark grey kind color or something matching with the smaller sign up portion in the 1st ? Do tell me what you think :)

Yes exactly, that's what I mentioned before that the background black color is too dark.

I'll change it to a better greyish color or light black color that fits well with the signup box.

Also if we change the background color of the signup and login page, then we should change the background color of the home page as well where all the video appears and we should make that color our primary color to maintain the consistency and color combo of the site. What do you say??

let me know, if you have any other suggestions.