From c1dcc1fce254e5dcb454f1bc833c16f8a3324cc8 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 21 Nov 2022 22:03:09 +0100
Subject: [PATCH] Webhook list enhancements

- Move buttons to right and make them easier to click via padding
- Make delete button and similar other buttons in admin lists red
---
 templates/admin/queue.tmpl                     | 2 +-
 templates/repo/settings/webhook/base_list.tmpl | 8 +++-----
 web_src/less/_admin.less                       | 4 ++--
 web_src/less/_base.less                        | 6 ++++++
 web_src/less/_repository.less                  | 4 ++--
 5 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/templates/admin/queue.tmpl b/templates/admin/queue.tmpl
index cd50798f805d2..675ec417e40ee 100644
--- a/templates/admin/queue.tmpl
+++ b/templates/admin/queue.tmpl
@@ -161,7 +161,7 @@
 						<td>{{DateFmtLong .Start}}</td>
 						<td>{{if .HasTimeout}}{{DateFmtLong .Timeout}}{{else}}-{{end}}</td>
 						<td>
-							<a class="delete-button" href="" data-url="{{$.Link}}/cancel/{{.PID}}" data-id="{{.PID}}" data-name="{{.Workers}}"><span class="text red" title="{{$.locale.Tr "remove"}}">{{svg "octicon-trash"}}</span></a>
+							<a class="delete-button" href="" data-url="{{$.Link}}/cancel/{{.PID}}" data-id="{{.PID}}" data-name="{{.Workers}}" title="{{$.locale.Tr "remove"}}">{{svg "octicon-trash"}}</a>
 						</td>
 					</tr>
 					{{else}}
diff --git a/templates/repo/settings/webhook/base_list.tmpl b/templates/repo/settings/webhook/base_list.tmpl
index f96c48d4cd866..333764a7ebccb 100644
--- a/templates/repo/settings/webhook/base_list.tmpl
+++ b/templates/repo/settings/webhook/base_list.tmpl
@@ -55,11 +55,9 @@
 				{{else}}
 					<span class="text grey mr-3">{{svg "octicon-dot-fill"}}</span>
 				{{end}}
-				<a class="text truncate" title="{{.URL}}" href="{{$.BaseLink}}/{{.ID}}">{{.URL}}</a>
-				<div class="ui right" style="display: inline-flex">
-					<span class="text blue px-2"><a href="{{$.BaseLink}}/{{.ID}}">{{svg "octicon-pencil"}}</a></span>
-					<span class="text red px-2"><a class="delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}}</a></span>
-				</div>
+				<a class="text truncate f1 mr-3" title="{{.URL}}" href="{{$.BaseLink}}/{{.ID}}">{{.URL}}</a>
+				<a class="muted p-3" href="{{$.BaseLink}}/{{.ID}}">{{svg "octicon-pencil"}}</a></span>
+				<a class="delete-button p-3" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}}</a>
 			</div>
 		{{end}}
 	</div>
diff --git a/web_src/less/_admin.less b/web_src/less/_admin.less
index b18bc7c5e0253..26417d42eed6f 100644
--- a/web_src/less/_admin.less
+++ b/web_src/less/_admin.less
@@ -3,8 +3,8 @@
     > .item {
       &:not(:first-child) {
         border-top: 1px solid var(--color-secondary);
-        padding: 1rem;
-        margin: 15px -1rem -1rem;
+        padding: .25rem 1rem;
+        margin: 12px -1rem -1rem;
       }
     }
   }
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index e49721f7e0e8d..6054331ec49ea 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -307,6 +307,11 @@ a.muted:hover [class*="color-text"],
   color: var(--color-primary);
 }
 
+.delete-button,
+.delete-button:hover {
+  color: var(--color-red);
+}
+
 a.label,
 .repository-menu a,
 .ui.search .results a,
@@ -2571,6 +2576,7 @@ table th[data-sortt-desc] {
 
 .truncated-item-container {
   display: flex !important;
+  align-items: center;
 }
 
 .ellipsis-button {
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 63f1f954a0c9f..f89a5df33d9b6 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2616,8 +2616,8 @@
     > .item {
       &:not(:first-child) {
         border-top: 1px solid var(--color-secondary);
-        padding: 1rem;
-        margin: 15px -1rem -1rem;
+        padding: .25rem 1rem;
+        margin: 12px -1rem -1rem;
       }
 
       > .svg {