Modal dialog button colors?

[wxiaoguang]

Feature Description

Which style should be used?

1

2

3

4

5

(5: only text is different from 4)

[KN4CK3R]

2 or 5 for me.

Style of 2 with text of 5.

[wxiaoguang]

2 or 4 for me.

Added 5 , at the moment, all default texts are Yes/No or Confirm/Cancel.

[wxiaoguang]

Maybe we can always use style 5 from now on. Actually it has already been used widely in Gitea's UI. At the moment, some old dialogs are style 1, which don't look good to me 😁

I will come back to collect more opinions tomorrow.

[delvh]

I think I prefer 2, simply as it isn't as confusing.
With the current red-green coloring, I always have to remember whether I should assign red to yes (-> destructive action), or to no (-> canceling the action)…
The only question is how does it look on arc-green?

[wxiaoguang]

The only question is how does it look on arc-green?

Good question, the "primary" button is green on arc-green .....

But we can have BLUE:

[delvh]

Then it looks like I hoped for.
Then 2 is my final choice.

[wxiaoguang]

When rewriting the old code ( Improve some modal action buttons #24289 ), I also found that there are "yellow" buttons in code 🤣

I guess it might be better than "blue" for "destructive action"

And I added a devtest page for the modal buttons, welcome to try ~~~ And it's pretty easy to switch the button styles with PR #24289

[panekj]

1 - No, colours make the buttons text a little bit unreadable in that contrast
2 - Out of all presented options, yes, but still having a "Default button colour" for destructive actions is not that great choice.
3 - Kind of yes, the red colour for "confirming" a destructive action fits here, the green one not so much. It also can confuse end user as to what they want to achieve green -> yes, red -> no.
4,5 - Like 3 but worse.

6(?) option
Don't introduce a UI where user can make mistake/accident to perform the wrong action.
GitHub solves with presenting only a single button in modal and a clickable link to close the modal

[wxiaoguang]

Don't introduce a UI where user can make mistake/accident to perform the wrong action.
GitHub solves with presenting only a single button in modal and a clickable link to close the modal

Gitea also does so on critical operations like GitHub, with extra confirmation.

This issue/PR are mainly for "general" deletion confirmation.

But for the "single deletion" button, I am not sure.

At the moment, this is not only for application token , but a lot of other places (eg: delete file) also need such dialog.

---

Update: then maybe Gitea needs 4 kinds of confirmations?

1. For really critical operations like above , eg: delete repository (supported)
2. For general critical operations, like option 6 in comment above, eg: delete a token (No support yet added a sample in #24289)
3. For non-critical operations, eg: delete a file, yellow/blue button? (supported by #24289)
4. General yes/no operation, green yes/confirm? (already)

[wxiaoguang]

I managed to add a GitHub-like "danger" button in #24289

I guess we can start using it in some cases.

[silverwind]

I would follow these rules:

• Delete buttons always filled red indicating the danger
• Confirm button always filled primary indicating the primary action
• All other buttons just basic outlined buttons without color, same style as repo page buttons

[BySempron]

I like 1. Keep color based decision but less intrusive like 3, 4 or 5

[wxiaoguang]

Thank you all for the suggestions! #24289 summarized the suggestions, and the current approach is:

1. Always show "negative" button as secondary button (no color)
2. Developers could use green/blue/yellow for the positive button, for different cases.
3. Developers could also use a single red button for dangerous operations, just like GitHub.

I think this issue could be closed, let's do more improvements (new issue/PR) in the future.

[yp05327]

Maybe #20212 is related to this discussion?

[wxiaoguang]

Yes, but some colors are still inconsistent at the moment.