Style and template tweaks (#13828)

* Style and template tweaks

- Get red and green buttons on arc green closer to base theme
- EasyMDE adjustments, toolbar and focus border
- Fix header on 404 repo page
- Tweaks to frontpage search, add 'Create Repo' button
- Fix misaligned box headers
- Fix pagination on arc-green
- Fix background and footer on explore and repo search

* better fix for header button alignment

* add label hover for reactions

12 files changed, 61 insertions, 51 deletions

diff --git a/templates/explore/code.tmpl b/templates/explore/code.tmpl
index 9c880e59f2..0495645576 100644
--- a/templates/explore/code.tmpl
+++ b/templates/explore/code.tmpl
@@ -49,15 +49,7 @@
                                     </table>
                                 </div>
                             </div>
-                            <div class="ui bottom attached table segment">
-                                {{if $result.Language}}
-                                    <i class="color-icon" style="background-color: {{$result.Color}}"></i>{{$result.Language}}
-                                {{end}}
-                                &nbsp;
-                                {{if not $result.UpdatedUnix.IsZero}}
-                                    <span class="ui small grey text pull right">{{$.i18n.Tr "explore.code_last_indexed_at" (TimeSinceUnix $result.UpdatedUnix $.i18n.Lang) | Safe}} &nbsp;</span>
-                                {{end}}
-                            </div>
+                            {{template "shared/searchbottom" dict "root" $ "result" .}}
                         </div>
                     {{end}}
                 </div>
diff --git a/templates/repo/issue/new_form.tmpl b/templates/repo/issue/new_form.tmpl
index aa142e3ded..efebc3bf36 100644
--- a/templates/repo/issue/new_form.tmpl
+++ b/templates/repo/issue/new_form.tmpl
@@ -13,7 +13,7 @@
 				</a>
 				<div class="ui segment content">
 					<div class="field">
-						<input name="title" id="issue_title" placeholder="{{.i18n.Tr "repo.milestones.title"}}" value="{{if .TitleQuery}}{{.TitleQuery}}{{else if .IssueTemplateTitle}}{{.IssueTemplateTitle}}{{else}}{{.title}}{{end}}" tabindex="3" autofocus required maxlength="255">
+						<input name="title" id="issue_title" placeholder="{{.i18n.Tr "repo.milestones.title"}}" value="{{if .TitleQuery}}{{.TitleQuery}}{{else if .IssueTemplateTitle}}{{.IssueTemplateTitle}}{{else}}{{.title}}{{end}}" tabindex="3" autofocus required maxlength="255" autocomplete="off">
 						{{if .PageIsComparePull}}
 							<div class="title_wip_desc" data-wip-prefixes="{{Json .PullRequestWorkInProgressPrefixes}}">{{.i18n.Tr "repo.pulls.title_wip_desc" (index .PullRequestWorkInProgressPrefixes 0| Escape) | Safe}}</div>
 						{{end}}
diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl
index 6d694219ca..95778cc5b3 100644
--- a/templates/repo/issue/view_content/add_reaction.tmpl
+++ b/templates/repo/issue/view_content/add_reaction.tmpl
@@ -1,5 +1,5 @@
 {{if .ctx.IsSigned}}
-<div class="item action ui pointing top right select-reaction dropdown" data-action-url="{{ .ActionURL }}">
+<div class="item action ui pointing select-reaction dropdown" data-action-url="{{ .ActionURL }}">
 	<a class="add-reaction">
 		{{svg "octicon-smiley"}}
 	</a>
diff --git a/templates/repo/issue/view_content/context_menu.tmpl b/templates/repo/issue/view_content/context_menu.tmpl
index 7d5cae5bff..744821cb3c 100644
--- a/templates/repo/issue/view_content/context_menu.tmpl
+++ b/templates/repo/issue/view_content/context_menu.tmpl
@@ -1,5 +1,5 @@
 {{if .ctx.IsSigned}}
-<div class="item action ui pointing top right custom dropdown context-dropdown">
+<div class="item action ui pointing custom dropdown context-dropdown">
 	<a class="context-menu">
 		{{svg "octicon-kebab-horizontal"}}
 	</a>
diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl
index 0d594b3a5c..8956bf5e65 100644
--- a/templates/repo/issue/view_title.tmpl
+++ b/templates/repo/issue/view_title.tmpl
@@ -9,7 +9,7 @@
 			<span id="issue-title">{{RenderIssueTitle .Issue.Title $.RepoLink $.Repository.ComposeMetas}}</span>
 			<span class="index">#{{.Issue.Index}}</span>
 			<div id="edit-title-input" class="ui input" style="display: none">
-				<input value="{{.Issue.Title}}" maxlength="255">
+				<input value="{{.Issue.Title}}" maxlength="255" autocomplete="off">
 			</div>
 		</h1>
 		{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
diff --git a/templates/repo/search.tmpl b/templates/repo/search.tmpl
index ca39c9a2f4..c2172ec787 100644
--- a/templates/repo/search.tmpl
+++ b/templates/repo/search.tmpl
@@ -48,15 +48,7 @@
 								</table>
 							</div>
 						</div>
-						<div class="ui bottom attached table segment">
-							{{if $result.Language}}
-							<i class="color-icon" style="background-color: {{$result.Color}}"></i>{{$result.Language}}
-							{{end}}
-							&nbsp;
-							{{if not $result.UpdatedUnix.IsZero}}
-							<span class="ui small grey text pull right">{{$.i18n.Tr "explore.code_last_indexed_at" (TimeSinceUnix $result.UpdatedUnix $.i18n.Lang) | Safe}} &nbsp;</span>
-							{{end}}
-						</div>
+						{{template "shared/searchbottom" dict "root" $ "result" .}}
 					</div>
 				{{end}}
 			</div>
diff --git a/templates/repo/settings/lfs.tmpl b/templates/repo/settings/lfs.tmpl
index b6a0581583..79477051b3 100644
--- a/templates/repo/settings/lfs.tmpl
+++ b/templates/repo/settings/lfs.tmpl
@@ -7,8 +7,8 @@
 		<h4 class="ui top attached header">
 			{{.i18n.Tr "repo.settings.lfs_filelist"}} ({{.i18n.Tr "admin.total" .Total}})
 			<div class="ui right">
-				<a class="ui black tiny show-panel button" href="{{.Link}}/locks"><span class="octicon-tiny">{{svg "octicon-lock"}}</span>{{.i18n.Tr "repo.settings.lfs_locks"}}</a>
-				<a class="ui blue tiny show-panel button" href="{{.Link}}/pointers"><span class="octicon-tiny">{{svg "octicon-search"}}</span>&nbsp;{{.i18n.Tr "repo.settings.lfs_findpointerfiles"}}</a>
+				<a class="ui tiny show-panel button" href="{{.Link}}/locks"><span class="octicon-tiny">{{svg "octicon-lock"}}</span>{{.i18n.Tr "repo.settings.lfs_locks"}}</a>
+				<a class="ui primary tiny show-panel button" href="{{.Link}}/pointers"><span class="octicon-tiny">{{svg "octicon-search"}}</span>&nbsp;{{.i18n.Tr "repo.settings.lfs_findpointerfiles"}}</a>
 			</div>
 		</h4>
 		<table id="lfs-files-table" class="ui attached segment single line table">
@@ -25,7 +25,7 @@
 						<td>{{FileSize .Size}}</td>
 						<td>{{TimeSince .CreatedUnix.AsTime $.Lang}}</td>
 						<td class="right aligned">
-							<a class="ui blue show-panel button" href="{{$.Link}}/find?oid={{.Oid}}&size={{.Size}}">{{$.i18n.Tr "repo.settings.lfs_findcommits"}}</a>
+							<a class="ui primary show-panel button" href="{{$.Link}}/find?oid={{.Oid}}&size={{.Size}}">{{$.i18n.Tr "repo.settings.lfs_findcommits"}}</a>
 							<button class="ui basic show-modal icon button" data-modal="#delete-{{.Oid}}">
 								<span class="btn-octicon btn-octicon-danger poping up"  data-content="{{$.i18n.Tr "repo.editor.delete_this_file"}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-trashcan"}}</span>
 							</button>
