🟢 🎨 UI Design for the text box that displays contributors text

[XanderRubio]

Problem:

Great feedback from the contributor @ccelest1 on how the rainbow text background can be distracting. It would be ideal if either people decide what color they can have for the background of the text or if it can be changed to a more neutral and pleasing color scheme. After thinking of this more, it would be ideal for theming the text box after the Before I Die Wall Project.

This requires UI research to see what displays are best, in addition to considering changing the use of the emojis. It could be better suited from a design view only to have the text "Before I Die..." and the contributors before I die text. This project can be modeled after the Before I Die Wall Project, where the textbox is of a similar black wall chalkboard with the following image and the idea of using various different randomized chalk text color for contributors' text they share for what they want to do before they die. Additionally, another thought is to customize the "Before I Die" bold text that is found in the CSS on line 165 of the MasonryBox.module.css and have that automatically be displayed and translated to a different language depending on where the contributor is contributing from. This would be another issue to create.

You would need to edit in the MasonryBox file editing the React.jsx and CSS.

Please work on the branch feature-48 for this issue.

Image of what a Before I Die Wall looks like ⬇️

For more ideas, view the Beofore I Die Toolkit material below ⬇️
Before I Die Guide.pdf
Before I Die column.pdf
Before I Die large title.pdf

Current layout ⬇️

Resources for ideas 📚:

• Chalkboard Repo potential idea

• Check out the codepen for this repo as the background of the chalkboard could be good to use for the text box instead of the blue and yellow rainbow box

[negar-75]

Hello XanderRubio,

I'm excited to dive into open-source contributions for the first time. Can you provide more details about the issue I'll be working on? I'm eager to learn and participate. Thank you!

[XanderRubio]

Hi @negar-75,

I appreciate your enthusiasm for jumping into open source and thank you for taking the time to write. I see you are based out of Lisbon, and I was just in Porto 🇵🇹 and Viana do Castelo this past weekend. I see you are experienced as a frontend developer specializing in HTML, CSS, and Javascript, so that this issue would be perfect for your design abilities. I would recommend the following to assist in this issue and project to start with Negar.

1. Read the README to understand the project and the purpose of it. Then begin on Issue 5.
2. Read the CONTRIBUTION-GUIDELINES and take time to think about what you want to do before you die and share that in text and image to the JSON file. Also while doing this you will learn quickly how the git workflow works. And I'm more than happy to assist further.
3. Work on enhancing the UI for this issue, and I would like to get your feedback on what you believe is a good design option that can match the Before I Die Wall project for a theme of design.

Please let me know if I can help you further. Please confirm if you would like this issue #48 assigned so no one else will work on it.

Have a nice day!

Xander

[negar-75]

I definitely want to do it!
Thanks for your precise explanation!
If I have more questions I will come back to you!

[XanderRubio]

Excellent @negar-75! I will assign you this task now😉 Have a nice day!

[negar-75]

Hi @XanderRubio
I did some changes in Masonry box according the things that I understood from explanation

[XanderRubio]

HI @negar-75

Great, I will take a look at your #52 pull request. I see that you have been busy working on 7 different files. Well done! I look forward to reviewing your work.

[XanderRubio]

We almost have this issue closed. We just need to revisit a formatting issue with how the contributor's bid images are displayed to the left on the webpage.

[XanderRubio]

The feature has been successfully created and added. Thank you to @negar-75. Thank you!!!!