search

processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.38k stars 1.32k forks source link

Enhancement in prompt of You need to login or signup to save the project #2734

Closed aditya123473892 closed 2 months ago

aditya123473892 commented 10 months ago

Increasing Access

steps to reproduce 1) when you save the project without login there appears a prompt that says In order to save sketches, you must be logged in. Please [Login]
2) The buttons of login and signup are not properly visible it looks like normal text

here is the image Screenshot 2023-12-17 012451

Feature enhancement details

we can apply background color of the buttons to make it more user friendly

welcome[bot] commented 10 months ago

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

aditya123473892 commented 10 months ago

can i work on it

haarsh157 commented 10 months ago

I want to work on this issue kindly assign me this issue

Ranjeet0062 commented 10 months ago

"I am fixing this issue. Please consider my contribution, and if it is correct, then please merge it. I am providing a screenshot of the fixed issue." p5 errormodal

lindapaiste commented 10 months ago

I'm going to tag this with "needs design" because it's kind of subjective what it should look like. I agree that those links should be more obvious but I'm unsure of the exact design that we would want. I'd love to get some input from contributors with a design background!

codebysid commented 10 months ago

@lindapaiste this prompt has two buttons and styling both as filled button will indicate both as action buttons, instead styling them as Link Buttons ( with an underline ) would be better. Whats your thoughts on this ?

haarsh157 commented 10 months ago

Hey @lindapaiste Can you consider this design which looks user friendly as well as the styling suits the design of the web editor

Also, I would like to suggest that should we have transitions when the user hovers over any of the button in the web editor to make it more user friendly? Screenshot from 2023-12-21 12-45-20

lindapaiste commented 9 months ago

IMO this is a good opportunity for us to refine and/or expand our set of core UI components. Whatever we come up with here can likely be used in other places. I don't think we should be adding a bunch of CSS that is just for this one modal.

If we decide that we want a link-styled look then we should create a TextLink component and use it here. We would use styled-components to create a wrapper around the Link (probably using the existing ButtonOrLink component). The text would be the same color as the logo (pink). Possibly bold? Possibly underlined? Maybe only underlined on hover?

If we want a button-styled look then we already have a Button component. I realized that there are some problems in that component so I opened issue #2821 and PR #2822 to address that.

Our existing button styles would look like this: image

Hey @lindapaiste Can you consider this design which looks user friendly as well as the styling suits the design of the web editor

Also, I would like to suggest that should we have transitions when the user hovers over any of the button in the web editor to make it more user friendly? Screenshot from 2023-12-21 12-45-20

This looks really nice. IMO it looks better than our standard buttons, but for the sake of consistency we probably want to use the same standard buttons. I'm not opposed to changing the standard gray button everywhere to look more like this, but that's a larger change that requires more discussion and consensus.

Let's open a new discussion or issue to talk about transitions. The way that we invert from dark-on-light to light-on-dark makes it hard to transition nicely.

I noticed that we don't have any hover effect on the solid pink button style and that's an easier fix. I'm going to make an issue and assign it to you.

aditya123473892 commented 9 months ago

@lindapaiste we might need to have different colour composition for different contrast themes. In dark mode the button looks easily visible but in contrast and light mode its kind off less visible and seems like simple text more

lindapaiste commented 9 months ago

Here's two possible link-styled looks. Screenshot 2024-01-03 12 40 30 Screenshot 2024-01-03 12 40 38

aditya123473892 commented 9 months ago

i already made the pull request for above one but it looks same in contrast or dark mode #2755

raclim commented 8 months ago

I agree with @lindapaiste that we'll want something that is consistent and reusable throughout the editor rather than making several css changes. I feel like we can wait to address this until we reach a consensus on a longterm solution for implementing these types of links. I'm going to close the pull requests that have been created for this issue so far for now since I feel that they're currently implementing css changes that might not work/be consistent with other links in the editor!