Button colors are not consistent

[arielj]

https://ombulabs.atlassian.net/browse/DT-262

Branch/Commit:

Main branch

Expected behavior:

The color of the buttons with similar actions should be consistent. Buttons deleting stuff should be red-ish, buttons adding stuff should be green, other buttons should be yellow (just an example, not sure if those are the right decisions)

Actual behavior:

The colors are not consistent:

• we have a red button to bulk delete, but a green button to delete a singles story
• we have a red button to add a story, but a green button do add an estimate
• we have a green button to edit a story or an estimate, but a red button to edit the project
• we have a green button to edit a story, but the submit button is yellow, and the back button is yellow too

Screenshots and Videos

EDIT:

After checking with nathalie, she gave some suggestions:

• the row actions are changing to something like this for now
  

but she proposed something like this for the future:

• the Bulk Delete button:

• • would be better if it looks like a link instead of a button so it doesn't look that important, (or maybe it shouldn't be visible until stories are selected? added by me)
• • the Bulk Delete button can be renamed to Delete, the x story/ies makes it clear it can be a bulk action
• • (added by me), maybe move bulk actions into a more dropdown? we could have bulk move / delete / clone for example

• the Return to Projects Page button should be a button, and shouldn't be there with the actions, it's a navigation action so it should be in the header or the nav bar, and should look like a button but like a link since it's navigation

I will abide by the code of conduct

[suhhee1011]

Hi @arielj, Can I work on this?

[etagwerker]

@suhhee1011 That would be great! Could you provide some guidance here, @arielj?

[arielj]

hey! sure, sorry I missed this

I'm not an expert on color palletes so take this more as an idea and not a final decision. But I'd say:

In the list of stories for a project:

• Delete a story should be magenta like Bulk Delete
• Add a story, Clone Project and Add Sub-Project could be green
• Edit a story, Edit Estimate and Edit or Delete project could be yellow

In the forms:

• Primary action: green (Save Changes for example)
• Back button: yellow

Basically:

• creating/cloning things: green
• destroying/archiving: magenta
• the rest (edit/navigation/ambiguous): yellow

I think it's going to be more clear if it's ok after seeing the change in action.

The main problem I think it's with the Delete for a story that should be magenta for sure and with the Add a Story that should either be yellow or green but not magenta, the rest are kinda optional changes I'd say.

EDIT:

added an edit in the issue description, so some of these suggestions won't apply

[JuanVqz]

I didn't cover the EDIT section in the description, seems like it belongs to another issue, what do you think?

[arielj]

The edit screen only has a few buttons, I think it belongs to this issue since we are trying to fix buttons consistency, if we leave this for another PR it's just going to leave the inconsistency around.

Though, like I said in the PR, we should pass these changes through nathalie for validation.