Replace remaining fontawesome dropdown icons with SVG (#24455)

- Replace leftover dropdown triangles with SVG
- Replace remove icon with SVG and add styling for it:

<img width="817" alt="Screenshot 2023-05-01 at 00 40 05"
src="https://user-images.githubusercontent.com/115237/235379271-4674d4f7-b11e-4d6d-90f9-1478325443ca.png">
<img width="816" alt="Screenshot 2023-05-01 at 00 46 56"
src="https://user-images.githubusercontent.com/115237/235379451-b515afb3-9773-4f6f-a259-e7048235bcba.png">

5 files changed, 21 insertions, 7 deletions

diff --git a/templates/package/settings.tmpl b/templates/package/settings.tmpl
index a443a8d27f..7beb3da062 100644
--- a/templates/package/settings.tmpl
+++ b/templates/package/settings.tmpl
@@ -20,7 +20,7 @@
 							{{$repoID = .PackageDescriptor.Repository.ID}}
 						{{end}}
 						<input type="hidden" name="repo_id" value="{{$repoID}}">
-						<i class="dropdown icon"></i>
+						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="default text">{{.locale.Tr "packages.settings.link.select"}}</div>
 						<div class="menu">
 							{{range .Repos}}
diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl
index 181aba4972..b4cfee84f7 100644
--- a/templates/repo/graph.tmpl
+++ b/templates/repo/graph.tmpl
@@ -8,7 +8,6 @@
 				<div class="ui icon buttons tiny color-buttons">
 					<div class="ui multiple selection search dropdown" id="flow-select-refs-dropdown">
 						<input type="hidden" name="flow">
-						<i class="dropdown icon"></i>
 						<div class="default text">{{.locale.Tr "repo.commit_graph.select"}}</div>
 						<div class="menu">
 							<div class="item" data-value="...flow-hide-pr-refs">
diff --git a/templates/repo/issue/fields/dropdown.tmpl b/templates/repo/issue/fields/dropdown.tmpl
index 9adce5602f..28e5d27e33 100644
--- a/templates/repo/issue/fields/dropdown.tmpl
+++ b/templates/repo/issue/fields/dropdown.tmpl
@@ -3,7 +3,8 @@
 	{{/* FIXME: required validation */}}
 	<div class="ui fluid selection dropdown {{if .item.Attributes.multiple}}multiple clearable{{end}}">
 		<input type="hidden" name="form-field-{{.item.ID}}" value="0">
-		<i class="dropdown icon"></i>
+		{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+		{{svg "octicon-x" 14 "remove icon"}}
 		<div class="default text"></div>
 		<div class="menu">
 			{{range $i, $opt := .item.Attributes.options}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 8e03be1435..b351bdeaa6 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -2051,6 +2051,13 @@ a.ui.label:hover {
   color: var(--color-text);
 }
 
+.ui.labels a.active.label:hover,
+a.ui.active.label:hover {
+  background: var(--color-active);
+  border-color: var(--color-active);
+  color: var(--color-text);
+}
+
 .ui.label > .detail .icons {
   margin-right: 0.25em;
 }
@@ -2603,6 +2610,7 @@ table th[data-sortt-desc] .svg {
 }
 
 .ui.dropdown .svg.dropdown.icon,
+.ui.dropdown .svg.remove.icon,
 .svg.dropdown.icon {
   margin-top: 0 !important; /* reset the "ui.selection.dropdown > .dropdown.icon {margin-top}", for the Issue Dependencies dropdown */
   margin-right: -0.5rem !important; /* fix up SVG dropdown triangles because Fomantic thinks they are icon fonts */
@@ -2615,6 +2623,16 @@ table th[data-sortt-desc] .svg {
   top: 0 !important; /* reset the ".ui.selection.dropdown > .xxx.icon {top}" if the icon is svg instead of the fomantic icon */
 }
 
+.ui.selection.dropdown > .svg.remove.icon {
+  top: .5px;
+  right: 32px;
+  width: auto;
+}
+
+.ui.selection.dropdown > .svg.remove.icon:hover {
+  opacity: 1;
+}
+
 .ui.dropdown.no-text > .dropdown.icon {
   margin-left: 0 !important;
   margin-right: 0 !important;
diff --git a/web_src/css/features/gitgraph.css b/web_src/css/features/gitgraph.css
index f7477997fe..0ca611d641 100644
--- a/web_src/css/features/gitgraph.css
+++ b/web_src/css/features/gitgraph.css
@@ -46,10 +46,6 @@
   white-space: nowrap;
 }
 
-#git-graph-container #flow-select-refs-dropdown .dropdown.icon {
-  display: none;
-}
-
 #git-graph-container #flow-select-refs-dropdown .default.text {
   padding-top: 4px;
   padding-bottom: 4px;