Dropdowns, Labels fixes and more CSS tweaks (#13733)

* Dropdowns and Labels fixes

- Rework dropdown, menu and label styles
- Improve issue sidebar milestone and label sections
- Fix archived repo and private org badge
- Move more colors to CSS vars
- Move issue number to end of title on issue page

* more dropdown fixes

* fix basic blue labels - fixes #13731

* improve class setting on svg

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

8 files changed, 154 insertions, 125 deletions

diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 77f2362f8e..51f49b5994 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -28,7 +28,9 @@
 						{{end}}
 					{{end}}
 				{{end}}
-				{{if .IsArchived}}<span class="ui compact label">{{$.i18n.Tr "repo.desc.archived"}}</span>{{end}}
+				{{if .IsArchived}}
+          <span class="ui basic label">{{$.i18n.Tr "repo.desc.archived"}}</span>
+        {{end}}
 				{{if .IsMirror}}<div class="fork-flag">{{$.i18n.Tr "repo.mirror_from"}} <a target="_blank" rel="noopener noreferrer" href="{{if .SanitizedOriginalURL}}{{.SanitizedOriginalURL}}{{else}}{{MirrorAddress $.Mirror}}{{end}}">{{if .SanitizedOriginalURL}}{{.SanitizedOriginalURL}}{{else}}{{MirrorAddress $.Mirror}}{{end}}</a></div>{{end}}
 				{{if .IsFork}}<div class="fork-flag">{{$.i18n.Tr "repo.forked_from"}} <a href="{{.BaseRepo.Link}}">{{SubStr .BaseRepo.RelLink 1 -1}}</a></div>{{end}}
 				{{if .IsGenerated}}<div class="fork-flag">{{$.i18n.Tr "repo.generated_from"}} <a href="{{.TemplateRepo.Link}}">{{SubStr .TemplateRepo.RelLink 1 -1}}</a></div>{{end}}
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 73508bdd2f..98c5aa5738 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -23,12 +23,12 @@
 				</div>
 			{{end}}
 		</div>
-		<div class="ui" id="repo-topics">
-		{{range .Topics}}<a class="ui repo-topic small label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
-		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<a id="manage_topic">{{.i18n.Tr "repo.topic.manage_topics"}}</a>{{end}}
+		<div class="mt-3" id="repo-topics">
+		{{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
+		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<a id="manage_topic" class="muted">{{.i18n.Tr "repo.topic.manage_topics"}}</a>{{end}}
 		</div>
 		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
-		<div class="ui repo-topic-edit grid form segment error" id="topic_edit" style="display:none">
+		<div class="ui repo-topic-edit grid form" id="topic_edit" style="display:none">
 			<div class="fourteen wide column">
 				<div class="field">
 					<div class="ui fluid multiple search selection dropdown">
diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl
index 9958efc07d..5794ac422f 100644
--- a/templates/repo/issue/milestone_issues.tmpl
+++ b/templates/repo/issue/milestone_issues.tmpl
@@ -14,9 +14,9 @@
 			{{if not .Repository.IsArchived}}
 				<div class="column right aligned">
 					{{if or .CanWriteIssues .CanWritePulls}}
-					<a class="ui grey button" href="{{.RepoLink}}/milestones/{{.MilestoneID}}/edit">{{.i18n.Tr "repo.milestones.edit"}}</a>
+					<a class="ui button" href="{{.RepoLink}}/milestones/{{.MilestoneID}}/edit">{{.i18n.Tr "repo.milestones.edit"}}</a>
 					{{end}}
-					<a class="ui green button" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}?milestone={{.MilestoneID}}">{{.i18n.Tr "repo.issues.new"}}</a>
+					<a class="ui primary button" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}?milestone={{.MilestoneID}}">{{.i18n.Tr "repo.issues.new"}}</a>
 				</div>
 			{{end}}
 		</div>
diff --git a/templates/repo/issue/new_form.tmpl b/templates/repo/issue/new_form.tmpl
index 73a3851e17..4814ba590b 100644
--- a/templates/repo/issue/new_form.tmpl
+++ b/templates/repo/issue/new_form.tmpl
@@ -99,21 +99,25 @@
 						{{if .OpenMilestones}}
 							<div class="divider"></div>
 							<div class="header">
-								{{svg "octicon-milestone"}}
 								{{.i18n.Tr "repo.issues.new.open_milestone"}}
 							</div>
 							{{range .OpenMilestones}}
-								<div class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}"> {{.Name}}</div>
+								<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
+									{{svg "octicon-milestone" 16 "mr-2"}}
+									{{.Name}}
+								</a>
 							{{end}}
 						{{end}}
 						{{if .ClosedMilestones}}
 							<div class="divider"></div>
 							<div class="header">
