Clean up the Onboarding email-signup screen CSS

[beccat123]

As of now, parts of the UI of the sign up flow are disorganized and create a less-than-ideal user experience.

Please make UI modifications to the current screen so that the design of the screen looks consistent with that documented in this Figma frame, a screenshot of which is also reproduced below:
https://www.figma.com/file/kiaTbWxdPsyqz6eeaT4M8l/Open-Library---Sign-In-Flow?node-id=79%3A2&t=gm520FiKGEaKFNWJ-1

This issue belongs to the epic #7694

[abelaba]

Hi @beccat123 I want to contribute to this project, can I work on this issue?

[jamstack-elise]

@beccat123 I tried this out and updated my ol repo, please let me know which OL branch to send a PR.

@abelaba, in my ol repo, I've yet to update the account.py file for mls keys, maybe this is something you could help me with? The files that have to do with this part of the page are: account.py, forms.py, and create.html.

[abelaba]

@jamstack-elise I would like help you with that, I am a bit new to open source and could you give me a bit more explanation on the task you want me to help you with

[jamstack-elise]

@jamstack-elise I would like help you with that, I am a bit new to open source and could you give me a bit more explanation on the task you want me to help you with

@abelaba Of course, and happy to have you onboard this issue.

Our main objective is to update the UI as per @beccat123 's Figma frame.

A current task at hand is to complete the checkbox options work by answering. And I'm wondering if I could get your help with this:

1. How should we define the "events" checkbox values?
2. What mailing list notifications should the events checkbox value(s) map into?

As you'll see in the "NOTE:" per the account.py file, the example for the "announcements checkbox" maps to both "ml_best_of" and "ml_updates." It looks like we'll get this info or confirmation from IA admin.

As an aside, I've set up a similar naming convention for the events checkbox. Namely, "ia_events."

[AbdullahDaGoat]

Hello

I would love to hep with development

It seems that the UI has gone better, is this still up for grabs that we can fix (im new to open sourcing and dont want to do it unnecessarily)

[Feline17]

Hello

I would love to hep with development

It seems that the UI has gone better, is this still up for grabs that we can fix (im new to open sourcing and dont want to do it unnecessarily)

It's still marked as open and the current interface doesn't match the figma proposed so go for it!
(below is current screen on my desktop)

[AbdullahDaGoat]

wait what is the figma proposed (like where can i find the figma deisgned that you guys would like to achieve)

[Feline17]

So if you scroll all the way up, the very first post is the figma by the person who started this issue

…

On Thu, Jun 22, 2023, 10:05 PM Abdullah Khan ***@***.***> wrote: wait what is the figma proposed (like where can i find the figma deisgned that you guys would like to achieve) — Reply to this email directly, view it on GitHub <#7644 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AF6EQOFZDPPM3EVRGKMGM3TXMSCNZANCNFSM6AAAAAAV2YVAYQ> . You are receiving this because you commented.Message ID: ***@***.***>

[AbdullahDaGoat]

Hold up sorry, the deisgn given above the figma is the same as the current, the image is the same. am i missing something, i might be lost.

Sorry if thats dumb, im pretty damn new i guess i.e the websites current login page is that image

[jimchamp]

@AbdullahDaGoat please find another issue to work on. There is already an open PR that addresses this issue.

[AbdullahDaGoat]

@jimchamp my bad sorry

[jimchamp]

@AbdullahDaGoat you did nothing wrong! We can't assign a person to an issue unless they have commented on the issue. The person that opened the PR that addresses this issue did not comment, and could not be assigned. I've assigned myself in order to avoid this type of thing in the future.

[jimchamp]

@beccat123, are the asterisks following each input label always supposed to be visible? There is no annotation (like * indicates a required field) that tells me what these asterisks mean.
Where should the validation error messages be displayed?

[jimchamp]

Marking as "blocked" until guidance for asterisks and validation errors is provided.

[jimchamp]

Just spoke to @mekarpeles about the asterisks and validation errors. Validation affordances were already added to the designs, here.

The checkbox icon should replace the asterisks in the original design. On page load, these icons will be grey. When valid text is typed into an input, the icon should become green. If the text is invalid, the icon should become red.

[akhil-rasheed]

Is this issue still open?
Would like to work on this

[Wreck-X]

@jimchamp
can we make our own icons or is there a similar one that i can use that is already in the codebase? not sure how to implement it.

also there is another issue (#7645) that is working on enabling single-field password entry with 2 pr's attached to it. The figma design you provided seems to have that as well, should the pr for this issue (#7644) work on that as well? not sure about the procedures here...

[KareemDream]

Hi, I'm a college student interested in working on more open-source projects. Is this issue still open? If so, I'd like to be assigned this issue. Thanks.

[cdrini]

Thanks for you interest @KareemDream ! We're going to close this one since it will be completed by another piece that @rebecca-shoptaw is tackling. Feel free to look for other Good First Issues here: https://github.com/internetarchive/openlibrary/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+First+Issue%22