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>
2025-07-22 18:28:37 +00:00 · 2020-11-29 07:22:04 +01:00
parent da4bb6fc4e
commit e00a355427
17 changed files with 416 additions and 520 deletions
--- a/templates/explore/repo_list.tmpl
+++ b/templates/explore/repo_list.tmpl
@@ -8,7 +8,9 @@
 				<a class="name" href="{{.Link}}">
 					{{if or $.PageIsExplore $.PageIsProfileStarList }}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}}
 				</a>
-				{{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 .IsTemplate}}
 					{{if .IsPrivate}}
 						<span class="ui basic label">{{$.i18n.Tr "repo.desc.private_template"}}</span>
--- a/templates/org/home.tmpl
+++ b/templates/org/home.tmpl
@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<div class="organization profile">
+<div class="organization profile mt-5">
 	{{/* overflow: auto is the clearfix - this avoids the image going beyond
 	the container where it is supposed to stay inside. */}}
 	<div class="ui container" style="overflow: auto">
@@ -8,8 +8,8 @@
 			<div class="ui header">
 				{{.Org.DisplayName}}
 				<span class="org-visibility">
-					{{if .Org.Visibility.IsLimited}}<div class="ui large orange horizontal label">{{.i18n.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
-					{{if .Org.Visibility.IsPrivate}}<div class="ui large red horizontal label">{{.i18n.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
+					{{if .Org.Visibility.IsLimited}}<div class="ui large basic horizontal label">{{.i18n.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
+					{{if .Org.Visibility.IsPrivate}}<div class="ui large basic horizontal label">{{.i18n.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
 				</span>
 				{{if .IsOrganizationOwner}}<a class="middle text grey" href="{{.OrgLink}}/settings">{{svg "octicon-gear"}}</a>{{end}}
 			</div>
--- 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}}
--- 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">
--- 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>
--- 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}}
--- 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>
--- 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 }}
--- 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>
-							{{if .IsDraft}}
-								<input class="ui grey button" type="submit" name="draft" value="{{.i18n.Tr "repo.release.save_draft"}}"/>
-								<button class="ui green button">
-									{{.i18n.Tr "repo.release.publish"}}
-								</button>
-							{{else}}
-								<button class="ui green 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>
+							{{if .IsDraft}}
+								<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 primary button">
+									{{.i18n.Tr "repo.release.edit_release"}}
+								</button>
+							{{end}}
 						{{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>
--- 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)}}