-								{{svg "octicon-milestone"}}
 								{{.i18n.Tr "repo.issues.new.closed_milestone"}}
 							</div>
 							{{range .ClosedMilestones}}
-								<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}"> {{.Name}}</a>
+								<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
+									{{svg "octicon-milestone" 16 "mr-2"}}
+									{{.Name}}
+								</a>
 							{{end}}
 						{{end}}
 					{{end}}
@@ -123,7 +127,10 @@
 				<span class="no-select item {{if .Milestone}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_milestone"}}</span>
 				<div class="selected">
 					{{if .Milestone}}
-						<a class="item" href="{{.RepoLink}}/issues?milestone={{.Milestone.ID}}"> {{.Milestone.Name}}</a>
+						<a class="item muted sidebar-item-link" href="{{.RepoLink}}/issues?milestone={{.Milestone.ID}}">
+							{{svg "octicon-milestone" 18 "mr-3"}}
+							{{.Milestone.Name}}
+						</a>
 					{{end}}
 				</div>
 			</div>
@@ -133,61 +140,66 @@
 
 			<input id="project_id" name="project_id" type="hidden" value="{{.project_id}}">
 			<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-project dropdown">
-			  <span class="text">
-			    <strong>{{.i18n.Tr "repo.issues.new.projects"}}</strong>
-			    {{if .HasIssuesOrPullsWritePermission}}
-			      {{svg "octicon-gear"}}
-			    {{end}}
-			  </span>
-			  <div class="menu">
-			    <div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_project_title"}}</div>
-			    {{if or .OpenProjects .ClosedProjects}}
-			    <div class="ui icon search input">
-			      <i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
-			      <input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_projects"}}">
-			    </div>
-			    {{end}}
-			    <div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_projects"}}</div>
-			    {{if and (not .OpenProjects) (not .ClosedProjects)}}
-			      <div class="header" style="text-transform: none;font-size:14px;">
-			        {{.i18n.Tr "repo.issues.new.no_items"}}
-			      </div>
-			    {{else}}
-			      {{if .OpenProjects}}
-			        <div class="divider"></div>
-			        <div class="header">
-			          {{svg "octicon-project"}}
-			          {{.i18n.Tr "repo.issues.new.open_projects"}}
-			        </div>
-			        {{range .OpenProjects}}
-			          <div class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">{{.Title}}</div>
-			        {{end}}
-			      {{end}}
-			      {{if .ClosedProjects}}
-			        <div class="divider"></div>
-			        <div class="header">
-			          {{svg "octicon-project"}}
-			          {{.i18n.Tr "repo.issues.new.closed_projects"}}
-			        </div>
-			        {{range .ClosedProjects}}
-			          <a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">{{.Title}}</a>
-			        {{end}}
-			      {{end}}
-			    {{end}}
-			  </div>
+				<span class="text">
+					<strong>{{.i18n.Tr "repo.issues.new.projects"}}</strong>
+					{{if .HasIssuesOrPullsWritePermission}}
+						{{svg "octicon-gear"}}
+					{{end}}
+				</span>
+				<div class="menu">
+					<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_project_title"}}</div>
+					{{if or .OpenProjects .ClosedProjects}}
+					<div class="ui icon search input">
+						<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
+						<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_projects"}}">
+					</div>
+					{{end}}
+					<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_projects"}}</div>
+					{{if and (not .OpenProjects) (not .ClosedProjects)}}
+						<div class="header" style="text-transform: none;font-size:14px;">
+							{{.i18n.Tr "repo.issues.new.no_items"}}
+						</div>
+					{{else}}
+						{{if .OpenProjects}}
+							<div class="divider"></div>
+							<div class="header">
+								{{.i18n.Tr "repo.issues.new.open_projects"}}
+							</div>
+							{{range .OpenProjects}}
+								<a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">
+									{{svg "octicon-project" 18 "mr-3"}}
+									{{.Title}}
+								</a>
+							{{end}}
+						{{end}}
+						{{if .ClosedProjects}}
+							<div class="divider"></div>
+							<div class="header">
+								{{.i18n.Tr "repo.issues.new.closed_projects"}}
+							</div>
+							{{range .ClosedProjects}}
+								<a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">
+									{{svg "octicon-project" 18 "mr-3"}}
+									{{.Title}}
+								</a>
+							{{end}}
+						{{end}}
+					{{end}}
+				</div>
 			</div>
 			<div class="ui select-project list">
