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>

5 files changed, 40 insertions, 18 deletions

diff --git a/templates/user/dashboard/repolist.tmpl b/templates/user/dashboard/repolist.tmpl
index 46c735071d..e790dad83f 100644
--- a/templates/user/dashboard/repolist.tmpl
+++ b/templates/user/dashboard/repolist.tmpl
@@ -44,15 +44,24 @@
 								<a @click="toggleArchivedFilter()">
 									<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.i18n.Tr "home.show_both_archived_unarchived"}}" v-if="archivedFilter === 'both'">
 										<input type="checkbox">
-										<label><i class="archive icon archived-icon"></i>{{.i18n.Tr "home.show_archived"}}</label>
+										<label>
+											{{svg "octicon-archive" 16 "mr-2"}}
+											{{.i18n.Tr "home.show_archived"}}
+										</label>
 									</div>
 									<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.i18n.Tr "home.show_only_unarchived"}}" v-if="archivedFilter === 'unarchived'">
 										<input type="checkbox">
-										<label><i class="archive icon archived-icon"></i>{{.i18n.Tr "home.show_archived"}}</label>
+										<label>
+											{{svg "octicon-archive" 16 "mr-2"}}
+											{{.i18n.Tr "home.show_archived"}}
+										</label>
 									</div>
 									<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.i18n.Tr "home.show_only_archived"}}" v-if="archivedFilter === 'archived'">
 										<input type="checkbox">
-										<label><i class="archive icon archived-icon"></i>{{.i18n.Tr "home.show_archived"}}</label>
+										<label>
+											{{svg "octicon-archive" 16 "mr-2"}}
+											{{.i18n.Tr "home.show_archived"}}
+										</label>
 									</div>
 								</a>
 							</div>
@@ -60,15 +69,24 @@
 								<a @click="togglePrivateFilter()">
 									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.i18n.Tr "home.show_both_private_public"}}" v-if="privateFilter === 'both'">
 										<input type="checkbox">
-										<label>{{svg "octicon-lock"}}{{.i18n.Tr "home.show_private"}}</label>
+										<label>
+											{{svg "octicon-lock" 16 "mr-2"}}
+											{{.i18n.Tr "home.show_private"}}
+										</label>
 									</div>
 									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.i18n.Tr "home.show_only_public"}}" v-if="privateFilter === 'public'">
 										<input type="checkbox">
-										<label>{{svg "octicon-lock"}}</svg>{{.i18n.Tr "home.show_private"}}</label>
+										<label>
+											{{svg "octicon-lock" 16 "mr-2"}}
+											{{.i18n.Tr "home.show_private"}}
+										</label>
 									</div>
 									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.i18n.Tr "home.show_only_private"}}" v-if="privateFilter === 'private'">
 										<input type="checkbox">
-										<label>{{svg "octicon-lock"}}</svg>{{.i18n.Tr "home.show_private"}}</label>
+											<label>
+												{{svg "octicon-lock" 16 "mr-2"}}
+												{{.i18n.Tr "home.show_private"}}
+											</label>
 									</div>
 								</a>
 							</div>
@@ -102,10 +120,12 @@
 				<ul class="repo-owner-name-list">
 					<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}">
 						<a class="df ac sb" :href="suburl + '/' + repo.full_name">
-							<div class="f1 df ac">
+							<div class="f1">
 								<component v-bind:is="repoIcon(repo)" size="16"></component>
 								<strong class="text truncate item-name">${repo.full_name}</strong>
-								<i v-if="repo.archived" class="archive icon archived-icon"></i>
+								<span v-if="repo.archived">
+									{{svg "octicon-archive" 16 "ml-2"}}
+								</span>
 							</div>
 							<div class="text light grey df ac">
 								${repo.stars_count}
@@ -118,20 +138,20 @@
 							<div class="ui borderless pagination menu narrow">
 								<a class="item navigation" :class="{'disabled': page === 1}"
 									@click="changePage(1)" title="{{$.i18n.Tr "admin.first_page"}}">
-									<i class="angle double left icon"></i>
+									{{svg "gitea-double-chevron-left" 16 "mr-2"}}
 								</a>
 								<a class="item navigation" :class="{'disabled': page === 1}"
 									@click="changePage(page - 1)" title="{{$.i18n.Tr "repo.issues.previous"}}">
-									<i class="left arrow icon"></i>
+									{{svg "octicon-chevron-left" 16 "mr-2"}}
 								</a>
 								<a class="active item">${page}</a>
 								<a class="item navigation" :class="{'disabled': page === finalPage}"
 									@click="changePage(page + 1)" title="{{$.i18n.Tr "repo.issues.next"}}">
