Comment box tweaks and SVG dropdown triangles (#13376)

* Comment box tweaks and SVG dropdown triangles

- Change all dropdown triangles to SVG
- Bring inline review comment box closer to regular comment boxes
- Enhance arc-green checkbox contrast
- Minor reaction tweaks
- Flexbox the diff file header

* remove a border

* fix type marker in arc-green

* add small code padding

* fix position regression and remove useless rules

Co-authored-by: Lauris BH <lauris@nix.lv>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

templates/admin/auth/edit.tmpl

@@ -28,7 +28,7 @@
 						<div class="ui selection security-protocol dropdown">
 							<input type="hidden" id="security_protocol" name="security_protocol" value="{{$cfg.SecurityProtocol}}">
 							<div class="text">{{$cfg.SecurityProtocolName}}</div>
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
 								{{range .SecurityProtocols}}
 									<div class="item" data-value="{{.Type}}">{{.Name}}</div>
@@ -158,7 +158,7 @@
 						<div class="ui selection type dropdown">
 							<input type="hidden" id="smtp_auth" name="smtp_auth" value="{{$cfg.Auth}}" required>
 							<div class="text">{{$cfg.Auth}}</div>
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
 								{{range .SMTPAuths}}
 									<div class="item" data-value="{{.}}">{{.}}</div>
@@ -198,7 +198,7 @@
 						<div class="ui selection type dropdown">
 							<input type="hidden" id="oauth2_provider" name="oauth2_provider" value="{{$cfg.Provider}}" required>
 							<div class="text">{{.CurrentOAuth2Provider.DisplayName}}</div>
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
 								{{range $key, $value := .OAuth2Providers}}
 									<div class="item" data-value="{{$key}}">{{$value.DisplayName}}</div>
@@ -282,7 +282,7 @@
 						<label for="sspi_default_language">{{.i18n.Tr "admin.auths.sspi_default_language"}}</label>
 						<div class="ui language selection dropdown" id="sspi_default_language">
 							<input name="sspi_default_language" type="hidden" value="{{$cfg.DefaultLanguage}}">
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="text">{{range .AllLangs}}{{if eq $cfg.DefaultLanguage .Lang}}{{.Name}}{{end}}{{end}}</div>
 							<div class="menu">
 								<div class="item{{if not $.SSPIDefaultLanguage}} active selected{{end}}" data-value="">-</div>

templates/admin/auth/new.tmpl

@@ -15,7 +15,7 @@
 					<div class="ui selection type dropdown">
 						<input type="hidden" id="auth_type" name="type" value="{{.type}}">
 						<div class="text">{{.CurrentTypeName}}</div>
-						<i class="dropdown icon"></i>
+						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="menu">
 							{{range .AuthSources}}
 								<div class="item" data-value="{{.Type}}">{{.Name}}</div>

templates/admin/auth/source/ldap.tmpl

@@ -4,7 +4,7 @@
 		<div class="ui selection security-protocol dropdown">
 			<input type="hidden" id="security_protocol" name="security_protocol" value="{{.security_protocol}}">
 			<div class="text">{{.CurrentSecurityProtocol}}</div>
-			<i class="dropdown icon"></i>
+			{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 			<div class="menu">
 				{{range .SecurityProtocols}}
 					<div class="item" data-value="{{.Type}}">{{.Name}}</div>

templates/admin/auth/source/oauth.tmpl

@@ -4,7 +4,7 @@
 		<div class="ui selection type dropdown">
 			<input type="hidden" id="oauth2_provider" name="oauth2_provider" value="{{.oauth2_provider}}">
 			<div class="text">{{.oauth2_provider}}</div>
-			<i class="dropdown icon"></i>
+			{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 			<div class="menu">
 				{{range $key, $value := .OAuth2Providers}}
 					<div class="item" data-value="{{$key}}">{{$value.DisplayName}}</div>

templates/admin/auth/source/smtp.tmpl

@@ -4,7 +4,7 @@
 		<div class="ui selection type dropdown">
 			<input type="hidden" id="smtp_auth" name="smtp_auth" value="{{.smtp_auth}}">
 			<div class="text">{{.smtp_auth}}</div>
-			<i class="dropdown icon"></i>
+			{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 			<div class="menu">
 				{{range .SMTPAuths}}
 					<div class="item" data-value="{{.}}">{{.}}</div>

templates/admin/auth/source/sspi.tmpl

@@ -29,7 +29,7 @@
 		<label for="sspi_default_language">{{.i18n.Tr "admin.auths.sspi_default_language"}}</label>
 		<div class="ui language selection dropdown" id="sspi_default_language">
 			<input name="sspi_default_language" type="hidden" value="{{.SSPIDefaultLanguage}}">
-			<i class="dropdown icon"></i>
+			{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 			<div class="text">{{range .AllLangs}}{{if eq $.SSPIDefaultLanguage .Lang}}{{.Name}}{{end}}{{end}}</div>
 			<div class="menu">
 				<div class="item{{if not $.SSPIDefaultLanguage}} active selected{{end}}" data-value="">-</div>

templates/admin/base/search.tmpl

@@ -3,7 +3,7 @@
 	<div class="ui dropdown type jump item">
 		<span class="text">
 			{{.i18n.Tr "repo.issues.filter_sort"}}
-			<i class="dropdown icon"></i>
+			{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 		</span>
 		<div class="menu">
 			<a class="{{if or (eq .SortType "oldest") (not .SortType)}}active{{end}} item" href="{{$.Link}}?sort=oldest&q={{$.Keyword}}">{{.i18n.Tr "repo.issues.filter_sort.oldest"}}</a>

templates/admin/emails/list.tmpl

@@ -12,7 +12,7 @@
 				<div class="ui dropdown type jump item">
 					<span class="text">
 						{{.i18n.Tr "repo.issues.filter_sort"}}
-						<i class="dropdown icon"></i>
+						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 					</span>
 					<div class="menu">
 						<a class="{{if or (eq .SortType "email") (not .SortType)}}active{{end}} item" href="{{$.Link}}?sort=email&q={{$.Keyword}}">{{.i18n.Tr "admin.emails.filter_sort.email"}}</a>

templates/admin/repo/search.tmpl

@@ -3,7 +3,7 @@
 	<div class="ui dropdown type jump item">
 		<span class="text">
 			{{.i18n.Tr "repo.issues.filter_sort"}}
-				<i class="dropdown icon"></i>
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 		</span>
 		<div class="menu">
 			<a class="{{if or (eq .SortType "oldest") (not .SortType)}}active{{end}} item" href="{{$.Link}}?sort=oldest&q={{$.Keyword}}">{{.i18n.Tr "repo.issues.filter_sort.oldest"}}</a>

templates/admin/user/edit.tmpl

@@ -19,7 +19,7 @@
 					<div class="ui selection type dropdown">
 						<input type="hidden" id="login_type" name="login_type" value="{{.LoginSource.Type}}-{{.LoginSource.ID}}" required>
 						<div class="text">{{.i18n.Tr "admin.users.local"}}</div>
-						<i class="dropdown icon"></i>
+						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="menu">
 							<div class="item" data-value="0-0">{{.i18n.Tr "admin.users.local"}}</div>
 							{{range .Sources}}

templates/admin/user/new.tmpl

@@ -15,7 +15,7 @@
 					<div class="ui selection type dropdown">
 						<input type="hidden" id="login_type" name="login_type" value="{{.login_type}}" data-password="required" required>
 						<div class="text">{{.i18n.Tr "admin.users.local"}}</div>
-						<i class="dropdown icon"></i>
+						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="menu">
 							<div class="item" data-value="0-0">{{.i18n.Tr "admin.users.local"}}</div>
 							{{range .Sources}}

templates/explore/repo_search.tmpl

@@ -3,7 +3,7 @@
     <div class="ui right dropdown type jump item">
 		<span class="text">
 			{{.i18n.Tr "repo.issues.filter_sort"}}
-                <i class="dropdown icon"></i>
+                {{svg "octicon-triangle-down" 14 "dropdown icon"}}
 		</span>
         <div class="menu">
             <a class="{{if eq .SortType "newest"}}active{{end}} item" href="{{$.Link}}?sort=newest&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.latest"}}</a>

templates/explore/search.tmpl

@@ -3,7 +3,7 @@
 	<div class="ui right dropdown type jump item">
 		<span class="text">
 			{{.i18n.Tr "repo.issues.filter_sort"}}
-			<i class="dropdown icon"></i>
+			{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 		</span>
 		<div class="menu">
 			<a class="{{if eq .SortType "newest"}}active{{end}} item" href="{{$.Link}}?sort=newest&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.latest"}}</a>

templates/install.tmpl

@@ -19,7 +19,7 @@
 						<div class="ui selection database type dropdown">
 							<input type="hidden" id="db_type" name="db_type" value="{{.CurDbOption}}">
 							<div class="text">{{.CurDbOption}}</div>
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
 								{{range .DbOptions}}
 									<div class="item" data-value="{{.}}">{{.}}</div>
@@ -54,7 +54,7 @@
 							<div class="ui selection database type dropdown">
 								<input type="hidden" name="ssl_mode" value="{{if .ssl_mode}}{{.ssl_mode}}{{else}}disable{{end}}">
 								<div class="default text">disable</div>
-								<i class="dropdown icon"></i>
+								{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 								<div class="menu">
 									<div class="item" data-value="disable">Disable</div>
 									<div class="item" data-value="require">Require</div>
@@ -75,7 +75,7 @@
 							<div class="ui selection database type dropdown">
 								<input type="hidden" name="charset" value="{{if .charset}}{{.charset}}{{else}}utf8mb4{{end}}">
 								<div class="default text">utf8mb4</div>
-								<i class="dropdown icon"></i>
+								{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 								<div class="menu">
 									<div class="item" data-value="utf8mb4">utf8mb4</div>
 									<div class="item" data-value="utf8">utf8</div>

templates/repo/activity.tmpl

@@ -9,7 +9,7 @@
 					<div class="ui basic compact button">
 						<span class="text">
 							{{.i18n.Tr "repo.activity.period.filter_label"}} <strong>{{.PeriodText}}</strong>
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						</span>
 					</div>
 					<div class="menu">

templates/repo/branch_dropdown.tmpl

@@ -6,7 +6,7 @@
 				{{if .IsViewBranch}}{{.i18n.Tr "repo.branch"}}{{else}}{{.i18n.Tr "repo.tree"}}{{end}}:
 				<strong>{{if .IsViewBranch}}{{.BranchName}}{{else}}{{ShortSha .BranchName}}{{end}}</strong>
 			</span>
-			<i class="dropdown icon"></i>
+			{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 		</div>
 		<div class="data" style="display: none" data-mode="{{if .IsViewTag}}tags{{else}}branches{{end}}">
 			{{range .Branches}}

templates/repo/create.tmpl

@@ -17,7 +17,7 @@
 								<img class="ui mini image" src="{{.ContextUser.RelAvatarLink}}">
 								{{.ContextUser.ShortName 20}}
 							</span>
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
 								<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
 									<img class="ui mini image" src="{{.SignedUser.RelAvatarLink}}">
@@ -172,7 +172,7 @@
 							<div class="ui selection owner dropdown">
 								<input type="hidden" id="trust_model" name="trust_model" value="default" required>
 								<div class="default text">{{.i18n.Tr "repo.settings.trust_model"}}</div>
-								<i class="dropdown icon"></i>
+								{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 								<div class="menu">
 									<div class="item" data-value="default">{{.i18n.Tr "repo.settings.trust_model.default"}}</div>
 									<div class="item" data-value="collaborator">{{.i18n.Tr "repo.settings.trust_model.collaborator"}}</div>

templates/repo/diff/box.tmpl

@@ -84,41 +84,45 @@
 				</div>
 			{{else}}
 				<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}}" id="diff-{{.Index}}">
-					<h4 class="diff-file-header ui top attached normal header">
-						{{$isImage := false}}
-						{{if $file.IsDeleted}}
-							{{$isImage = (call $.IsImageFileInBase $file.Name)}}
-						{{else}}
-							{{$isImage = (call $.IsImageFileInHead $file.Name)}}
-						{{end}}
-						{{if or (not $file.IsBin) $isImage}}
-						<a role="button" class="fold-file">
-							{{svg "octicon-chevron-down" 18}}
-						</a>
-						{{end}}
-						<div class="diff-counter count">
-							{{if $file.IsBin}}
-								{{$.i18n.Tr "repo.diff.bin"}}
-							{{else if not $file.IsRenamed}}
-								<span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span>
-								<span class="bar">
-									<div class="pull-left add"></div>
-									<div class="pull-left del"></div>
-								</span>
-								<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>
-							{{end}}
-						</div>
-						<span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
-						{{if $file.IsProtected}}
-							<span class="ui right basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
-						{{end}}
-						{{if and (not $file.IsSubmodule) (not $.PageIsWiki)}}
+					<h4 class="diff-file-header ui top attached normal header df ac sb">
+						<div class="df ac">
+							{{$isImage := false}}
 							{{if $file.IsDeleted}}
-								<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+								{{$isImage = (call $.IsImageFileInBase $file.Name)}}
 							{{else}}
-								<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+								{{$isImage = (call $.IsImageFileInHead $file.Name)}}
 							{{end}}
-						{{end}}
+							{{if or (not $file.IsBin) $isImage}}
+							<a role="button" class="fold-file">
+								{{svg "octicon-chevron-down" 18}}
+							</a>
+							{{end}}
+							<div class="diff-counter count">
+								{{if $file.IsBin}}
+									{{$.i18n.Tr "repo.diff.bin"}}
+								{{else if not $file.IsRenamed}}
+									<span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span>
+									<span class="bar">
+										<div class="pull-left add"></div>
+										<div class="pull-left del"></div>
+									</span>
+									<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>
+								{{end}}
+							</div>
+							<span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
+						</div>
+						<div class="df ac">
+							{{if $file.IsProtected}}
+								<span class="ui basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
+							{{end}}
+							{{if and (not $file.IsSubmodule) (not $.PageIsWiki)}}
+								{{if $file.IsDeleted}}
+									<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+								{{else}}
+									<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+								{{end}}
+							{{end}}
+						</div>
 					</h4>
 					<div class="diff-file-body ui attached unstackable table segment">
 						{{if ne $file.Type 4}}

templates/repo/diff/comments.tmpl

@@ -10,28 +10,44 @@
 		</a>
 	{{end}}
 	<div class="content">
-		<div class="ui top attached header">
-			<span class="text grey">
+		<div class="ui top attached header comment-header df ac sb">
+			<div class="comment-header-left df ac">
 				{{if .OriginalAuthor }}
-					<span class="text black"><i class="fa {{MigrationIcon $.root.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i> {{ .OriginalAuthor }}</span><span class="text grey"> {{$.root.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}}</span> <span class="text migrate">{{if $.root.Repository.OriginalURL}} ({{$.root.i18n.Tr "repo.migrated_from" $.root.Repository.OriginalURL $.root.Repository.GetOriginalURLHostname | Safe }}){{end}}</span>
+					<span class="text black mr-2">
+						<i class="fa {{MigrationIcon $.root.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i>
+						{{ .OriginalAuthor }}
+					</span>
+					<span class="text grey">
+						{{$.root.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}}
+					</span>
+					<span class="text migrate">
+						{{if $.root.Repository.OriginalURL}}
+							({{$.root.i18n.Tr "repo.migrated_from" $.root.Repository.OriginalURL $.root.Repository.GetOriginalURLHostname | Safe }})
+						{{end}}
+					</span>
 				{{else}}
-					<a {{if gt .Poster.ID 0}}href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a> {{$.root.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}}
+					<span class="text grey">
+						<a class="mr-2" {{if gt .Poster.ID 0}}href="{{.Poster.HomeLink}}"{{end}}>
+							{{.Poster.GetDisplayName}}
+						</a>
+						{{$.root.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}}
+					</span>
 				{{end}}
-			</span>
-			<div class="ui right actions">
-			{{if and .Review}}
-				{{if eq .Review.Type 0}}
-					<div class="ui label basic small yellow">
-					{{$.root.i18n.Tr "repo.issues.review.pending"}}
-					</div>
-				{{else}}
-					<div class="ui label basic small">
-					{{$.root.i18n.Tr "repo.issues.review.review"}}
-					</div>
+			</div>
+			<div class="comment-header-right actions df ac">
+				{{if and .Review}}
+					{{if eq .Review.Type 0}}
+						<div class="ui label basic small yellow">
+						{{$.root.i18n.Tr "repo.issues.review.pending"}}
+						</div>
+					{{else}}
+						<div class="ui label basic small">
+						{{$.root.i18n.Tr "repo.issues.review.review"}}
+						</div>
+					{{end}}
 				{{end}}
-			{{end}}
-			{{template "repo/issue/view_content/add_reaction" Dict "ctx" $ "ActionURL" (Printf "%s/comments/%d/reactions" $.root.RepoLink .ID) }}
-			{{template "repo/issue/view_content/context_menu" Dict "ctx" $.root "item" . "delete" true "diff" true "IsCommentPoster" (and $.root.IsSigned (eq $.root.SignedUserID .PosterID))}}
+				{{template "repo/issue/view_content/add_reaction" Dict "ctx" $ "ActionURL" (Printf "%s/comments/%d/reactions" $.root.RepoLink .ID) }}
+				{{template "repo/issue/view_content/context_menu" Dict "ctx" $.root "item" . "delete" true "diff" true "IsCommentPoster" (and $.root.IsSigned (eq $.root.SignedUserID .PosterID))}}
 			</div>
 		</div>
 		<div class="ui attached segment">

templates/repo/diff/compare.tmpl

@@ -17,7 +17,7 @@
 			<div class="ui floating filter dropdown" data-no-results="{{.i18n.Tr "repo.pulls.no_results"}}">
 				<div class="ui basic small button">
 					<span class="text">{{.i18n.Tr "repo.pulls.compare_base"}}: {{$.BaseName}}:{{$.BaseBranch}}</span>
-					<i class="dropdown icon"></i>
+					{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 				</div>
 				<div class="menu">
 					<div class="ui icon search input">
@@ -50,7 +50,7 @@
 			<div class="ui floating filter dropdown">
 				<div class="ui basic small button">
 					<span class="text">{{.i18n.Tr "repo.pulls.compare_compare"}}: {{$.HeadUser.Name}}:{{$.HeadBranch}}</span>
-					<i class="dropdown icon"></i>
+					{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 				</div>
 				<div class="menu">
 					<div class="ui icon search input">

templates/repo/diff/new_review.tmpl

@@ -1,7 +1,7 @@
 <div class="ui top right pointing dropdown custom" id="review-box">
 	<div class="ui tiny green button btn-review">
 		{{.i18n.Tr "repo.diff.review"}}
-		<i class="dropdown icon"></i>
+		{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 	</div>
 	<div class="menu review-box">
 		<div class="ui clearing segment">

templates/repo/diff/options_dropdown.tmpl

@@ -1,6 +1,6 @@
-<div class="ui dropdown tiny button">
+<div class="ui dropdown tiny basic button">
 	{{.i18n.Tr "repo.diff.options_button"}}
-	<i class="dropdown icon"></i>
+	{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 	<div class="menu">
 		<a class="item tiny basic toggle button" data-target="#diff-files">{{.i18n.Tr "repo.diff.show_diff_stats"}}</a>
 		{{if .Issue.Index}}

templates/repo/diff/whitespace_dropdown.tmpl

@@ -1,6 +1,6 @@
-<div class="ui dropdown tiny button">
+<div class="ui dropdown tiny basic button">
 	{{.i18n.Tr "repo.diff.whitespace_button"}}
-	<i class="dropdown icon"></i>
+	{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 	<div class="menu">
 		<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=">
 			<i class="circle {{ if eq .WhitespaceBehavior "" }}dot{{else}}outline{{end}} icon"></i>

templates/repo/issue/branch_selector_field.tmpl

@@ -8,7 +8,7 @@
 <div class="ui {{if .ReadOnly}}disabled{{end}} floating filter select-branch dropdown" data-no-results="{{.i18n.Tr "repo.pulls.no_results"}}">
 	<div class="ui basic small button">
 		<span class="text branch-name">{{if .Issue.Ref}}{{$.RefEndName}}{{else}}{{.i18n.Tr "repo.issues.no_ref"}}{{end}}</span>
-		<i class="dropdown icon"></i>
+		{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 	</div>
 	<div class="menu">
 		<div class="ui icon search input">

templates/repo/issue/labels/label_list.tmpl

@@ -6,7 +6,7 @@
 				<div class="ui dropdown type jump item">
 					<span class="text">
 						{{.i18n.Tr "repo.issues.filter_sort"}}
-						<i class="dropdown icon"></i>
+						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 					</span>
 					<div class="menu">
 						<a class="{{if or (eq .SortType "alphabetically") (not .SortType)}}active{{end}} item" href="{{$.Link}}?sort=alphabetically&state={{$.State}}">{{.i18n.Tr "repo.issues.label.filter_sort.alphabetically"}}</a>

templates/repo/issue/list.tmpl

@@ -45,7 +45,7 @@
 					<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter" style="margin-left: auto">
 						<span class="text">
 							{{.i18n.Tr "repo.issues.filter_label"}}
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						</span>
 						<div class="menu">
 							<span class="info">{{.i18n.Tr "repo.issues.filter_label_exclude" | Safe}}</span>
@@ -60,7 +60,7 @@
 					<div class="ui {{if not .Milestones}}disabled{{end}} dropdown jump item">
 						<span class="text">
 							{{.i18n.Tr "repo.issues.filter_milestone"}}
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						</span>
 						<div class="menu">
 							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_milestone_no_select"}}</a>
@@ -74,7 +74,7 @@
 					<div class="ui {{if not .Assignees}}disabled{{end}} dropdown jump item">
 						<span class="text">
 							{{.i18n.Tr "repo.issues.filter_assignee"}}
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						</span>
 						<div class="menu">
 							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}">{{.i18n.Tr "repo.issues.filter_assginee_no_select"}}</a>
@@ -89,7 +89,7 @@
 						<div class="ui dropdown type jump item">
 							<span class="text">
 								{{.i18n.Tr "repo.issues.filter_type"}}
-								<i class="dropdown icon"></i>
+								{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							</span>
 							<div class="menu">
 								<a class="{{if eq .ViewType "all"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type=all&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_type.all_issues"}}</a>
@@ -104,7 +104,7 @@
 					<div class="ui dropdown type jump item">
 						<span class="text">
 							{{.i18n.Tr "repo.issues.filter_sort"}}
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						</span>
 						<div class="menu">
 							<a class="{{if or (eq .SortType "latest") (not .SortType)}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=latest&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_sort.latest"}}</a>
@@ -150,7 +150,7 @@
 					<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item">
 						<span class="text">
 							{{.i18n.Tr "repo.issues.action_label"}}
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						</span>
 						<div class="menu">
 							{{range .Labels}}
@@ -165,7 +165,7 @@
 					<div class="ui {{if not .Milestones}}disabled{{end}} dropdown jump item">
 						<span class="text">
 							{{.i18n.Tr "repo.issues.action_milestone"}}
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						</span>
 						<div class="menu">
 							<div class="item issue-action" data-element-id="0" data-url="{{$.Link}}/milestone">
@@ -183,7 +183,7 @@
 					<div class="ui {{if not .Assignees}}disabled{{end}} dropdown jump item">
 						<span class="text">
 							{{.i18n.Tr "repo.issues.action_assignee"}}
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						</span>
 						<div class="menu">
 							<div class="item issue-action" data-element-id="0" data-url="{{$.Link}}/assignee">

templates/repo/issue/milestone_issues.tmpl

@@ -57,7 +57,7 @@
 					<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter" style="margin-left: auto">
 						<span class="text">
 							{{.i18n.Tr "repo.issues.filter_label"}}
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						</span>
 						<div class="menu">
 							<span class="info">{{.i18n.Tr "repo.issues.filter_label_exclude" | Safe}}</span>
@@ -72,7 +72,7 @@
 					<div class="ui {{if not .Assignees}}disabled{{end}} dropdown jump item">
 						<span class="text">
 							{{.i18n.Tr "repo.issues.filter_assignee"}}
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						</span>
 						<div class="menu">
 							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}">{{.i18n.Tr "repo.issues.filter_assginee_no_select"}}</a>
@@ -87,7 +87,7 @@
 						<div class="ui dropdown type jump item">
 							<span class="text">
 								{{.i18n.Tr "repo.issues.filter_type"}}
-								<i class="dropdown icon"></i>
+								{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							</span>
 							<div class="menu">
 								<a class="{{if eq .ViewType "all"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type=all&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_type.all_issues"}}</a>
@@ -102,7 +102,7 @@
 					<div class="ui dropdown type jump item">
 						<span class="text">
 							{{.i18n.Tr "repo.issues.filter_sort"}}
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						</span>
 						<div class="menu">
 							<a class="{{if or (eq .SortType "latest") (not .SortType)}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=latest&state={{$.State}}&labels={{.SelectLabels}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_sort.latest"}}</a>
@@ -146,7 +146,7 @@
 					<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item">
 						<span class="text">
 							{{.i18n.Tr "repo.issues.action_label"}}
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						</span>
 						<div class="menu">
 							{{range .Labels}}
@@ -161,7 +161,7 @@
 					<div class="ui {{if not .Assignees}}disabled{{end}} dropdown jump item">
 						<span class="text">
 							{{.i18n.Tr "repo.issues.action_assignee"}}
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						</span>
 						<div class="menu">
 							<div class="item issue-action" data-element-id="0" data-url="{{$.Link}}/assignee">

templates/repo/issue/milestones.tmpl

@@ -28,7 +28,7 @@
 			<div class="ui dropdown type jump item">
 				<span class="text">
 					{{.i18n.Tr "repo.issues.filter_sort"}}
-					<i class="dropdown icon"></i>
+					{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 				</span>
 				<div class="menu">
 					<a class="{{if or (eq .SortType "closestduedate") (not .SortType)}}active{{end}} item" href="{{$.Link}}?sort=closestduedate&state={{$.State}}">{{.i18n.Tr "repo.milestones.filter_sort.closest_due_date"}}</a>

templates/repo/issue/view_content.tmpl

@@ -20,8 +20,8 @@
 				</a>
 			{{end}}
 				<div class="content">
-					<div class="ui top attached header">
-						<div class="header-left df ac">
+					<div class="ui top attached header comment-header df ac sb">
+						<div class="comment-header-left df ac">
 							{{if .Issue.OriginalAuthor }}
 								<span class="text black">
 									<i class="fa {{MigrationIcon .Repository.GetOriginalURLHostname}}" aria-hidden="true"></i>
@@ -40,7 +40,7 @@
 								</span>
 							{{end}}
 						</div>
-						<div class="header-right actions df ac">
+						<div class="comment-header-right actions df ac">
 							{{if not $.Repository.IsArchived}}
 								{{if gt .Issue.ShowTag 0}}
 									<div class="ui basic label">

templates/repo/issue/view_content/pull.tmpl

@@ -336,7 +336,7 @@
 									</span>
 								</button>
 								<div class="ui dropdown icon button">
-									<i class="dropdown icon"></i>
+									{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 									<div class="menu">
 										{{if $prUnit.PullRequestsConfig.AllowMerge}}
 										<div class="item{{if eq .MergeStyle "merge"}} active selected{{end}}" data-do="merge">{{$.i18n.Tr "repo.pulls.merge_pull_request"}}</div>

templates/repo/issue/view_content/sidebar.tmpl

@@ -502,7 +502,7 @@
 							<div class="ui fluid action input">
 								<div class="ui search selection dropdown" id="new-dependency-drop-list" data-issue-id="{{.Issue.ID}}">
 									<input name="newDependency" type="hidden">
-									<i class="dropdown icon"></i>
+									{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 									<input type="text" class="search">
 									<div class="default text">{{.i18n.Tr "repo.issues.dependency.add"}}</div>
 								</div>
@@ -571,7 +571,7 @@
 									<option value="{{.}}">{{.}}</option>
 								{{end}}
 							</select>
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 
 							<div class="default text"> </div>
 

templates/repo/issue/view_title.tmpl

@@ -57,7 +57,7 @@
                  <div class="ui floating filter dropdown" data-no-results="{{.i18n.Tr "repo.pulls.no_results"}}">
                 	<div class="ui basic small button">
                 		<span class="text" id="pull-target-branch" data-basename="{{$.BaseName}}" data-branch="{{$.BaseBranch}}">{{.i18n.Tr "repo.pulls.compare_base"}}: {{$.BaseName}}:{{$.BaseBranch}}</span>
-                		<i class="dropdown icon"></i>
+                		{{svg "octicon-triangle-down" 14 "dropdown icon"}}
                 	</div>
                 	<div class="menu">
                 		<div class="ui icon search input">

templates/repo/migrate/git.tmpl

@@ -51,7 +51,7 @@
 								<img class="ui mini image" src="{{.ContextUser.RelAvatarLink}}">
 								{{.ContextUser.ShortName 20}}
 							</span>
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu" title="{{.SignedUser.Name}}">
 								<div class="item" data-value="{{.SignedUser.ID}}">
 									<img class="ui mini image" src="{{.SignedUser.RelAvatarLink}}">

templates/repo/migrate/gitea.tmpl

@@ -85,7 +85,7 @@
 								<img class="ui mini image" src="{{.ContextUser.RelAvatarLink}}">
 								{{.ContextUser.ShortName 20}}
 							</span>
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu" title="{{.SignedUser.Name}}">
 								<div class="item" data-value="{{.SignedUser.ID}}">
 									<img class="ui mini image" src="{{.SignedUser.RelAvatarLink}}">

templates/repo/migrate/github.tmpl

@@ -85,7 +85,7 @@
 								<img class="ui mini image" src="{{.ContextUser.RelAvatarLink}}">
 								{{.ContextUser.ShortName 20}}
 							</span>
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu" title="{{.SignedUser.Name}}">
 								<div class="item" data-value="{{.SignedUser.ID}}">
 									<img class="ui mini image" src="{{.SignedUser.RelAvatarLink}}">

templates/repo/migrate/gitlab.tmpl

@@ -85,7 +85,7 @@
 								<img class="ui mini image" src="{{.ContextUser.RelAvatarLink}}">
 								{{.ContextUser.ShortName 20}}
 							</span>
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu" title="{{.SignedUser.Name}}">
 								<div class="item" data-value="{{.SignedUser.ID}}">
 									<img class="ui mini image" src="{{.SignedUser.RelAvatarLink}}">

templates/repo/projects/list.tmpl

@@ -28,7 +28,7 @@
 			<div class="ui dropdown type jump item">
 				<span class="text">
 					{{.i18n.Tr "repo.issues.filter_sort"}}
-					<i class="dropdown icon"></i>
+					{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 				</span>
 				<div class="menu">
 					<a class="{{if eq .SortType "oldest"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&sort=oldest&state={{$.State}}">{{.i18n.Tr "repo.issues.filter_sort.oldest"}}</a>

templates/repo/pulls/fork.tmpl

@@ -17,7 +17,7 @@
 								<img class="ui mini image" src="{{.ContextUser.RelAvatarLink}}">
 								{{.ContextUser.ShortName 20}}
 							</span>
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
 								{{if .CanForkToUser}}
 									<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">

templates/repo/release/list.tmpl

@@ -82,7 +82,7 @@
 							<div class="download">
 								<div class="ui accordion">
 									<h2 class="title {{if eq $idx 0}}active{{end}}">
-										<i class="dropdown icon"></i>
+										{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 										{{$.i18n.Tr "repo.release.downloads"}}
 									</h2>
 									<div class="content {{if eq $idx 0}}active{{end}}">

templates/repo/release/new.tmpl

@@ -28,7 +28,7 @@
 								{{.i18n.Tr "repo.release.target"}} :
 								<strong id="repo-branch-current">{{.Repository.DefaultBranch}}</strong>
 							</div>
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
 								{{range .Branches}}
 									<div class="item" data-value="{{.}}">{{.}}</div>

templates/repo/settings/branches.tmpl

@@ -27,7 +27,7 @@
                                 {{range .Branches}}
                                     <option value="{{.}}">{{.}}</option>
                                 {{end}}
-                            </select><i class="dropdown icon"></i>
+                            </select>{{svg "octicon-triangle-down" 14 "dropdown icon"}}
                             <div class="default text">{{.Repository.DefaultBranch}}</div>
                             <div class="menu transition hidden" tabindex="-1" style="display: block !important;">
                                 {{range .Branches}}
@@ -49,7 +49,7 @@
 				<div class="ui grid padded">
 					<div class="eight wide column">
 						<div class="ui fluid dropdown selection" tabindex="0">
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="default text">{{.i18n.Tr "repo.settings.choose_branch"}}</div>
 							<div class="menu transition hidden" tabindex="-1" style="display: block !important;">
 								{{range .LeftBranches}}

templates/repo/settings/collaboration.tmpl

@@ -21,7 +21,7 @@
 						{{svg "octicon-shield-lock"}}
 						<div class="ui inline dropdown">
 							<div class="text">{{if eq .Collaboration.Mode 1}}{{$.i18n.Tr "repo.settings.collaboration.read"}}{{else if eq .Collaboration.Mode 2}}{{$.i18n.Tr "repo.settings.collaboration.write"}}{{else if eq .Collaboration.Mode 3}}{{$.i18n.Tr "repo.settings.collaboration.admin"}}{{else}}{{$.i18n.Tr "repo.settings.collaboration.undefined"}}{{end}}</div>
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="access-mode menu" data-url="{{$.Link}}/access_mode" data-uid="{{.ID}}">
 							<div class="item" data-text="{{$.i18n.Tr "repo.settings.collaboration.admin"}}" data-value="3">{{$.i18n.Tr "repo.settings.collaboration.admin"}}</div>
 							<div class="item" data-text="{{$.i18n.Tr "repo.settings.collaboration.write"}}" data-value="2">{{$.i18n.Tr "repo.settings.collaboration.write"}}</div>

templates/repo/settings/webhook/gitea.tmpl

@@ -11,7 +11,7 @@
 			<div class="ui selection dropdown">
 				<input type="hidden" id="http_method" name="http_method" value="{{if .Webhook.HTTPMethod}}{{.Webhook.HTTPMethod}}{{else}}POST{{end}}">
 				<div class="default text"></div>
-				<i class="dropdown icon"></i>
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 				<div class="menu">
 					<div class="item" data-value="POST">POST</div>
 					<div class="item" data-value="GET">GET</div>
@@ -23,7 +23,7 @@
 			<div class="ui selection dropdown">
 				<input type="hidden" id="content_type" name="content_type" value="{{if .Webhook.ContentType}}{{.Webhook.ContentType}}{{else}}1{{end}}">
 				<div class="default text"></div>
-				<i class="dropdown icon"></i>
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 				<div class="menu">
 					<div class="item" data-value="1">application/json</div>
 					<div class="item" data-value="2">application/x-www-form-urlencoded</div>

templates/repo/settings/webhook/gogs.tmpl

@@ -11,7 +11,7 @@
 			<div class="ui selection dropdown">
 				<input type="hidden" id="content_type" name="content_type" value="{{if .Webhook.ContentType}}{{.Webhook.ContentType}}{{else}}1{{end}}">
 				<div class="default text"></div>
-				<i class="dropdown icon"></i>
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 				<div class="menu">
 					<div class="item" data-value="1">application/json</div>
 					<div class="item" data-value="2">application/x-www-form-urlencoded</div>

templates/repo/settings/webhook/matrix.tmpl

@@ -19,7 +19,7 @@
      		<div class="ui selection dropdown">
 	     		<input type="hidden" id="message_type" name="message_type" value="{{if .MatrixHook.MessageType}}{{.MatrixHook.MessageType}}{{else}}1{{end}}">
     	 		<div class="default text"></div>
-     				<i class="dropdown icon"></i>
+     				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
      				<div class="menu">
      					<div class="item" data-value="1">m.notice</div>
      					<div class="item" data-value="2">m.text</div>

templates/repo/wiki/view.tmpl

@@ -12,7 +12,7 @@
 								{{.i18n.Tr "repo.wiki.page"}}:
 								<strong>{{$title}}</strong>
 							</span>
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						</div>
 						<div class="menu">
 							<div class="ui icon search input">

templates/user/dashboard/issues.tmpl

@@ -82,7 +82,7 @@
 						<div class="ui dropdown type jump item">
 							<span class="text">
 								{{.i18n.Tr "repo.issues.filter_sort"}}
-								<i class="dropdown icon"></i>
+								{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							</span>
 							<div class="menu">
 								<a class="{{if or (eq .SortType "latest") (not .SortType)}}active{{end}} item" href="{{$.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort=latest&state={{$.State}}&q={{$.Keyword}}">{{.i18n.Tr "repo.issues.filter_sort.latest"}}</a>

templates/user/dashboard/milestones.tmpl

@@ -49,7 +49,7 @@
 					<div class="ui dropdown type jump item">
 						<span class="text">
 							{{.i18n.Tr "repo.issues.filter_sort"}}
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						</span>
 						<div class="menu">
 							<a class="{{if or (eq .SortType "closestduedate") (not .SortType)}}active{{end}} item" href="{{$.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort=closestduedate&state={{$.State}}">{{.i18n.Tr "repo.milestones.filter_sort.closest_due_date"}}</a>

templates/user/dashboard/navbar.tmpl

@@ -11,7 +11,7 @@
 							{{if .ContextUser.Visibility.IsPrivate}}<div class="ui red tiny horizontal label">{{.i18n.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
 						</span>
 					{{end}}
-					<i class="dropdown icon"></i>
+					{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 				</span>
 				<div class="context user overflow menu" tabindex="-1">
 					<div class="ui header">

templates/user/project.tmpl

@@ -17,7 +17,7 @@
 								<img class="ui mini image" src="{{.ContextUser.RelAvatarLink}}">
 								{{.ContextUser.ShortName 20}}
 							</span>
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
 								<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
 									<img class="ui mini image" src="{{.SignedUser.RelAvatarLink}}"> {{.SignedUser.ShortName 20}}

templates/user/settings/account.tmpl

@@ -56,7 +56,7 @@
 							<div class="field">
 								<div class="ui selection dropdown" tabindex="0">
 									<input name="preference" type="hidden" value="{{.EmailNotificationsPreference}}">
-									<i class="dropdown icon"></i>
+									{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 									<div class="text">{{$.i18n.Tr "settings.email_notifications"}}</div>
 									<div class="menu">
 										<div data-value="enabled" class="{{if eq .EmailNotificationsPreference "enabled"}}active selected {{end}}item">{{$.i18n.Tr "settings.email_notifications.enable"}}</div>
@@ -144,7 +144,7 @@
 						<label for="ui">{{.i18n.Tr "settings.ui"}}</label>
 						<div class="ui selection dropdown" id="ui">
 							<input name="theme" type="hidden" value="{{.SignedUser.Theme}}">
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="text">
 								{{range $i,$a := .AllThemes}}
 									{{if eq $.SignedUser.Theme $a}}{{$a}}{{end}}

templates/user/settings/profile.tmpl

@@ -48,7 +48,7 @@
 						<label for="language">{{.i18n.Tr "settings.language"}}</label>
 						<div class="ui language selection dropdown" id="language">
 							<input name="language" type="hidden" value="{{.SignedUser.Language}}">
-							<i class="dropdown icon"></i>
+							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="text">{{range .AllLangs}}{{if eq $.SignedUser.Language .Lang}}{{.Name}}{{end}}{{end}}</div>
 							<div class="menu">
 							{{range .AllLangs}}

web_src/less/_base.less

@@ -310,6 +310,17 @@ code,
   flex-direction: inherit;
 }
 
+.ui.dropdown:not(.labeled) > .dropdown.icon {
+  height: 14px;
+  vertical-align: bottom;
+  margin-bottom: -2px;
+  margin-left: .5rem;
+}
+
+.ui.form .field > .selection.dropdown > .dropdown.icon {
+  height: auto;
+}
+
 .ui {
   &.left:not(.action) {
     float: left;
@@ -1118,6 +1129,10 @@ i.icon.centerlock {
   }
 }
 
+.lines-code {
+  padding-left: 5px;
+}
+
 .lines-code code {
   white-space: pre;
 }

web_src/less/_form.less

@@ -158,19 +158,8 @@
     #create-page-form;
 
     form {
-      .dropdown {
-        .dropdown.icon {
-          margin-top: -7px !important;
-          padding-bottom: 5px;
-        }
-
-        .text {
-          margin-right: 0 !important;
-
-          i {
-            margin-right: 0 !important;
-          }
-        }
+      .dropdown .text {
+        margin-right: 0 !important;
       }
 
       .header {

web_src/less/_repository.less

@@ -162,16 +162,6 @@
       padding: 0 8px;
     }
 
-    .svg {
-      float: left;
-      margin: 0 -7px 0 -5px;
-      width: 16px;
-    }
-
-    &.labels .svg {
-      margin: -2px -7px 0 -5px;
-    }
-
     &.labels {
       .label-filter .menu .info {
         display: inline-block;
@@ -191,21 +181,12 @@
       }
     }
 
-    .text {
-      margin-left: .9em;
-    }
-
     .menu {
       max-height: 300px;
       overflow-x: auto;
       right: 0 !important;
       left: auto !important;
     }
-
-    .dropdown.item {
-      margin: 1px;
-      padding-right: 0;
-    }
   }
 
   .select-label {
@@ -883,8 +864,8 @@
           justify-content: center;
 
           .svg {
-            width: 24px;
-            height: 24px;
+            width: 22px;
+            height: 22px;
             padding: 3px;
 
             &.octicon-circle-slash {
@@ -1040,22 +1021,6 @@
               top: -8px;
               left: 7px;
             }
-
-            .header-left > * + *,
-            .header-right > * + * {
-              margin-left: .25rem;
-            }
-
-            .actions {
-              a {
-                padding: .5rem;
-                color: rgba(0, 0, 0, .4);
-
-                &:hover {
-                  color: rgba(0, 0, 0, .8);
-                }
-              }
-            }
           }
 
           > .merge-section {
@@ -2047,11 +2012,6 @@
         margin-right: 5px;
       }
 
-      .dropdown.icon {
-        margin: 0;
-        padding-top: 3px;
-      }
-
       .selection.dropdown {
         padding-top: 10px;
         padding-bottom: 10px;
@@ -2458,12 +2418,16 @@
 
       &.disabled {
         cursor: default;
-        opacity: .5;
+        opacity: 1;
       }
     }
 
+    .ui.label.basic {
+      color: var(--color-primary) !important;
+    }
+
     .ui.label.basic.blue {
-      background-color: var(--color-primary-alpha-10) !important;
+      background-color: var(--color-primary-alpha-20) !important;
       border-color: inherit !important;
     }
 
@@ -2829,6 +2793,25 @@
   }
 }
 
+.comment-header .actions a {
+  margin-right: 0 !important;
+  padding: .5rem !important;
+}
+
+.comment-header a {
+  color: rgba(0, 0, 0, .4) !important;
+}
+
+.comment-header .actions a:hover,
+.comment-header .actions a.active {
+  color: rgba(0, 0, 0, .8) !important;
+}
+
+.comment-header-left > * + *,
+.comment-header-right > * + * {
+  margin-left: .25rem;
+}
+
 .edit-label.modal,
 .new-label.segment {
   .form {

web_src/less/_review.less

@@ -17,9 +17,17 @@
   }
 }
 
+.repository .diff-file-box .code-diff .add-comment-left,
+.repository .diff-file-box .code-diff .add-comment-right,
+.repository .diff-file-box .code-diff .add-code-comment .add-comment-left,
+.repository .diff-file-box .code-diff .add-code-comment .add-comment-right,
+.repository .diff-file-box .code-diff .add-code-comment .lines-type-marker {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
 .add-comment-left.add-comment-right .ui.attached.header {
   border: 1px solid #d4d4d5;
-  margin-top: .5em;
 
   &:not(.top) {
     margin-bottom: .5em;
@@ -39,21 +47,9 @@
 
 .comment-code-cloud {
   padding: 4px;
+  padding-left: 0;
   position: relative;
-  border: 1px solid #f1f1f1;
-  margin: 13px 10px 5px auto;
-
-  &:before {
-    content: " ";
-    width: 0;
-    height: 0;
-    border-left: 13px solid transparent;
-    border-right: 13px solid transparent;
-    border-bottom: 13px solid #f1f1f1;
-    left: 20px;
-    position: absolute;
-    top: -13px;
-  }
+  margin: 0 auto;
 
   .attached {
     &.tab {
@@ -94,7 +90,7 @@
   }
 
   .comment-list {
-    padding-bottom: 10px;
+    padding-bottom: 5px;
   }
 
   .footer {
@@ -153,9 +149,9 @@ a.blob-excerpt:hover {
 }
 
 .btn-review > .dropdown.icon {
-  width: auto;
-  font-size: .85714286em;
-  margin: 0 0 0 1em;
+  float: right;
+  height: 12px !important;
+  margin-left: .5rem;
 }
 
 @media only screen and (max-width: 768px) {

web_src/less/themes/theme-arc-green.less

@@ -428,6 +428,10 @@
   background-color: #383c4a;
 }
 
+.repository .segment.reactions .ui.label.basic.blue {
+  background: var(--color-primary-alpha-20) !important;
+}
+
 body {
   color: #a5a5a8;
 }
@@ -511,7 +515,7 @@ body {
 }
 
 .following.bar .top.menu a.item:hover {
-  color: #ffffff;
+  color: #fff;
 }
 
 .ui.attached.header {
@@ -629,7 +633,7 @@ footer {
 .ui.label.basic {
   color: #dbdbdb;
   border-color: #6a737d;
-  background-color: #353945;
+  background-color: #383c4a;
 }
 
 .issue.list > .item .title {
@@ -655,7 +659,7 @@ footer {
 a.ui.basic.green.label:hover {
   background-color: #16ab39 !important;
   border-color: #16ab39 !important;
-  color: #ffffff !important;
+  color: #fff !important;
 }
 
 .issue.list > .item .comment {
@@ -832,7 +836,7 @@ a.ui.basic.green.label:hover {
 }
 
 .ui.button {
-  background: #383c4a;
+  background: #353846;
   border: 1px solid #4c505c;
   color: #dbdbdb;
 }
@@ -1061,15 +1065,6 @@ a.ui.basic.green.label:hover {
   color: #dbdbdb !important;
 }
 
-.ui .comment .actions a {
-  color: #a5a5a8 !important;
-}
-
-.ui .comment .actions a.active,
-.ui .comment .actions a:hover {
-  color: #fff !important;
-}
-
 .repository.view.issue .comment-list .comment .content {
   > .bottom.segment {
     background: #353945;
@@ -1123,13 +1118,21 @@ a.ui.basic.green.label:hover {
 .repository.view.issue .comment-list .timeline-item .badge {
   background-color: #4c505c;
   border-color: #4c505c;
-  color: #a5a5a8;
+  color: #ccc;
 }
 
 .repository.view.issue .comment-list .timeline-item .badge.badge-commit {
   background: radial-gradient(var(--color-body) 40%, transparent 40%) no-repeat;
 }
 
+.comment-header-right a {
+  color: #a5a5a8;
+}
+
+.comment-header-right a:hover {
+  color: #dedede;
+}
+
 .repository.file.editor .commit-form-wrapper .commit-form {
   border-color: #505667;
 }
@@ -1208,6 +1211,10 @@ td.blob-hunk {
   color: #dbdbdb !important;
 }
 
+.lines-type-marker {
+  background: #2a2e3a;
+}
+
 .ui.vertical.menu .active.item {
   background: #4b5162;
 }
@@ -1421,23 +1428,19 @@ input {
   background: #404552;
   opacity: 1;
   color: #dbdbdb;
-  border-color: #4b505f;
-}
-
-.ui.checkbox .box:hover::before,
-.ui.checkbox label:hover::before {
-  background: #404552;
-  border-color: #4b505f;
+  border-color: #505667;
 }
 
 .ui.checkbox .box:before,
 .ui.checkbox label:before {
   background: #404552;
-  border: 1px solid #4b505f;
+  border: 1px solid #505667;
 }
 
-.ui.checkbox label:before {
-  border-color: #4b505f;
+.ui.checkbox .box:hover::before,
+.ui.checkbox label:hover::before {
+  background: #404552;
+  border-color: #505667;
 }
 
 .ui.checkbox .box:active::before,
@@ -1448,8 +1451,8 @@ input {
 
 .ui.checkbox input:focus ~ .box:before,
 .ui.checkbox input:focus ~ label:before {
-  border-color: #6a737d;
   background: #404552;
+  border-color: #6a737d;
 }
 
 .ui.checkbox input:checked:focus ~ .box:before,
@@ -1564,7 +1567,7 @@ input {
 
 .lines-num {
   color: #a5a5a8 !important;
-  border-color: #2d2d2d !important;
+  border-color: #4b505f !important;
 }
 
 td.blob-excerpt {
@@ -1598,13 +1601,17 @@ a.ui.labels .label:hover {
 
 .sha.label,
 .repository #repo-files-table .sha.label,
+.repository #commits-table td.sha .sha.label,
+.repository .timeline-item.commits-list .singular-commit .sha.label,
 .repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label {
-  border-color: #4c505c;
+  border-color: #505667;
 }
 
+.sha.label.isSigned .detail.icon,
 .repository #commits-table td.sha .sha.label.isSigned .detail.icon,
 .repository #repo-files-table .sha.label.isSigned .detail.icon,
-.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned .detail.icon {
+.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned .detail.icon,
+.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned .detail.icon {
   background: none;
   border-left-color: #888;
 }
@@ -1793,11 +1800,7 @@ a.ui.labels .label:hover {
 }
 
 .comment-code-cloud {
-  border-color: #3a3a3a;
-
-  &:before {
-    border-bottom: 13px solid #5a5a5a;
-  }
+  border-color: transparent;
 
   .ui.attached.top.header {
     background: none transparent;
@@ -1813,7 +1816,7 @@ a.ui.labels .label:hover {
       background: #404552;
     }
 
-    border-color: rgba(255, 255, 255, .15);
+    border-color: #4c505c;
   }
 
   .footer {
@@ -1849,6 +1852,15 @@ a.ui.labels .label:hover {
   }
 }
 
+.comment-header a {
+  color: #a5a5a8 !important;
+}
+
+.comment-header .actions a:hover,
+.comment-header .actions a.active {
+  color: #dedede !important;
+}
+
 .heatmap(@heat) {
   @heatmap-cold: #2d303b;
   @heatmap-hot: #a0cc75;