-			  <span class="no-select item {{if .Project}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_projects"}}</span>
-			  <div class="selected">
-			    {{if .Project}}
-			      <a class="item" href="{{.RepoLink}}/projects/{{.Project.ID}}">{{.Project.Title}}</a>
-			    {{end}}
-			  </div>
+				<span class="no-select item {{if .Project}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_projects"}}</span>
+				<div class="selected">
+					{{if .Project}}
+						<a class="item muted sidebar-item-link" href="{{.RepoLink}}/projects/{{.Project.ID}}">
+							{{svg "octicon-project" 18 "mr-3"}}
+							{{.Project.Title}}
+						</a>
+					{{end}}
+				</div>
 			</div>
 			{{end}}
-
 			<div class="ui divider"></div>
-
 				<input id="assignee_ids" name="assignee_ids" type="hidden" value="{{.assignee_ids}}">
 				<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-assignees dropdown">
 					<span class="text">
@@ -204,7 +216,7 @@
 						</div>
 						<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_assignees"}}</div>
 						{{range .Assignees}}
-							<a class="item" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
+							<a class="item muted" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
 								<span class="octicon-check invisible">{{svg "octicon-check"}}</span>
 								<span class="text">
 									<img class="ui avatar image" src="{{.RelAvatarLink}}"> {{.GetDisplayName}}
@@ -218,7 +230,7 @@
 						{{.i18n.Tr "repo.issues.new.no_assignees"}}
 					</span>
 					{{range .Assignees}}
-						<a style="padding: 5px;color:rgba(0, 0, 0, 0.87);" class="hide item" id="assignee_{{.ID}}" href="{{$.RepoLink}}/issues?assignee={{.ID}}">
+						<a class="hide item p-2 muted" id="assignee_{{.ID}}" href="{{$.RepoLink}}/issues?assignee={{.ID}}">
 							<img class="ui avatar image" src="{{.RelAvatarLink}}" style="vertical-align: middle;">&nbsp;{{.GetDisplayName}}
 						</a>
 					{{end}}
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index 18bd11ce6a..de1fd58232 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -55,8 +55,8 @@
 				{{range .PullReviewers}}
 					<div class="item mb-2">
 						{{if .User}}
-							<a href="{{.User.HomeLink}}">
-								<img class="ui avatar image mr-2" src="{{.User.RelAvatarLink}}">
+							<a class="muted sidebar-item-link" href="{{.User.HomeLink}}">
+								<img class="ui avatar image mr-3" src="{{.User.RelAvatarLink}}">
 								{{.User.GetDisplayName}}
 							</a>
 						{{else if .Team}}
@@ -153,21 +153,25 @@
 					{{if .OpenMilestones}}
 						<div class="divider"></div>
 						<div class="header">
