Skip to content

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

@XanderRubio

Description

@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 ⬇️
Screenshot 2023-08-31 at 01 13 45

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 ⬇️

Screenshot 2023-08-30 at 23 27 28

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

Screenshot 2023-08-30 at 23 55 04

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions