From e522e774cae2240279fc48c349fc513c9d3353ee Mon Sep 17 00:00:00 2001
From: Kyle D <kdumontnu@gmail.com>
Date: Fri, 5 Jan 2024 09:38:56 -0800
Subject: [PATCH] Add merge arrow direction and update styling (#28523)

Close https://github.com/go-gitea/gitea/issues/28522

~Adds some [negative
margin](https://tailwindcss.com/docs/margin#using-negative-values)
helper css classes using tailwind's [prefix
syntax](https://tailwindcss.com/docs/configuration#prefix)~

### Before

![image](https://github.com/go-gitea/gitea/assets/12700993/5bdabf91-facd-41c8-8e36-e1535beb9409)

### After

![image](https://github.com/go-gitea/gitea/assets/12700993/a6f11f6f-9e64-45b6-b9d7-dfea53fbc6d7)
---
 templates/repo/diff/compare.tmpl | 4 ++--
 web_src/css/repo.css             | 6 ++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/templates/repo/diff/compare.tmpl b/templates/repo/diff/compare.tmpl
index 0e8a598a65..42a7bf3c2a 100644
--- a/templates/repo/diff/compare.tmpl
+++ b/templates/repo/diff/compare.tmpl
@@ -36,7 +36,7 @@
 		{{- end -}}
 	{{- end -}}
 	<div class="ui segment choose branch">
-		<a href="{{$.HeadRepo.Link}}/compare/{{PathEscapeSegments $.HeadBranch}}{{$.CompareSeparator}}{{if not $.PullRequestCtx.SameRepo}}{{PathEscape $.BaseName}}/{{PathEscape $.Repository.Name}}:{{end}}{{PathEscapeSegments $.BaseBranch}}" title="{{ctx.Locale.Tr "repo.pulls.switch_head_and_base"}}">{{svg "octicon-git-compare"}}</a>
+		<a class="gt-mr-3" href="{{$.HeadRepo.Link}}/compare/{{PathEscapeSegments $.HeadBranch}}{{$.CompareSeparator}}{{if not $.PullRequestCtx.SameRepo}}{{PathEscape $.BaseName}}/{{PathEscape $.Repository.Name}}:{{end}}{{PathEscapeSegments $.BaseBranch}}" title="{{ctx.Locale.Tr "repo.pulls.switch_head_and_base"}}">{{svg "octicon-git-compare"}}</a>
 		<div class="ui floating filter dropdown" data-no-results="{{ctx.Locale.Tr "repo.pulls.no_results"}}">
 			<div class="ui basic small button">
 				<span class="text">{{if $.PageIsComparePull}}{{ctx.Locale.Tr "repo.pulls.compare_base"}}{{else}}{{ctx.Locale.Tr "repo.compare.compare_base"}}{{end}}: {{$BaseCompareName}}:{{$.BaseBranch}}</span>
@@ -105,7 +105,7 @@
 				</div>
 			</div>
 		</div>
-		<a href="{{.RepoLink}}/compare/{{PathEscapeSegments .BaseBranch}}{{.OtherCompareSeparator}}{{if not $.PullRequestCtx.SameRepo}}{{PathEscape $.HeadUser.Name}}/{{PathEscape $.HeadRepo.Name}}:{{end}}{{PathEscapeSegments $.HeadBranch}}" title="{{ctx.Locale.Tr "repo.pulls.switch_comparison_type"}}">{{.CompareSeparator}}</a>
+		<a href="{{.RepoLink}}/compare/{{PathEscapeSegments .BaseBranch}}{{.OtherCompareSeparator}}{{if not $.PullRequestCtx.SameRepo}}{{PathEscape $.HeadUser.Name}}/{{PathEscape $.HeadRepo.Name}}:{{end}}{{PathEscapeSegments $.HeadBranch}}" title="{{ctx.Locale.Tr "repo.pulls.switch_comparison_type"}}">{{svg "octicon-arrow-left" 16}}<div class="compare-separator">{{.CompareSeparator}}</div></a>
 		<div class="ui floating filter dropdown">
 			<div class="ui basic small button">
 				<span class="text">{{if $.PageIsComparePull}}{{ctx.Locale.Tr "repo.pulls.compare_compare"}}{{else}}{{ctx.Locale.Tr "repo.compare.compare_head"}}{{end}}: {{$HeadCompareName}}:{{$.HeadBranch}}</span>
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index e37788505e..6b6be99f74 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -1166,8 +1166,10 @@
   flex-wrap: wrap;
 }
 
-.repository .choose.branch .svg {
-  margin-right: 10px;
+.repository .choose .compare-separator {
+  width: 100%;
+  margin-top: -1rem;
+  text-align: center;
 }
 
 .repository.compare.pull .comment.form .content::before,