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>

6 files changed, 77 insertions, 57 deletions

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 36928f7b84..f30b81cb9e 100644
--- a/templates/repo/diff/box.tmpl
+++ b/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}}
diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
index 076d2d969e..4785f3a513 100644
--- a/templates/repo/diff/comments.tmpl
+++ b/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">
diff --git a/templates/repo/diff/compare.tmpl b/templates/repo/diff/compare.tmpl
index cae57540a7..920ff120f7 100644
--- a/templates/repo/diff/compare.tmpl
+++ b/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">
diff --git a/templates/repo/diff/new_review.tmpl b/templates/repo/diff/new_review.tmpl
index c92bac4155..b3f735a7f2 100644
--- a/templates/repo/diff/new_review.tmpl
+++ b/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">
diff --git a/templates/repo/diff/options_dropdown.tmpl b/templates/repo/diff/options_dropdown.tmpl
index 8dcf398240..92d870ea8a 100644
--- a/templates/repo/diff/options_dropdown.tmpl
+++ b/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}}
diff --git a/templates/repo/diff/whitespace_dropdown.tmpl b/templates/repo/diff/whitespace_dropdown.tmpl
index 65fd871ba5..1e0e046925 100644
--- a/templates/repo/diff/whitespace_dropdown.tmpl
+++ b/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>