-							{{svg "octicon-milestone"}}
 							{{.i18n.Tr "repo.issues.new.open_milestone"}}
 						</div>
 						{{range .OpenMilestones}}
-							<div class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}"> {{.Name}}</div>
+							<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
+								{{svg "octicon-milestone" 16 "mr-2"}}
+								{{.Name}}
+							</a>
 						{{end}}
 					{{end}}
 					{{if .ClosedMilestones}}
 						<div class="divider"></div>
 						<div class="header">
-							{{svg "octicon-milestone"}}
 							{{.i18n.Tr "repo.issues.new.closed_milestone"}}
 						</div>
 						{{range .ClosedMilestones}}
-							<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}"> {{.Name}}</a>
+							<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
+								{{svg "octicon-milestone" 16 "mr-2"}}
+								{{.Name}}
+							</a>
 						{{end}}
 					{{end}}
 				{{end}}
@@ -177,14 +181,17 @@
 			<span class="no-select item {{if .Issue.Milestone}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_milestone"}}</span>
 			<div class="selected">
 				{{if .Issue.Milestone}}
-					<a class="item" href="{{.RepoLink}}/milestone/{{.Issue.Milestone.ID}}"> {{.Issue.Milestone.Name}}</a>
+					<a class="item muted sidebar-item-link" href="{{.RepoLink}}/milestone/{{.Issue.Milestone.ID}}">
+						{{svg "octicon-milestone" 18 "mr-3"}}
+						{{.Issue.Milestone.Name}}
+					</a>
 				{{end}}
 			</div>
 		</div>
 
 		{{if .IsProjectsEnabled}}
 		<div class="ui divider"></div>
-		
+
 		<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-project dropdown">
 			<span class="text">
 				<strong>{{.i18n.Tr "repo.issues.new.projects"}}</strong>
@@ -195,21 +202,25 @@
 				{{if .OpenProjects}}
 					<div class="divider"></div>
 					<div class="header">
-						{{svg "octicon-project"}}
 						{{.i18n.Tr "repo.issues.new.open_projects"}}
 					</div>
 					{{range .OpenProjects}}
-						<div class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">{{svg "octicon-project"}} {{.Title}}</div>
+						<a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">
+							{{svg "octicon-project" 18 "mr-3"}}
+							{{.Title}}
+						</a>
 					{{end}}
 				{{end}}
 				{{if .ClosedProjects}}
 					<div class="divider"></div>
 					<div class="header">
-						{{svg "octicon-project"}}
 						{{.i18n.Tr "repo.issues.new.closed_projects"}}
 					</div>
 					{{range .ClosedProjects}}
-						<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">{{svg "octicon-project"}} {{.Title}}</a>
+						<a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">
+							{{svg "octicon-project" 18 "mr-3"}}
+							{{.Title}}
+						</a>
 					{{end}}
 				{{end}}
 			</div>
@@ -218,7 +229,10 @@
 			<span class="no-select item {{if .Issue.ProjectID}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_projects"}}</span>
 			<div class="selected">
 				{{if .Issue.ProjectID}}
-					<a class="item" href="{{.RepoLink}}/projects/{{.Issue.ProjectID}}">{{svg "octicon-project"}} {{.Issue.Project.Title}}</a>
+					<a class="item muted sidebar-item-link" href="{{.RepoLink}}/projects/{{.Issue.ProjectID}}">
+						{{svg "octicon-project" 18 "mr-3"}}
+						{{.Issue.Project.Title}}
+					</a>
 				{{end}}
 			</div>
 		</div>
@@ -264,9 +278,9 @@
 			<span class="no-select item {{if .Issue.Assignees}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_assignees"}}</span>
 			<div class="selected">
 				{{range .Issue.Assignees}}