diff --git a/templates/shared/searchbottom.tmpl b/templates/shared/searchbottom.tmpl
new file mode 100644
index 0000000000..5680c8d2a9
--- /dev/null
+++ b/templates/shared/searchbottom.tmpl
@@ -0,0 +1,12 @@
+<div class="ui bottom attached table segment df ac sb">
+		<div class="ml-3">
+			{{if .result.Language}}
+					<i class="color-icon" style="background-color: {{.result.Color}}"></i>{{.result.Language}}
+			{{end}}
+		</div>
+		<div class="mr-3">
+			{{if not .result.UpdatedUnix.IsZero}}
+					<span class="ui grey text">{{.root.i18n.Tr "explore.code_last_indexed_at" (TimeSinceUnix .result.UpdatedUnix .root.i18n.Lang) | Safe}}</span>
+			{{end}}
+		</div>
+</div>
diff --git a/templates/status/404.tmpl b/templates/status/404.tmpl
index c5f549bf54..6f572b43b3 100644
--- a/templates/status/404.tmpl
+++ b/templates/status/404.tmpl
@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<div class="page-content ui container center {{if .IsRepo}}repository{{end}}">
+<div class="page-content ui container center full-screen-width {{if .IsRepo}}repository{{end}}">
 	{{if .IsRepo}}{{template "repo/header" .}}{{end}}
 	<div class="ui container center">
 		<p style="margin-top: 100px"><img class="ui centered image" src="{{StaticUrlPrefix}}/img/404.png" alt="404"/></p>