-									<i class="icon right arrow"></i>
+									{{svg "octicon-chevron-right" 16 "ml-2"}}
 								</a>
 								<a class="item navigation" :class="{'disabled': page === finalPage}"
 									@click="changePage(finalPage)" title="{{$.i18n.Tr "admin.last_page"}}">
-									<i class="angle double right icon"></i>
+									{{svg "gitea-double-chevron-right" 16 "ml-2"}}
 								</a>
 							</div>
 						</div>
diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl
index 21ea14d5d8..5f5f96d4eb 100644
--- a/templates/user/settings/applications.tmpl
+++ b/templates/user/settings/applications.tmpl
@@ -15,6 +15,7 @@
 					<div class="item">
 						<div class="right floated content">
 								<button class="ui red tiny button delete-button" id="delete-token" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+									{{svg "octicon-trashcan" 16 "mr-2"}}
 									{{$.i18n.Tr "settings.delete_token"}}
 								</button>
 						</div>
diff --git a/templates/user/settings/applications_oauth2.tmpl b/templates/user/settings/applications_oauth2.tmpl
index 65b9da4950..1796d2571c 100644
--- a/templates/user/settings/applications_oauth2.tmpl
+++ b/templates/user/settings/applications_oauth2.tmpl
@@ -9,13 +9,14 @@
 		{{range $app := .Applications}}
 			<div class="item">
 				<div class="right floated content">
-					<a href="{{$.Link}}/oauth2/{{$app.ID}}" class="ui primary tiny icon button">
-						<i class="pencil alternate icon"></i>
+					<a href="{{$.Link}}/oauth2/{{$app.ID}}" class="ui primary tiny button">
+						{{svg "octicon-pencil" 16 "mr-2"}}
 						{{$.i18n.Tr "settings.oauth2_application_edit"}}
 					</a>
 					<button class="ui red tiny button delete-button" id="remove-gitea-oauth2-application"
 							data-url="{{AppSubUrl}}/user/settings/applications/oauth2/delete"
 							data-id="{{$app.ID}}">
+						{{svg "octicon-trashcan" 16 "mr-2"}}
 						{{$.i18n.Tr "settings.delete_key"}}
 					</button>
 				</div>
diff --git a/templates/user/settings/grants_oauth2.tmpl b/templates/user/settings/grants_oauth2.tmpl
index 4dc5b9446b..0b635ae0a9 100644
--- a/templates/user/settings/grants_oauth2.tmpl
+++ b/templates/user/settings/grants_oauth2.tmpl
@@ -15,7 +15,7 @@
 						{{$.i18n.Tr "settings.revoke_key"}}
 					</button>
 				</div>
-				<i class="big key icon"></i>
+				{{svg "octicon-key"}}
 				<div class="content">
 					<strong>{{$grant.Application.Name}}</strong>
 					<div class="activity meta">
@@ -29,7 +29,7 @@
 
 <div class="ui small basic delete modal" id="revoke-gitea-oauth2-grant">
 	<div class="ui icon header">
-		<i class="shield alternate icon"></i>
+		{{svg "octicon-shield" 16 "mr-2"}}
 		{{.i18n.Tr "settings.revoke_oauth2_grant"}}
 	</div>
 	<div class="content">
diff --git a/templates/user/settings/repos.tmpl b/templates/user/settings/repos.tmpl
index 312b19349e..5633b8cc32 100644
--- a/templates/user/settings/repos.tmpl
+++ b/templates/user/settings/repos.tmpl
@@ -39,7 +39,7 @@
 											{{if $.allowAdopt}}
 												<button class="ui button submit tiny green adopt show-modal" data-modal="#adopt-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-plus"}}</span><span class="label">{{$.i18n.Tr "repo.adopt_preexisting_label"}}</span></button>
 												<div class="ui basic modal" id="adopt-unadopted-modal-{{$dirI}}">
-													<i class="close icon"></i>
+													{{svg "octicon-x" 16 "close inside"}}
 													<div class="header">
 														<span class="label">{{$.i18n.Tr "repo.adopt_preexisting"}}</span>
 													</div>
@@ -66,7 +66,7 @@
 											{{if $.allowDelete}}
 												<button class="ui button submit tiny red delete show-modal" data-modal="#delete-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-x"}}</span><span class="label">{{$.i18n.Tr "repo.delete_preexisting_label"}}</span></button>
 												<div class="ui basic modal" id="delete-unadopted-modal-{{$dirI}}">
-													<i class="close icon"></i>
+													{{svg "octicon-x" 16 "close inside"}}
 													<div class="header">
 														<span class="label">{{$.i18n.Tr "repo.delete_preexisting"}}</span>
 													</div>