-					<div class="item" style="margin-bottom: 10px;">
-						<a href="{{$.RepoLink}}/{{if $.Issue.IsPull}}pulls{{else}}issues{{end}}?assignee={{.ID}}">
-							<img class="ui avatar image mr-2" src="{{.RelAvatarLink}}">
+					<div class="item">
+						<a class="muted sidebar-item-link" href="{{$.RepoLink}}/{{if $.Issue.IsPull}}pulls{{else}}issues{{end}}?assignee={{.ID}}">
+							<img class="ui avatar image mr-3" src="{{.RelAvatarLink}}">
 							{{.GetDisplayName}}
 						</a>
 					</div>
diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl
index db55142170..e2a14502f4 100644
--- a/templates/repo/issue/view_title.tmpl
+++ b/templates/repo/issue/view_title.tmpl
@@ -1,21 +1,22 @@
 <div class="sixteen wide column title">
 	<div class="issue-title" id="issue-title-wrapper">
 		{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
-  		<div class="edit-button">
-  			<div id="edit-title" class="ui basic green not-in-edit button">{{.i18n.Tr "repo.issues.edit"}}</div>
-  		</div>
+			<div class="edit-button">
+				<div id="edit-title" class="ui basic green not-in-edit button">{{.i18n.Tr "repo.issues.edit"}}</div>
+			</div>
 		{{end}}
 		<h1>
-			<span class="index">#{{.Issue.Index}}</span> <span id="issue-title">{{RenderEmoji .Issue.Title}}</span>
+			<span id="issue-title">{{RenderEmoji .Issue.Title}}</span>
+			<span class="index">#{{.Issue.Index}}</span>
 			<div id="edit-title-input" class="ui input" style="display: none">
 				<input value="{{.Issue.Title}}" maxlength="255">
 			</div>
 		</h1>
 		{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
-  		<div class="edit-buttons">
+			<div class="edit-buttons">
 				<div id="cancel-edit-title" class="ui basic blue in-edit button" style="display: none">{{.i18n.Tr "repo.issues.cancel"}}</div>
 				<div id="save-edit-title" class="ui green in-edit button" style="display: none" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title" {{if .Issue.IsPull}}data-target-update-url="{{$.RepoLink}}/pull/{{.Issue.Index}}/target_branch"{{end}}>{{.i18n.Tr "repo.issues.save"}}</div>
-  		</div>
+			</div>
 		{{end}}
 	</div>
 	{{if .HasMerged}}
@@ -45,37 +46,37 @@
 				<span id="pull-desc" class="pull-desc">
 				 <a {{if gt .Issue.Poster.ID 0}}href="{{.Issue.Poster.HomeLink}}"{{end}}>{{.Issue.Poster.GetDisplayName}}</a>
 				 {{$.i18n.Tr "repo.pulls.title_desc" .NumCommits (.HeadTarget|Escape) (.BaseTarget|Escape) | Str2html}}
-			    </span>
+					</span>
 			{{end}}
 			<span id="pull-desc-edit" style="display: none">
-                <div class="ui floating filter dropdown">
-                	<div class="ui basic small button">
-                		<span class="text">{{.i18n.Tr "repo.pulls.compare_compare"}}: {{$.HeadTarget}}</span>
-                	</div>
-                </div>
-                {{svg "octicon-arrow-right"}}
-                 <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>
-                		{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-                	</div>
-                	<div class="menu">
-                		<div class="ui icon search input">
-                			<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
-                			<input name="search" placeholder="{{.i18n.Tr "repo.pulls.filter_branch"}}...">
-                		</div>
-                		<div class="scrolling menu" id="branch-select">
-                			{{range .Branches}}
-                				{{ $sameBase := ne $.BaseName $.HeadUserName }}
-                				{{ $differentBranch := ne . $.HeadBranch }}
-                				{{ if or $sameBase $differentBranch }}
-                					<div class="item {{if eq $.BaseBranch .}}selected{{end}}" data-branch="{{.}}">{{$.BaseName}}{{if $.HeadRepo}}/{{$.HeadRepo}}{{end}}:{{.}}</div>
-                				{{ end }}
-                			{{end}}
-                		</div>
-                	</div>
-                </div>
-           </span>
+								<div class="ui floating filter dropdown">
+									<div class="ui basic small button">
+										<span class="text">{{.i18n.Tr "repo.pulls.compare_compare"}}: {{$.HeadTarget}}</span>
+									</div>
+								</div>
+								{{svg "octicon-arrow-right"}}
+								 <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>
+										{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+									</div>
+									<div class="menu">
+										<div class="ui icon search input">
+											<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>
+											<input name="search" placeholder="{{.i18n.Tr "repo.pulls.filter_branch"}}...">
+										</div>
+										<div class="scrolling menu" id="branch-select">
+											{{range .Branches}}
+												{{ $sameBase := ne $.BaseName $.HeadUserName }}
+												{{ $differentBranch := ne . $.HeadBranch }}
+												{{ if or $sameBase $differentBranch }}
+													<div class="item {{if eq $.BaseBranch .}}selected{{end}}" data-branch="{{.}}">{{$.BaseName}}{{if $.HeadRepo}}/{{$.HeadRepo}}{{end}}:{{.}}</div>
+												{{ end }}
+											{{end}}
+										</div>
+									</div>
+								</div>
+					 </span>
 		{{end}}
 	{{else}}
 		{{ $createdStr:= TimeSinceUnix .Issue.CreatedUnix $.Lang }}
diff --git a/templates/repo/release/new.tmpl b/templates/repo/release/new.tmpl
index 883d103998..7c38f54019 100644
--- a/templates/repo/release/new.tmpl
+++ b/templates/repo/release/new.tmpl
@@ -67,27 +67,27 @@
 					<span class="help">{{.i18n.Tr "repo.release.prerelease_helper"}}</span>
 					<div class="field">
 						{{if .PageIsEditRelease}}
-							<a class="ui blue basic button" href="{{.RepoLink}}/releases">
+							<a class="ui button" href="{{.RepoLink}}/releases">
 								{{.i18n.Tr "repo.release.cancel"}}
 							</a>
+							<a class="ui red button delete-button" data-url="{{$.RepoLink}}/releases/delete" data-id="{{.ID}}">
+								{{$.i18n.Tr "repo.release.delete_release"}}
+							</a>
 							{{if .IsDraft}}
-								<input class="ui grey button" type="submit" name="draft" value="{{.i18n.Tr "repo.release.save_draft"}}"/>
-								<button class="ui green button">
+								<input class="ui button" type="submit" name="draft" value="{{.i18n.Tr "repo.release.save_draft"}}"/>
+								<button class="ui primary button">
 									{{.i18n.Tr "repo.release.publish"}}
 								</button>
 							{{else}}
-								<button class="ui green button">
+								<button class="ui primary button">
 									{{.i18n.Tr "repo.release.edit_release"}}
 								</button>
 							{{end}}
-							<a class="ui red button delete-button" data-url="{{$.RepoLink}}/releases/delete" data-id="{{.ID}}">
-								{{$.i18n.Tr "repo.release.delete_release"}}
-							</a>
 						{{else}}
-							<button class="ui green button">
+							<input class="ui button" type="submit" name="draft" value="{{.i18n.Tr "repo.release.save_draft"}}"/>
+							<button class="ui primary button">
 								{{.i18n.Tr "repo.release.publish"}}
 							</button>
-							<input class="ui grey button" type="submit" name="draft" value="{{.i18n.Tr "repo.release.save_draft"}}"/>
 						{{end}}
 					</div>
 				</div>
diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl
index 239707f23f..6c455a4d5d 100644
--- a/templates/repo/sub_menu.tmpl
+++ b/templates/repo/sub_menu.tmpl
@@ -1,4 +1,4 @@
-<div class="ui segments repository-summary{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats }} repository-summary-language-stats{{end}}">
+<div class="ui segments repository-summary{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats }} repository-summary-language-stats{{end}} mt-3">
 	<div class="ui segment sub-menu repository-menu">
 		<div class="ui two horizontal center link list">
 			{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo)}}