diff --git a/templates/status/500.tmpl b/templates/status/500.tmpl
index d20b06b109..3f1b205d36 100644
--- a/templates/status/500.tmpl
+++ b/templates/status/500.tmpl
@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<div class="page-content ui container center">
+<div class="page-content ui container full-screen-width center">
 	<p style="margin-top: 100px"><img class="ui centered image" src="{{StaticUrlPrefix}}/img/500.png" alt="500"/></p>
 	<div class="ui divider"></div>
 	<br>
diff --git a/templates/user/dashboard/issues.tmpl b/templates/user/dashboard/issues.tmpl
index d4e7cb38b6..b8625ec2c1 100644
--- a/templates/user/dashboard/issues.tmpl
+++ b/templates/user/dashboard/issues.tmpl
@@ -77,7 +77,7 @@
 							</div>
 						</form>
 					</div>
-					<div class="column right aligned">
+					<div class="column right aligned df ac je">
 						<!-- Sort -->
 						<div class="ui dropdown type jump item">
 							<span class="text">
diff --git a/templates/user/dashboard/repolist.tmpl b/templates/user/dashboard/repolist.tmpl
index 319bb3c6ee..46c735071d 100644
--- a/templates/user/dashboard/repolist.tmpl
+++ b/templates/user/dashboard/repolist.tmpl
@@ -23,8 +23,15 @@
 			<a :class="{item: true, active: tab === 'organizations'}" @click="changeTab('organizations')">{{.i18n.Tr "organization"}}</a>
 		</div>
 		<div v-show="tab === 'repos'" class="ui tab active list dashboard-repos">
