Item deletion dialog button hover colors #1570

New Issue

GiteaMirror · 2025-11-02T04:05:18-06:00

GiteaMirror commented

2025-11-02 04:05:18 -06:00

Originally created by @bugreport0 on GitHub (Feb 26, 2018).

Gitea version (or commit ref): 1.4.0rc1
Can you reproduce the bug at https://try.gitea.io: Yes

Description

The button hover colors for item deletion dialogs are counter-intuitive:

the 'Yes' button confirms deletion and is colored green;
the 'No' button cancels deletion and is colored red.

We should either:

reword all dialogs to have macOS style button labels like 'Delete' and 'Don't Delete' (or 'Cancel') or;
use neutral hover colors for these dialogs.

I'm also not sure if there even any positively-phrased dialogs in Gitea where 'yes' is the non-intrusive action, so maybe both options can even work together.

Screenshots

(Wording on this dialog is from my private branch, but Gitea releases are similar.)

Originally created by @bugreport0 on GitHub (Feb 26, 2018). - Gitea version (or commit ref): 1.4.0rc1 - Can you reproduce the bug at https://try.gitea.io: Yes ## Description The button hover colors for item deletion dialogs are counter-intuitive: * the 'Yes' button confirms deletion and is colored **green**; * the 'No' button cancels deletion and is colored **red**. We should either: * reword all dialogs to have macOS style button labels like 'Delete' and 'Don't Delete' (or 'Cancel') or; * use neutral hover colors for these dialogs. I'm also not sure if there even any positively-phrased dialogs in Gitea where 'yes' is the non-intrusive action, so maybe both options can even work together. ## Screenshots ![delete-yes](https://user-images.githubusercontent.com/32939607/36686771-5eda6c86-1b1f-11e8-82ea-19d2aa73be54.png) ![delete-no](https://user-images.githubusercontent.com/32939607/36686772-5ff621a0-1b1f-11e8-956e-3320c1d75fd9.png) (Wording on this dialog is from my private branch, but Gitea releases are similar.)

GiteaMirror added the issue/confirmed topic/ui type/enhancement labels 2025-11-02 04:05:18 -06:00

GiteaMirror closed this issue

2025-11-02 04:05:18 -06:00

GiteaMirror commented

2025-11-02 04:05:19 -06:00

@lafriks commented on GitHub (Feb 26, 2018):

I would prefer Cancel (white) and Delete (red) in this case

@lafriks commented on GitHub (Feb 26, 2018): I would prefer `Cancel` (white) and `Delete` (red) in this case

GiteaMirror commented

2025-11-02 04:05:19 -06:00

@stale[bot] commented on GitHub (Feb 7, 2019):

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs during the next 2 weeks. Thank you for your contributions.

@stale[bot] commented on GitHub (Feb 7, 2019): This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs during the next 2 weeks. Thank you for your contributions.

GiteaMirror commented

2025-11-02 04:05:19 -06:00

@Ryuno-Ki commented on GitHub (Jun 5, 2022):

I agree, this is bad UX.
Since there is a label „reviewed/confirmed”, I assume this is good to pick up.
Changing the wording would require going through translation. I don't know how macOS handle it (I'm running a Linux).

That being said, if there was a rewording, I would add something

This cannot be undone.

The effect is already described, so that should be okay.

The relevant code part is

73382d2132/templates/user/settings/applications.tmpl (L57-L75)

I would switch the hover colours to white and red in a first PR: https://github.com/go-gitea/gitea/issues/3589#issuecomment-368626021
Following https://uxplanet.org/ghost-buttons-in-ux-design-4cf3717334f8 ghost buttons should not be used for primary actions.
In order to prevent accidental action, I'm going to turn the „No” button into a filled UI (by removing basic inverted classes) and leave the „Yes” button a ghost one. This way, there is conscious effort required to actually do delete an access token.

@Ryuno-Ki commented on GitHub (Jun 5, 2022): I agree, this is bad UX. Since there is a label „reviewed/confirmed”, I assume this is good to pick up. Changing the wording would require going through translation. I don't know how macOS handle it (I'm running a Linux). That being said, if there was a rewording, I would add something > This cannot be undone. The effect is already described, so that should be okay. The relevant code part is https://github.com/go-gitea/gitea/blob/73382d2132f8f242245d83f66c92761e0b477b91/templates/user/settings/applications.tmpl#L57-L75 I would switch the hover colours to white and red in a first PR: https://github.com/go-gitea/gitea/issues/3589#issuecomment-368626021 Following https://uxplanet.org/ghost-buttons-in-ux-design-4cf3717334f8 ghost buttons should not be used for primary actions. In order to prevent accidental action, I'm going to turn the „No” button into a filled UI (by removing `basic inverted` classes) and leave the „Yes” button a ghost one. This way, there is conscious effort required to actually do delete an access token.

GiteaMirror commented

2025-11-02 04:05:19 -06:00

@Ryuno-Ki commented on GitHub (Jun 5, 2022):

Looking at https://fomantic-ui.com/elements/button.html#colored I cannot see a white option. Basic adds transparency in our case (so in dark mode, it would appear as a ghost button).

@Ryuno-Ki commented on GitHub (Jun 5, 2022): Looking at https://fomantic-ui.com/elements/button.html#colored I cannot see a white option. Basic adds transparency in our case (so in dark mode, it would appear as a ghost button).

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#1570