CSS navbar and color tweaks (#13609)

* CSS and color tweaks

- Unify navbar-style menus
- Fix admin bar overlapping menu bar
- Fixes file edit comment box
- Fix double border on review box
- Fix review timeline icons

* Many fixes to new-menu and navbar layout enhancements

* misc settings fixes

* navbar tweak

* fix pr tabs

* branch tag and arc color tweaks

9 files changed, 140 insertions, 126 deletions

diff --git a/templates/admin/navbar.tmpl b/templates/admin/navbar.tmpl
index 6d81d7557f..8c895b8c27 100644
--- a/templates/admin/navbar.tmpl
+++ b/templates/admin/navbar.tmpl
@@ -1,35 +1,37 @@
 <div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar">
-	<a class="{{if .PageIsAdminDashboard}}active{{end}} item" href="{{AppSubUrl}}/admin">
-		{{.i18n.Tr "admin.dashboard"}}
-	</a>
-	<a class="{{if .PageIsAdminUsers}}active{{end}} item" href="{{AppSubUrl}}/admin/users">
-		{{.i18n.Tr "admin.users"}}
-	</a>
-	<a class="{{if .PageIsAdminOrganizations}}active{{end}} item" href="{{AppSubUrl}}/admin/orgs">
-		{{.i18n.Tr "admin.organizations"}}
-	</a>
-	<a class="{{if .PageIsAdminRepositories}}active{{end}} item" href="{{AppSubUrl}}/admin/repos">
-		{{.i18n.Tr "admin.repositories"}}
-	</a>
-	<a class="{{if .PageIsAdminHooks}}active{{end}} item" href="{{AppSubUrl}}/admin/hooks">
-		{{.i18n.Tr "admin.hooks"}}
-	</a>
-	<a class="{{if .PageIsAdminSystemHooks}}active{{end}} item" href="{{AppSubUrl}}/admin/system-hooks">
-		{{.i18n.Tr "admin.systemhooks"}}
-	</a>
-	<a class="{{if .PageIsAdminAuthentications}}active{{end}} item" href="{{AppSubUrl}}/admin/auths">
-		{{.i18n.Tr "admin.authentication"}}
-	</a>
-	<a class="{{if .PageIsAdminEmails}}active{{end}} item" href="{{AppSubUrl}}/admin/emails">
-		{{.i18n.Tr "admin.emails"}}
-	</a>
-	<a class="{{if .PageIsAdminConfig}}active{{end}} item" href="{{AppSubUrl}}/admin/config">
-		{{.i18n.Tr "admin.config"}}
-	</a>
-	<a class="{{if .PageIsAdminNotices}}active{{end}} item" href="{{AppSubUrl}}/admin/notices">
-		{{.i18n.Tr "admin.notices"}}
-	</a>
-	<a class="{{if .PageIsAdminMonitor}}active{{end}} item" href="{{AppSubUrl}}/admin/monitor">
-		{{.i18n.Tr "admin.monitor"}}
-	</a>
+	<div class="new-menu-inner">
+		<a class="{{if .PageIsAdminDashboard}}active{{end}} item" href="{{AppSubUrl}}/admin">
+			{{.i18n.Tr "admin.dashboard"}}
+		</a>
+		<a class="{{if .PageIsAdminUsers}}active{{end}} item" href="{{AppSubUrl}}/admin/users">
+			{{.i18n.Tr "admin.users"}}
+		</a>
+		<a class="{{if .PageIsAdminOrganizations}}active{{end}} item" href="{{AppSubUrl}}/admin/orgs">
+			{{.i18n.Tr "admin.organizations"}}
+		</a>
+		<a class="{{if .PageIsAdminRepositories}}active{{end}} item" href="{{AppSubUrl}}/admin/repos">
+			{{.i18n.Tr "admin.repositories"}}
+		</a>
+		<a class="{{if .PageIsAdminHooks}}active{{end}} item" href="{{AppSubUrl}}/admin/hooks">
+			{{.i18n.Tr "admin.hooks"}}
+		</a>
+		<a class="{{if .PageIsAdminSystemHooks}}active{{end}} item" href="{{AppSubUrl}}/admin/system-hooks">
+			{{.i18n.Tr "admin.systemhooks"}}
+		</a>
+		<a class="{{if .PageIsAdminAuthentications}}active{{end}} item" href="{{AppSubUrl}}/admin/auths">
+			{{.i18n.Tr "admin.authentication"}}
+		</a>
+		<a class="{{if .PageIsAdminEmails}}active{{end}} item" href="{{AppSubUrl}}/admin/emails">
+			{{.i18n.Tr "admin.emails"}}
+		</a>
+		<a class="{{if .PageIsAdminConfig}}active{{end}} item" href="{{AppSubUrl}}/admin/config">
+			{{.i18n.Tr "admin.config"}}
+		</a>
+		<a class="{{if .PageIsAdminNotices}}active{{end}} item" href="{{AppSubUrl}}/admin/notices">
+			{{.i18n.Tr "admin.notices"}}
+		</a>
+		<a class="{{if .PageIsAdminMonitor}}active{{end}} item" href="{{AppSubUrl}}/admin/monitor">
+			{{.i18n.Tr "admin.monitor"}}
+		</a>
+	</div>
 </div>
diff --git a/templates/repo/editor/commit_form.tmpl b/templates/repo/editor/commit_form.tmpl
index 0bfb11ad2a..ff94d01821 100644
--- a/templates/repo/editor/commit_form.tmpl
+++ b/templates/repo/editor/commit_form.tmpl
@@ -2,9 +2,11 @@
 	<img width="48" height="48" class="ui image commit-avatar" src="{{.SignedUser.RelAvatarLink}}">
 	<div class="commit-form">
 		<h3>{{- if .CanCommitToBranch.WillSign}}
-		<i title="{{.i18n.Tr "repo.signing.will_sign" .CanCommitToBranch.SigningKey}}" class="lock green icon"></i>{{.i18n.Tr "repo.editor.commit_signed_changes"}}
+			<span title="{{.i18n.Tr "repo.signing.will_sign" .CanCommitToBranch.SigningKey}}">{{svg "octicon-lock" 24}}</span>
+			{{.i18n.Tr "repo.editor.commit_signed_changes"}}
 		{{- else}}
-		<i title="{{.i18n.Tr (printf "repo.signing.wont_sign.%s" .CanCommitToBranch.WontSignReason)}}" class="unlock grey icon"></i>{{.i18n.Tr "repo.editor.commit_changes"}}
+			<span title="{{.i18n.Tr (printf "repo.signing.wont_sign.%s" .CanCommitToBranch.WontSignReason)}}">{{svg "octicon-unlock" 24}}</span>
+			{{.i18n.Tr "repo.editor.commit_changes"}}
 		{{- end}}</h3>
 		<div class="field">
 			<input name="commit_summary" placeholder="{{if .PageIsDelete}}{{.i18n.Tr "repo.editor.delete" .TreePath}}{{else if .PageIsUpload}}{{.i18n.Tr "repo.editor.upload_files_to_dir" .TreePath}}{{else if .IsNewFile}}{{.i18n.Tr "repo.editor.add_tmpl"}}{{else}}{{.i18n.Tr "repo.editor.update" .TreePath}}{{end}}" value="{{.commit_summary}}" autofocus>
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index 77b02f67a5..d1e380ebf0 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -403,10 +403,10 @@
 					<img src="{{.Poster.RelAvatarLink}}">
 				</a>
 				{{end}}
-				<span class="badge {{if eq .Review.Type 1}}green
-				{{- else if eq .Review.Type 2}}grey
-				{{- else if eq .Review.Type 3}}red
-				{{- else}}grey{{end}}">{{svg (printf "octicon-%s" .Review.Type.Icon)}}</span>
+				<span class="badge {{if eq .Review.Type 1}}bg-green
+				{{- else if eq .Review.Type 2}}bg-grey
+				{{- else if eq .Review.Type 3}}bg-red
+				{{- else}}bg-grey{{end}} text-white">{{svg (printf "octicon-%s" .Review.Type.Icon)}}</span>
 				<span class="text grey">
 					{{if .OriginalAuthor }}
 						<span class="text black"><i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i> {{ .OriginalAuthor }}</span><span class="text grey"> {{if $.Repository.OriginalURL}}</span><span class="text migrate">({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}</span>
diff --git a/templates/repo/settings/navbar.tmpl b/templates/repo/settings/navbar.tmpl
index abd6e285dc..1944bd12e2 100644
--- a/templates/repo/settings/navbar.tmpl
+++ b/templates/repo/settings/navbar.tmpl
@@ -1,29 +1,31 @@
 <div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar">
-	<a class="{{if .PageIsSettingsOptions}}active{{end}} item" href="{{.RepoLink}}/settings">
-		{{.i18n.Tr "repo.settings.options"}}
-	</a>
-	<a class="{{if .PageIsSettingsCollaboration}}active{{end}} item" href="{{.RepoLink}}/settings/collaboration">
-		{{.i18n.Tr "repo.settings.collaboration"}}
-	</a>
-	{{if not .Repository.IsEmpty}}
-		<a class="{{if .PageIsSettingsBranches}}active{{end}} item" href="{{.RepoLink}}/settings/branches">
-			{{.i18n.Tr "repo.settings.branches"}}
+	<div class="new-menu-inner">
+		<a class="{{if .PageIsSettingsOptions}}active{{end}} item" href="{{.RepoLink}}/settings">
+			{{.i18n.Tr "repo.settings.options"}}
 		</a>
-	{{end}}
-	<a class="{{if .PageIsSettingsHooks}}active{{end}} item" href="{{.RepoLink}}/settings/hooks">
-		{{.i18n.Tr "repo.settings.hooks"}}
-	</a>
-	{{if .SignedUser.CanEditGitHook}}
-		<a class="{{if .PageIsSettingsGitHooks}}active{{end}} item" href="{{.RepoLink}}/settings/hooks/git">
-			{{.i18n.Tr "repo.settings.githooks"}}
+		<a class="{{if .PageIsSettingsCollaboration}}active{{end}} item" href="{{.RepoLink}}/settings/collaboration">
+			{{.i18n.Tr "repo.settings.collaboration"}}
 		</a>
-	{{end}}
-	<a class="{{if .PageIsSettingsKeys}}active{{end}} item" href="{{.RepoLink}}/settings/keys">
-		{{.i18n.Tr "repo.settings.deploy_keys"}}
-	</a>
-	{{if .LFSStartServer}}
-		<a class="{{if .PageIsSettingsLFS}}active{{end}} item" href="{{.RepoLink}}/settings/lfs">
-			{{.i18n.Tr "repo.settings.lfs"}}
+		{{if not .Repository.IsEmpty}}
+			<a class="{{if .PageIsSettingsBranches}}active{{end}} item" href="{{.RepoLink}}/settings/branches">
+				{{.i18n.Tr "repo.settings.branches"}}
+			</a>
+		{{end}}
+		<a class="{{if .PageIsSettingsHooks}}active{{end}} item" href="{{.RepoLink}}/settings/hooks">
+			{{.i18n.Tr "repo.settings.hooks"}}
 		</a>
-	{{end}}
+		{{if .SignedUser.CanEditGitHook}}
+			<a class="{{if .PageIsSettingsGitHooks}}active{{end}} item" href="{{.RepoLink}}/settings/hooks/git">
+				{{.i18n.Tr "repo.settings.githooks"}}
+			</a>
+		{{end}}
+		<a class="{{if .PageIsSettingsKeys}}active{{end}} item" href="{{.RepoLink}}/settings/keys">
+			{{.i18n.Tr "repo.settings.deploy_keys"}}
+		</a>
+		{{if .LFSStartServer}}
+			<a class="{{if .PageIsSettingsLFS}}active{{end}} item" href="{{.RepoLink}}/settings/lfs">
+				{{.i18n.Tr "repo.settings.lfs"}}
+			</a>
+		{{end}}
+	</div>
 </div>
diff --git a/templates/user/auth/link_account.tmpl b/templates/user/auth/link_account.tmpl
index b7fa998a0d..8e1509b8ce 100644
--- a/templates/user/auth/link_account.tmpl
+++ b/templates/user/auth/link_account.tmpl
@@ -2,27 +2,29 @@
 
 <div class="user link-account">
 	<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
-		<!-- TODO handle .ShowRegistrationButton once other login bugs are fixed -->
-		<a class="item {{if not .user_exists}}active{{end}}"
-			data-tab="auth-link-signup-tab">
-			{{.i18n.Tr "auth.oauth_signup_tab"}}
-		</a>
-		<a class="item {{if .user_exists}}active{{end}}"
-			data-tab="auth-link-signin-tab">
-			{{.i18n.Tr "auth.oauth_signin_tab"}}
-		</a>
-	</div>
-
-	<div class="ui middle very relaxed page grid">
-		<div class="column">
-			<div class="ui tab {{if not .user_exists}}active{{end}}"
+		<div class="new-menu-inner">
+			<!-- TODO handle .ShowRegistrationButton once other login bugs are fixed -->
+			<a class="item {{if not .user_exists}}active{{end}}"
 				data-tab="auth-link-signup-tab">
-				{{template "user/auth/signup_inner" .}}
-			</div>
-			<div class="ui tab {{if .user_exists}}active{{end}}"
+				{{.i18n.Tr "auth.oauth_signup_tab"}}
+			</a>
+			<a class="item {{if .user_exists}}active{{end}}"
 				data-tab="auth-link-signin-tab">
-				<div class="ui user signin container icon">
-					{{template "user/auth/signin_inner" .}}
+				{{.i18n.Tr "auth.oauth_signin_tab"}}
+			</a>
+		</div>
+
+		<div class="ui middle very relaxed page grid">
+			<div class="column">
+				<div class="ui tab {{if not .user_exists}}active{{end}}"
+					data-tab="auth-link-signup-tab">
+					{{template "user/auth/signup_inner" .}}
+				</div>
+				<div class="ui tab {{if .user_exists}}active{{end}}"
+					data-tab="auth-link-signin-tab">
+					<div class="ui user signin container icon">
+						{{template "user/auth/signin_inner" .}}
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/templates/user/auth/signin_navbar.tmpl b/templates/user/auth/signin_navbar.tmpl
index 428a3d843a..85ebcd90f8 100644
--- a/templates/user/auth/signin_navbar.tmpl
+++ b/templates/user/auth/signin_navbar.tmpl
@@ -1,19 +1,21 @@
 {{if or .EnableOpenIDSignIn .EnableSSPI}}
 <div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
-	<a class="{{if .PageIsLogin}}active{{end}} item" rel="nofollow" href="{{AppSubUrl}}/user/login">
-		{{.i18n.Tr "auth.login_userpass"}}
-	</a>
-	{{if .EnableOpenIDSignIn}}
-	<a class="{{if .PageIsLoginOpenID}}active{{end}} item" rel="nofollow" href="{{AppSubUrl}}/user/login/openid">
-		<i class="fa fa-openid"></i>
-		&nbsp;OpenID
-	</a>
-	{{end}}
-	{{if .EnableSSPI}}
-	<a class="item" rel="nofollow" href="{{AppSubUrl}}/user/login?auth_with_sspi=1">
-		<i class="fa fa-windows"></i>
-		&nbsp;SSPI
-	</a>
-	{{end}}
+	<div class="new-menu-inner">
+		<a class="{{if .PageIsLogin}}active{{end}} item" rel="nofollow" href="{{AppSubUrl}}/user/login">
+			{{.i18n.Tr "auth.login_userpass"}}
+		</a>
+		{{if .EnableOpenIDSignIn}}
+		<a class="{{if .PageIsLoginOpenID}}active{{end}} item" rel="nofollow" href="{{AppSubUrl}}/user/login/openid">
+			<i class="fa fa-openid"></i>
+			&nbsp;OpenID
+		</a>
+		{{end}}
+		{{if .EnableSSPI}}
+		<a class="item" rel="nofollow" href="{{AppSubUrl}}/user/login?auth_with_sspi=1">
+			<i class="fa fa-windows"></i>
+			&nbsp;SSPI
+		</a>
+		{{end}}
+	</div>
 </div>
 {{end}}
diff --git a/templates/user/auth/signup_openid_navbar.tmpl b/templates/user/auth/signup_openid_navbar.tmpl
index 86f6ee7d81..9ba727548c 100644
--- a/templates/user/auth/signup_openid_navbar.tmpl
+++ b/templates/user/auth/signup_openid_navbar.tmpl
@@ -1,11 +1,13 @@
 <div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar">
-	<a class="{{if .PageIsOpenIDConnect}}active{{end}} item" href="{{AppSubUrl}}/user/openid/connect">
-		{{.i18n.Tr "auth.openid_connect_title"}}
-	</a>
-	{{if .EnableOpenIDSignUp}}
-		<a class="{{if .PageIsOpenIDRegister}}active{{end}} item" href="{{AppSubUrl}}/user/openid/register">
-			{{.i18n.Tr "auth.openid_register_title"}}
+	<div class="new-menu-inner">
+		<a class="{{if .PageIsOpenIDConnect}}active{{end}} item" href="{{AppSubUrl}}/user/openid/connect">
+			{{.i18n.Tr "auth.openid_connect_title"}}
 		</a>
-	{{end}}
+		{{if .EnableOpenIDSignUp}}
+			<a class="{{if .PageIsOpenIDRegister}}active{{end}} item" href="{{AppSubUrl}}/user/openid/register">
+				{{.i18n.Tr "auth.openid_register_title"}}
+			</a>
+		{{end}}
+	</div>
 </div>
 
diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl
index d6b99b3861..1076efec0b 100644
--- a/templates/user/profile.tmpl
+++ b/templates/user/profile.tmpl
@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<div class="user profile">
+<div class="user profile mt-5">
 	<div class="ui container">
 		<div class="ui stackable grid">
 			<div class="ui five wide column">
diff --git a/templates/user/settings/navbar.tmpl b/templates/user/settings/navbar.tmpl
index 18bd9a4f8d..7255819374 100644
--- a/templates/user/settings/navbar.tmpl
+++ b/templates/user/settings/navbar.tmpl
@@ -1,23 +1,25 @@
 <div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar">
-	<a class="{{if .PageIsSettingsProfile}}active{{end}} item" href="{{AppSubUrl}}/user/settings">
-		{{.i18n.Tr "settings.profile"}}
-	</a>
-	<a class="{{if .PageIsSettingsAccount}}active{{end}} item" href="{{AppSubUrl}}/user/settings/account">
-		{{.i18n.Tr "settings.account"}}
-	</a>
-	<a class="{{if .PageIsSettingsSecurity}}active{{end}} item" href="{{AppSubUrl}}/user/settings/security">
-		{{.i18n.Tr "settings.security"}}
-	</a>
-	<a class="{{if .PageIsSettingsApplications}}active{{end}} item" href="{{AppSubUrl}}/user/settings/applications">
-		{{.i18n.Tr "settings.applications"}}
-	</a>
-	<a class="{{if .PageIsSettingsKeys}}active{{end}} item" href="{{AppSubUrl}}/user/settings/keys">
-		{{.i18n.Tr "settings.ssh_gpg_keys"}}
-	</a>
-	<a class="{{if .PageIsSettingsOrganization}}active{{end}} item" href="{{AppSubUrl}}/user/settings/organization">
-		{{.i18n.Tr "settings.organization"}}
-	</a>
-	<a class="{{if .PageIsSettingsRepos}}active{{end}} item" href="{{AppSubUrl}}/user/settings/repos">
-		{{.i18n.Tr "settings.repos"}}
-	</a>
+	<div class="new-menu-inner">
+		<a class="{{if .PageIsSettingsProfile}}active{{end}} item" href="{{AppSubUrl}}/user/settings">
+			{{.i18n.Tr "settings.profile"}}
+		</a>
+		<a class="{{if .PageIsSettingsAccount}}active{{end}} item" href="{{AppSubUrl}}/user/settings/account">
+			{{.i18n.Tr "settings.account"}}
+		</a>
+		<a class="{{if .PageIsSettingsSecurity}}active{{end}} item" href="{{AppSubUrl}}/user/settings/security">
+			{{.i18n.Tr "settings.security"}}
+		</a>
+		<a class="{{if .PageIsSettingsApplications}}active{{end}} item" href="{{AppSubUrl}}/user/settings/applications">
+			{{.i18n.Tr "settings.applications"}}
+		</a>
+		<a class="{{if .PageIsSettingsKeys}}active{{end}} item" href="{{AppSubUrl}}/user/settings/keys">
+			{{.i18n.Tr "settings.ssh_gpg_keys"}}
+		</a>
+		<a class="{{if .PageIsSettingsOrganization}}active{{end}} item" href="{{AppSubUrl}}/user/settings/organization">
+			{{.i18n.Tr "settings.organization"}}
+		</a>
+		<a class="{{if .PageIsSettingsRepos}}active{{end}} item" href="{{AppSubUrl}}/user/settings/repos">
+			{{.i18n.Tr "settings.repos"}}
+		</a>
+	</div>
 </div>