-			<h4 class="ui top attached header">
-				{{.i18n.Tr "home.my_repos"}} <span class="ui grey label">${reposTotalCount}</span>
+			<h4 class="ui top attached header df ac">
+				<div class="f1 df ac">
+					{{.i18n.Tr "home.my_repos"}}
+					<span class="ui grey label ml-3">${reposTotalCount}</span>
+				</div>
+				<a class="poping up" :href="suburl + '/repo/create'" data-content="{{.i18n.Tr "new_repo"}}" data-variation="tiny inverted" data-position="left center">
+					{{svg "octicon-plus"}}
+					<span class="sr-only">{{.i18n.Tr "new_repo"}}</span>
+				</a>
 			</h4>
 			<div class="ui attached secondary segment repos-search">
 				<div class="ui fluid right action left icon input" :class="{loading: isLoading}">
@@ -94,13 +101,16 @@
 			<div v-if="repos.length" class="ui attached table segment rounded-bottom">
 				<ul class="repo-owner-name-list">
 					<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}">
-						<a :href="suburl + '/' + repo.full_name">
-							<component v-bind:is="repoIcon(repo)" size="16"></component>
-							<strong class="text truncate item-name">${repo.full_name}</strong>
-							<i v-if="repo.archived" class="archive icon archived-icon"></i>
-							<span class="ui right text light grey">
-								${repo.stars_count} <span class="rear">{{svg "octicon-star"}}</span>
-							</span>
+						<a class="df ac sb" :href="suburl + '/' + repo.full_name">
+							<div class="f1 df ac">
+								<component v-bind:is="repoIcon(repo)" size="16"></component>
+								<strong class="text truncate item-name">${repo.full_name}</strong>
+								<i v-if="repo.archived" class="archive icon archived-icon"></i>
+							</div>
+							<div class="text light grey df ac">
+								${repo.stars_count}
+								{{svg "octicon-star" 16 "rear ml-2"}}
+							</div>
 						</a>
 					</li>
 					<li v-if="showMoreReposLink">
@@ -129,25 +139,29 @@
 				</ul>
 			</div>
 		</div>
-		<div v-if="!isOrganization" v-show="tab === 'organizations'" class="ui tab active list">
-			<h4 class="ui top attached header">
-				{{.i18n.Tr "home.my_orgs"}} <span class="ui grey label">${organizationsTotalCount}</span>
-				<div v-if="canCreateOrganization" class="ui right">
-					<a class="poping up" :href="suburl + '/org/create'" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center">
-						<i class="plus icon"></i>
-						<span class="sr-only">{{.i18n.Tr "new_org"}}</span>
-					</a>
+		<div v-if="!isOrganization" v-show="tab === 'organizations'" class="ui tab active list dashboard-orgs">
+			<h4 class="ui top attached header df ac">
+				<div class="f1 df ac">
+					{{.i18n.Tr "home.my_orgs"}}
+					<span class="ui grey label ml-3">${organizationsTotalCount}</span>
 				</div>
+				<a v-if="canCreateOrganization" class="poping up" :href="suburl + '/org/create'" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center">
+					{{svg "octicon-plus"}}
+					<span class="sr-only">{{.i18n.Tr "new_org"}}</span>
+				</a>
 			</h4>
 			<div v-if="organizations.length" class="ui attached table segment rounded-bottom">
 				<ul class="repo-owner-name-list">
 					<li v-for="org in organizations">
-						<a :href="suburl + '/' + org.name">
-							{{svg "octicon-organization"}}
-							<strong class="text truncate item-name">${org.name}</strong>
-							<span class="ui right text light grey">
-								${org.num_repos} <span class="rear">{{svg "octicon-repo"}}</span>
-							</span>
+						<a class="df ac sb" :href="suburl + '/' + org.name">
+							<div class="f1">
+								{{svg "octicon-organization" 16 "mr-2"}}
+								<strong class="text truncate item-name">${org.name}</strong>
+							</div>
+							<div class="text light grey df ac">
+								${org.num_repos}
+								{{svg "octicon-repo" 16 "rear ml-2 mt-1"}}
+							</div>
 						</a>
 					</li>
 				</ul>