Make Issue/PR/projects more compact, misc CSS tweaks (#24459)

- Remove various horizontal dividers on repo pages that didn't provide
visual benefit
- Remove label/milestone pills on single issue/pr page
- Remove issue-related pill buttons on projects page
- Increase contrast of color-secondary on arc-green
- Improve notifications icon, make circle bigger
- Remove some inline styles
- Fix focus in issue/pr title edit and select all text on button click

### Issue and PR before and after

<img width="1249" alt="Screenshot 2023-05-01 at 11 44 22"
src="https://user-images.githubusercontent.com/115237/235436662-a708288e-84fb-4b2e-a5a2-3a1c17d28f6c.png">
<img width="1248" alt="Screenshot 2023-05-01 at 11 58 51"
src="https://user-images.githubusercontent.com/115237/235437992-f863e483-f3cc-4cc1-8204-fd223647a0c9.png">



### Projects before and after

<img width="1255" alt="Screenshot 2023-05-01 at 11 41 02"
src="https://user-images.githubusercontent.com/115237/235436433-0deb85d6-4e7d-4e74-847f-254cc70a0cf9.png">
<img width="1267" alt="Screenshot 2023-05-01 at 11 40 03"
src="https://user-images.githubusercontent.com/115237/235436431-715b13cb-f78c-4d86-b27a-9229f9738c5b.png">


### Releases before and after

<img width="1243" alt="Screenshot 2023-05-01 at 11 41 12"
src="https://user-images.githubusercontent.com/115237/235436457-b655ee6f-03b8-4595-8d8c-b15ea469e988.png">
<img width="1240" alt="Screenshot 2023-05-01 at 11 40 10"
src="https://user-images.githubusercontent.com/115237/235436456-05a2a0dd-7cbb-4f26-b0d3-4f667df4bb95.png">

### Misc

<img width="58" alt="Screenshot 2023-05-01 at 10 49 13"
src="https://user-images.githubusercontent.com/115237/235432494-936ce995-6e22-47bc-ab2d-c9e93d31987d.png">
<img width="57" alt="Screenshot 2023-05-01 at 18 57 08"
src="https://user-images.githubusercontent.com/115237/235492430-1d32cfe0-0f2c-467c-b2fa-925b27e30e0e.png">


Issue title edit and wrap:

<img width="1238" alt="Screenshot 2023-05-01 at 12 34 40"
src="https://user-images.githubusercontent.com/115237/235441407-d5067a57-e586-4865-a652-282e5944abb4.png">
<img width="1232" alt="Screenshot 2023-05-01 at 12 06 24"
src="https://user-images.githubusercontent.com/115237/235438710-1a543dda-220f-4d87-8f93-f1710c0695f0.png">

---------

Co-authored-by: wxiaoguang <[email protected]>

Author: silverwind

templates/org/member/members.tmpl

@@ -7,7 +7,7 @@
 		<div class="list">
 			{{range .Members}}
 				<div class="item ui grid">
-					<div class="ui four wide column" style="display: flex;">
+					<div class="ui four wide column gt-df">
 						<a href="{{.HomeLink}}">{{avatar $.Context . 48}}</a>
 						<div>
 							<div class="meta"><a href="{{.HomeLink}}">{{.Name}}</a></div>

templates/projects/list.tmpl

@@ -10,7 +10,7 @@
 		{{end}}
 
 		{{template "base/alert" .}}
-		<div class="small-pill-buttons ui compact tiny menu">
+		<div class="small-menu-items ui compact tiny menu">
 			<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{$.Link}}?state=open">
 				{{svg "octicon-project-symlink" 16 "gt-mr-3"}}
 				{{.locale.PrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}

templates/repo/actions/openclose.tmpl

@@ -1,4 +1,4 @@
-<div class="small-pill-buttons ui compact tiny menu">
+<div class="small-menu-items ui compact tiny menu">
 	<a class="{{if not .IsShowClosed}}active {{end}}item" href="{{$.Link}}?workflow={{.CurWorkflow}}&state=open">
 		{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
 		{{.locale.Tr "actions.runs.open_tab" $.NumOpenActionRuns}}

templates/repo/branch_dropdown.tmpl

@@ -1,3 +1,8 @@
+{{/* Attributes:
+* root
+* ContainerClasses
+* (TODO: search "branch_dropdown" in the template direcotry)
+*/}}
 {{$defaultBranch := $.root.BranchName}}
 {{if and .root.IsViewTag (not .noTag)}}
 	{{$defaultBranch = .root.TagName}}
@@ -62,10 +67,10 @@
 	window.config.pageData.branchDropdownDataList.push(data);
 </script>
 
-<div class="fitted item js-branch-tag-selector">
+<div class="js-branch-tag-selector {{if .ContainerClasses}}{{.ContainerClasses}}{{end}}">
 	{{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}}
 	<div class="ui floating filter dropdown custom">
-		<button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df">
+		<button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df gt-m-0">
 			<span class="text gt-df gt-ac gt-mr-2">
 				{{if .release}}
 					{{.root.locale.Tr "repo.release.compare"}}

templates/repo/commits.tmpl

@@ -5,7 +5,7 @@
 		{{template "repo/sub_menu" .}}
 		<div class="repo-button-row gt-df gt-ac gt-sb gt-fw gt-mb-4 gt-mt-3">
 			<div class="gt-df gt-ac">
-				{{template "repo/branch_dropdown" dict "root" .}}
+				{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "gt-mr-2"}}
 				<a href="{{.RepoLink}}/graph" class="ui basic small compact button">
 					<span class="text">
 						{{svg "octicon-git-branch"}}

templates/repo/home.tmpl

@@ -63,7 +63,7 @@
 		{{template "repo/sub_menu" .}}
 		<div class="repo-button-row gt-df gt-ac gt-sb gt-fw">
 			<div class="gt-df gt-ac gt-fw gt-gap-y-3">
-				{{template "repo/branch_dropdown" dict "root" .}}
+				{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "gt-mr-2"}}
 				{{$n := len .TreeNames}}
 				{{$l := Eval $n "-" 1}}
 				<!-- If home page, show new pr. If not, show breadcrumb -->

