[FEATURE] Better UI on the playground page

[FrozenHearth]

Description

1. The playground would look nicer with spacing below the label and the input box.
2. The profile json field needs an example json in the placeholder or below the input field to guide the user what the format of the profile json should be.
3. Lot of white space is there on the page. I think vertically centering the content would look better.
4. Better, more user-friendly error message. Is it possible to validate the github username field?

Screenshots

Additional information

No response

[github-actions[bot]]

It's great having you contribute to this project

Welcome to the community :nerd_face:

If you would like to continue contributing to open source and would like to do it with an awesome inclusive community, you should join our Discord chat and our GitHub Organisation - we help and encourage each other to contribute to open source little and often 🤓 . Any questions let us know.

[harshit-002]

@FrozenHearth I would like to work on this, assign it to me, please.

[FrozenHearth]

Sure, please let one of the maintainers change the status to Ready for Dev. Then you can start working on it.

[Saikat-Mandal]

Can i work on this issue ?

[MAYANKpandey14]

Can i work on this issue ?

For any issue to become Ready for dev , it has to reviewed by the maintainers and given ready to dev status . Thank you for your interest in contributing to the community . Once the issue is reviewed , it will be assigned . @Saikat-Mandal Have a Nice day !!

[anonymous1508]

how do i work on this issue ? i m new in open source , where do i have to work on this issue ? in forked repo or the original one because in forke repo there are no issues visible , i already have made my profile as instructed in doc

[Saikat-Mandal]

@MAYANKpandey14 yeh got it Mayank.

[SyedImam1998]

how do i work on this issue ? i m new in open source , where do i have to work on this issue ? in forked repo or the original one because in forke repo there are no issues visible , i already have made my profile as instructed in doc

Hey @anonymous1508 I would recommend you to go through this video where eddiejaoude himself explain how to get started in Open Source Contributions Video

[ChinmayMhatre]

how do i work on this issue ? i m new in open source , where do i have to work on this issue ? in forked repo or the original one because in forke repo there are no issues visible , i already have made my profile as instructed in doc

Hey @anonymous1508 I would recommend you to go through this video where @eddiejaoude himself explain how to get started in Open Source Contributions Video

Hey @SyedImam1998 , awesome suggestion! Just refrain from tagging folks not related to the issue. It often creates more notifications. Eddie probably already has a mountain of notifications to go through 😂. Hope you understand. Thank you.

[SyedImam1998]

how do i work on this issue ? i m new in open source , where do i have to work on this issue ? in forked repo or the original one because in forke repo there are no issues visible , i already have made my profile as instructed in doc

Hey @anonymous1508 I would recommend you to go through this video where @eddiejaoude himself explain how to get started in Open Source Contributions Video

Hey @SyedImam1998 , awesome suggestion! Just refrain from tagging folks not related to the issue. It often creates more notifications. Eddie probably already has a mountain of notifications to go through 😂. Hope you understand. Thank you.

Gotcha updated my text !!!

[eddiejaoude]

I have edited the issue description and added the label ready for dev. Please re-read and let m know who would like to work on the issue

[Saikat-Mandal]

@eddiejaoude i would love to work on it !

[eddiejaoude]

Sure assigned to you @Saikat-Mandal