Skip to content

Commit

Permalink
Improve UX on modal for deleting an access token (#19894)
Browse files Browse the repository at this point in the history
* Improve UX on modal for deleting an access token

Before, both action buttons where coloured on hover. Otherwise they
appeared as ghost buttons. UX tells us, that call to action must not
be displayed as ghost button.

Using red is perceived as warning colour in Western cultures. It was
used for the non-destructive action before. This PR swaps the colour
and turns the cancel button into a filled one, so it is saver to do
nothing then to accidentally delete an access button. We want the
person to do this consciously.

In another iteration the wording here could be improved. See the
associated issue for further details.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>

* Use tabs instead of spaces.

Linter does not complain anymore. I was expecting the formatter to pick
this up but it didn't.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
  • Loading branch information
3 people authored Jun 7, 2022
1 parent 5ab2dcb commit 81cf006
Showing 1 changed file with 9 additions and 3 deletions.
12 changes: 9 additions & 3 deletions templates/user/settings/applications.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<div class="content">
<strong>{{.Name}}</strong>
<div class="activity meta">
<i>{{$.i18n.Tr "settings.add_on"}} <span>{{.CreatedUnix.FormatShort}}</span> — {{svg "octicon-info"}} {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{.UpdatedUnix.FormatShort}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
<i>{{$.i18n.Tr "settings.add_on"}} <span>{{.CreatedUnix.FormatShort}}</span> — {{svg "octicon-info"}} {{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{.UpdatedUnix.FormatShort}}</span>{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i>
</div>
</div>
</div>
Expand Down Expand Up @@ -55,6 +55,12 @@
</div>

<div class="ui small basic delete modal" id="delete-token">
{{/*
The wording here is a bit confusing.
The action asks for deleting an access token.
Confirming is therefore the destructive option and
should be deemphasized because it cannot be undone.
*/}}
<div class="ui icon header">
{{svg "octicon-trash"}}
{{.i18n.Tr "settings.access_token_deletion"}}
Expand All @@ -63,11 +69,11 @@
<p>{{.i18n.Tr "settings.access_token_deletion_desc"}}</p>
</div>
<div class="actions">
<div class="ui red basic inverted cancel button">
<div class="ui cancel button">
<i class="remove icon"></i>
{{.i18n.Tr "modal.no"}}
</div>
<div class="ui green basic inverted ok button">
<div class="ui red basic inverted ok button">
<i class="checkmark icon"></i>
{{.i18n.Tr "modal.yes"}}
</div>
Expand Down

0 comments on commit 81cf006

Please sign in to comment.