Replace more icons with SVG, repo search tweaks (#13860)

* Replace more icons with SVG

- Replace remaining icons on admin page with SVG
- Fix vertical menu background on arc-green
- Minor improvments to frontpage repo search
- More icon replacements here and there

* fix integration

* whitespace tweak

* add comment

Co-authored-by: techknowlogick <techknowlogick@gitea.io>

7 files changed, 21 insertions, 18 deletions

diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index 85a95739a6..cf7c224629 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -115,7 +115,9 @@
 											{{if .IsDeleted}}
 												<a class="ui basic jump button icon poping up undo-button" href data-url="{{$.Link}}/restore?branch_id={{.DeletedBranch.ID | urlquery}}&name={{.DeletedBranch.Name | urlquery}}" data-content="{{$.i18n.Tr "repo.branch.restore" (.Name)}}" data-variation="tiny inverted" data-position="top right"><span class="text blue">{{svg "octicon-reply"}}</span></a>
 											{{else}}
-												<a class="ui basic jump button icon poping up delete-branch-button" href data-url="{{$.Link}}/delete?name={{.Name | urlquery}}" data-content="{{$.i18n.Tr "repo.branch.delete" (.Name)}}" data-variation="tiny inverted" data-position="top right" data-name="{{.Name}}"><i class="trash icon text red"></i></a>
+												<a class="ui basic jump button icon poping up delete-branch-button" href data-url="{{$.Link}}/delete?name={{.Name | urlquery}}" data-content="{{$.i18n.Tr "repo.branch.delete" (.Name)}}" data-variation="tiny inverted" data-position="top right" data-name="{{.Name}}">
+													{{svg "octicon-trashcan"}}
+												</a>
 											{{end}}
 										{{end}}
 									</td>
diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl
index 81229c0ef5..5dd0553d48 100644
--- a/templates/repo/branch_dropdown.tmpl
+++ b/templates/repo/branch_dropdown.tmpl
@@ -26,12 +26,12 @@
 					<div class="two column row">
 						<a class="reference column" href="#" @click="mode = 'branches'; focusSearchField()">
 							<span class="text" :class="{black: mode == 'branches'}">
-								{{svg "octicon-git-branch"}} {{.i18n.Tr "repo.branches"}}
+								{{svg "octicon-git-branch" 16 "mr-2"}}{{.i18n.Tr "repo.branches"}}
 							</span>
 						</a>
 						<a class="reference column" href="#" @click="mode = 'tags'; focusSearchField()">
 							<span class="text" :class="{black: mode == 'tags'}">
-								<i class="reference tags icon"></i> {{.i18n.Tr "repo.tags"}}
+								{{svg "octicon-tag" 16 "mr-2"}}{{.i18n.Tr "repo.tags"}}
 							</span>
 						</a>
 					</div>
diff --git a/templates/repo/diff/new_review.tmpl b/templates/repo/diff/new_review.tmpl
index b3f735a7f2..6304369416 100644
--- a/templates/repo/diff/new_review.tmpl
+++ b/templates/repo/diff/new_review.tmpl
@@ -7,10 +7,10 @@
 		<div class="ui clearing segment">
 			<form class="ui form" action="{{.Link}}/reviews/submit" method="post">
 			{{.CsrfTokenHtml}}
-			    <input type="hidden" name="commit_id" value="{{.AfterCommitID}}"/>
-				<i class="ui right floated link icon close"></i>
-				<div class="header">
-				{{$.i18n.Tr "repo.diff.review.header"}}
+				<input type="hidden" name="commit_id" value="{{.AfterCommitID}}"/>
+				<div class="header df ac pb-3">
+					<div class="f1">{{$.i18n.Tr "repo.diff.review.header"}}</div>
+					<a class="muted close px-3">{{svg "octicon-x" 16}}</a>
 				</div>
 				<div class="ui field">
 					<textarea name="content" tabindex="0" rows="2"
diff --git a/templates/repo/issue/branch_selector_field.tmpl b/templates/repo/issue/branch_selector_field.tmpl
index 469e72d213..4d9137fe72 100644
--- a/templates/repo/issue/branch_selector_field.tmpl
+++ b/templates/repo/issue/branch_selector_field.tmpl
@@ -20,12 +20,12 @@
 				<div class="two column row">
 					<a class="reference column" href="#" data-target="#branch-list">
 						<span class="text black">
-							{{svg "octicon-git-branch"}} {{.i18n.Tr "repo.branches"}}
+							{{svg "octicon-git-branch" 16 "mr-2"}}{{.i18n.Tr "repo.branches"}}
 						</span>
 					</a>
 					<a class="reference column" href="#" data-target="#tag-list">
 						<span class="text">
-							<i class="reference tags icon"></i> {{.i18n.Tr "repo.tags"}}
+							{{svg "octicon-tag" 16 "mr-2"}}{{.i18n.Tr "repo.tags"}}
 						</span>
 					</a>
 				</div>
diff --git a/templates/repo/projects/list.tmpl b/templates/repo/projects/list.tmpl
index 080137f70d..6ea936e8b6 100644
--- a/templates/repo/projects/list.tmpl
+++ b/templates/repo/projects/list.tmpl
@@ -14,11 +14,11 @@
 		{{template "base/alert" .}}
 		<div class="ui compact tiny menu">
 			<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=open">
-				{{svg "octicon-project"}}
+				{{svg "octicon-project" 16 "mr-2"}}
 				{{.i18n.Tr "repo.issues.open_tab" .OpenCount}}
 			</a>
 			<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=closed">
-				{{svg "octicon-check"}}
+				{{svg "octicon-check" 16 "mr-2"}}
 				{{.i18n.Tr "repo.milestones.close_tab" .ClosedCount}}
 			</a>
 		</div>
diff --git a/templates/repo/settings/lfs_pointers.tmpl b/templates/repo/settings/lfs_pointers.tmpl
index 8a50c1bdf8..bf23062ae3 100644
--- a/templates/repo/settings/lfs_pointers.tmpl
+++ b/templates/repo/settings/lfs_pointers.tmpl
@@ -58,9 +58,9 @@
 							<td>
 								<a class="ui blue show-panel button" href="{{$.LFSFilesLink}}/find?oid={{.Oid}}&size={{.Size}}&sha={{.SHA}}">{{$.i18n.Tr "repo.settings.lfs_findcommits"}}</a>
 							</td>
-							<td><i class="fa fa{{if .InRepo}}-check{{end}}-square-o"></i></td>
-							<td><i class="fa fa{{if .Exists}}-check{{end}}-square-o"></i></td>
-							<td><i class="fa fa{{if .Accessible}}-check{{end}}-square-o"></i></td>
+							<td>{{if .InRepo}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
+							<td>{{if .Exists}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
+							<td>{{if .Accessible}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
 						</tr>
 					{{end}}
 				</tbody>
diff --git a/templates/repo/settings/webhook/list.tmpl b/templates/repo/settings/webhook/list.tmpl
index 47ed37cc33..2bff27a76b 100644
--- a/templates/repo/settings/webhook/list.tmpl
+++ b/templates/repo/settings/webhook/list.tmpl
@@ -41,19 +41,20 @@
 		<div class="item">
 			{{.Description | Str2html}}
 		</div>
+		<div class="ui divider"></div>
 		{{range .Webhooks}}
-			<div class="item">
+			<div class="item p-2">
 				{{if eq .LastStatus 1}}
 					<span class="text green">{{svg "octicon-check"}}</span>
 				{{else if eq .LastStatus 2}}
 					<span class="text red">{{svg "octicon-alert"}}</span>
 				{{else}}
-					<span class="text grey">{{svg "octicon-dot-fill"}}</span>
+					<span class="text grey mr-3">{{svg "octicon-dot-fill"}}</span>
 				{{end}}
 				<a class="dont-break-out" href="{{$.BaseLink}}/{{.ID}}">{{.URL}}</a>
 				<div class="ui right">
-					<span class="text blue"><a href="{{$.BaseLink}}/{{.ID}}"><i class="fa fa-pencil"></i></a></span>
-					<span class="text red"><a class="delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}"><i class="fa fa-times"></i></a></span>
+					<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-trashcan"}}</a></span>
 				</div>
 			</div>
 		{{end}}