Enhancing the UI of "Search Reference" Search Bar

[apsinghdev]

Increasing Access

Currently, the Search bar is like this ..

and problems with this are :-

1. Low Visibility
2. No Smooth and Easy-to-Use UI
3. Oversized placeholder and the cursor

these issues are making the accessibility of this feature difficult so my idea is to make this search bar more Elegant and UI friendly so that it can increase the accessibility of the website.

something like this :-

Feature enhancement details

This UI enhancement idea aims to -

1. add a dark color ( ie: black ) border around the search bar
2. minimize the text and placeholder of the search bar
3. partially round the corners of the border
4. add a little bit shadow to get visibility ( not sure about it. need feedback on it )

### How to Reproduce it

1. go to https://editor.p5js.org/
2. Click on the help menu
3. Then click on reference
4. Notice the Search bar next to the "Reference" heading

Any feedback and opinions are welcome. If it sounds good, Can I work on it? @lindapaiste @raclim

[yashpandey06]

@apsinghdev great thought !!! , it will enhance the visibility .

[apsinghdev]

@yashpandey06 yeah! just waiting for the thoughts of @lindapaiste

[lindapaiste]

This needs to be moved to the p5.js-website repo but I don't have the permissions. Pinging @Qianqianye @raclim - can you transfer it?

[yashpandey06]

@apsinghdev if you are not working issue can i work on it .

[lindapaiste]

To be clear: the page that you are looking at is not part of the web editor. It’s code is not in this repo.

I’m going to close this. @raclim @Qianqianye @davepagurek can move this to the correct repo (p5.js-website) and reopen it.

[davepagurek]

Thanks for your interest everyone! We are currently in the process of redesigning the website so we won't be looking into external design changes right now. Keep an eye out in the website repo https://github.com/processing/p5.js-website/ in the new year for when those changes land!