templates/repo/issue/labels.tmpl

@@ -2,15 +2,14 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository labels">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<div class="navbar">
+		<div class="navbar gt-mb-4">
 			{{template "repo/issue/navbar" .}}
 			{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}
 				<div class="ui right">
 					<button class="ui green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
 				</div>
 			{{end}}
 		</div>
-		<div class="ui divider"></div>
 		{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}
 			{{template "repo/issue/labels/label_new" .}}
 		{{end}}

templates/repo/issue/list.tmpl

@@ -17,9 +17,6 @@
 				{{end}}
 			{{end}}
 		</div>
-
-		<div class="ui divider"></div>
-
 		<div id="issue-filters" class="issue-list-toolbar">
 			<div class="issue-list-toolbar-left">
 				{{if $.CanWriteIssuesOrPulls}}

templates/repo/issue/milestones.tmpl

@@ -2,19 +2,18 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository milestones">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<div class="navbar">
+		<div class="navbar gt-mb-4">
 			{{template "repo/issue/navbar" .}}
 			{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}
 				<div class="ui right">
 					<a class="ui small green button" href="{{$.Link}}/new">{{.locale.Tr "repo.milestones.new"}}</a>
 				</div>
 			{{end}}
 		</div>
-		<div class="ui divider"></div>
 		{{template "base/alert" .}}
 
 		<div class="list-header">
-			<div class="small-pill-buttons ui compact tiny menu">
+			<div class="small-menu-items ui compact tiny menu">
 				<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=open&q={{$.Keyword}}">
 					{{svg "octicon-milestone" 16 "gt-mr-3"}}
 					{{.locale.PrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}

templates/repo/issue/navbar.tmpl

@@ -1,4 +1,4 @@
-<h2 class="ui compact small menu header small-pill-buttons">
+<h2 class="ui compact small menu header small-menu-items">
 	<a class="{{if .PageIsLabels}}active {{end}}item" href="{{.RepoLink}}/labels">{{.locale.Tr "repo.labels"}}</a>
 	<a class="{{if .PageIsMilestones}}active {{end}}item" href="{{.RepoLink}}/milestones">{{.locale.Tr "repo.milestones"}}</a>
 </h2>