Fix commit status popover and switch to svg icons

templates/repo/commit_status.tmpl

@@ -1,15 +1,15 @@
 {{if eq .State "pending"}}
-	<i class="commit-status circle icon yellow"></i>
+	{{svg "octicon-dot-fill" 18 "commit-status icon text yellow"}}
 {{end}}
 {{if eq .State "success"}}
-	<i class="commit-status check icon green"></i>
+	{{svg "octicon-check" 18 "commit-status icon text green"}}
 {{end}}
 {{if eq .State "error"}}
-	<i class="commit-status warning icon red"></i>
+	{{svg "octicon-x" 18 "commit-status icon text red"}}
 {{end}}
 {{if eq .State "failure"}}
-	<i class="commit-status remove icon red"></i>
+	{{svg "octicon-x" 18 "commit-status icon text red"}}
 {{end}}
 {{if eq .State "warning"}}
-	<i class="commit-status warning sign icon yellow"></i>
+	{{svg "octicon-alert" 18 "commit-status icon text yellow"}}
 {{end}}

templates/repo/commit_statuses.tmpl

@@ -4,9 +4,9 @@
 		{{range .Statuses}}
 			<div class="ui item singular-status df">
 				<span>{{template "repo/commit_status" .}}</span>
-				<span class="ui f1">{{.Context}} <span class="text grey">{{.Description}}</span></span>
+				<span class="ui ml-2 f1">{{.Context}} <span class="text grey">{{.Description}}</span></span>
 				{{if .TargetURL}}
-					<div class="ui"><a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer">{{$.root.locale.Tr "repo.pulls.status_checks_details"}}</a></div>
+					<a class="ml-3" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer">{{$.root.locale.Tr "repo.pulls.status_checks_details"}}</a>
 				{{end}}
 			</div>
 		{{end}}

web_src/js/features/repo-commit.js

@@ -62,7 +62,7 @@ export function initCommitStatuses() {
 
     createTippy(this, {
       trigger: 'click',
-      content: this.nextSibling,
+      content: this.nextElementSibling,
       placement: positionRight ? 'right' : 'left',
       interactive: true,
     });