Item deletion dialog button hover colors

[bugreport0]

• 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.)

[lafriks]

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

[stale]

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.

[Ryuno-Ki]

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

gitea/templates/user/settings/applications.tmpl

Lines 57 to 75 in 73382d2

	<div class="ui small basic delete modal" id="delete-token">
	<div class="ui icon header">
	{{svg "octicon-trash"}}
	{{.i18n.Tr "settings.access_token_deletion"}}
	</div>
	<div class="content">
	<p>{{.i18n.Tr "settings.access_token_deletion_desc"}}</p>
	</div>
	<div class="actions">
	<div class="ui red basic inverted cancel button">
	<i class="remove icon"></i>
	{{.i18n.Tr "modal.no"}}
	</div>
	<div class="ui green basic inverted ok button">
	<i class="checkmark icon"></i>
	{{.i18n.Tr "modal.yes"}}
	</div>
	</div>
	</div>

I would switch the hover colours to white and red in a first PR: #3589 (comment)
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]

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).