Move helpers to be prefixed with `gt-` (#22879)

As discussed in #22847 the helpers in helpers.less need to have a
separate prefix as they are causing conflicts with fomantic styles

This will allow us to have the `.gt-hidden { display:none !important; }`
style that is needed to for the reverted PR.

Of note in doing this I have noticed that there was already a conflict
with at least one chroma style which this PR now avoids.

I've also added in the `gt-hidden` style that matches the tailwind one
and switched the code that needed it to use that.

Signed-off-by: Andrew Thornton <art27@cantab.net>

---------

Signed-off-by: Andrew Thornton <art27@cantab.net>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

2 files changed, 23 insertions, 23 deletions

diff --git a/templates/projects/list.tmpl b/templates/projects/list.tmpl
index 21a3350a75..8d9594e2b4 100644
--- a/templates/projects/list.tmpl
+++ b/templates/projects/list.tmpl
@@ -12,11 +12,11 @@
 		{{template "base/alert" .}}
 		<div class="ui compact tiny menu">
 			<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{$.Link}}?state=open">
-				{{svg "octicon-project" 16 "mr-3"}}
+				{{svg "octicon-project" 16 "gt-mr-3"}}
 				{{JsPrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
 			</a>
 			<a class="item{{if .IsShowClosed}} active{{end}}" href="{{$.Link}}?state=closed">
-				{{svg "octicon-check" 16 "mr-3"}}
+				{{svg "octicon-check" 16 "gt-mr-3"}}
 				{{JsPrettyNumber .ClosedCount}}&nbsp;{{.locale.Tr "repo.issues.closed_title"}}
 			</a>
 		</div>
@@ -45,9 +45,9 @@
 							{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate|Str2html}}
 						{{end}}
 						<span class="issue-stats">
-							{{svg "octicon-issue-opened" 16 "mr-3"}}
+							{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
 							{{JsPrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
-							{{svg "octicon-check" 16 "mr-3"}}
+							{{svg "octicon-check" 16 "gt-mr-3"}}
 							{{JsPrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
 						</span>
 					</div>
diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl
index 72131e30bb..112e6be7ce 100644
--- a/templates/projects/view.tmpl
+++ b/templates/projects/view.tmpl
@@ -48,22 +48,22 @@
 					<div class="ui compact right small menu">
 						<a class="item" href="{{$.Link}}/edit" data-id={{$.Project.ID}} data-title={{$.Project.Title}}>
 							{{svg "octicon-pencil"}}
-							<span class="mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span>
+							<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span>
 						</a>
 						{{if .Project.IsClosed}}
 							<a class="item link-action" href data-url="{{$.Link}}/open">
 								{{svg "octicon-check"}}
-								<span class="mx-3">{{$.locale.Tr "repo.projects.open"}}</span>
+								<span class="gt-mx-3">{{$.locale.Tr "repo.projects.open"}}</span>
 							</a>
 						{{else}}
 							<a class="item link-action" href data-url="{{$.Link}}/close">
 								{{svg "octicon-skip"}}
-								<span class="mx-3">{{$.locale.Tr "repo.projects.close"}}</span>
+								<span class="gt-mx-3">{{$.locale.Tr "repo.projects.close"}}</span>
 							</a>
 						{{end}}
 						<a class="item delete-button" href="#" data-url="{{$.Link}}/delete" data-id="{{.Project.ID}}">
 							{{svg "octicon-trash"}}
-							<span class="mx-3">{{$.locale.Tr "repo.issues.label_delete"}}</span>
+							<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_delete"}}</span>
 						</a>
 					</div>
 				</div>
@@ -77,8 +77,8 @@
 			{{range $board := .Boards}}
 
 			<div class="ui segment board-column" style="background: {{.Color}} !important;" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}">
-				<div class="board-column-header df ac sb">
-					<div class="ui large label board-label py-2">
+				<div class="board-column-header gt-df gt-ac gt-sb">
+					<div class="ui large label board-label gt-py-2">
 						<div class="ui small circular grey label board-card-cnt">
 							{{.NumIssues}}
 						</div>
@@ -86,7 +86,7 @@
 					</div>
 					{{if and $.CanWriteProjects (ne .ID 0)}}
 						<div class="ui dropdown jump item tooltip">
-							<div class="not-mobile px-3" tabindex="-1">
+							<div class="not-mobile gt-px-3" tabindex="-1">
 								{{svg "octicon-kebab-horizontal"}}
 							</div>
 							<div class="menu user-menu" tabindex="-1">
@@ -175,9 +175,9 @@
 
 					<!-- start issue card -->
 					<div class="card board-card" data-issue="{{.ID}}">
-						<div class="content p-0">
+						<div class="content gt-p-0">
 							<div class="header">
-								<span class="dif ac vm {{if .IsClosed}}red{{else}}green{{end}}">
+								<span class="gt-dif gt-ac gt-vm {{if .IsClosed}}red{{else}}green{{end}}">
 									{{if .IsPull}}
 										{{if .PullRequest.HasMerged}}
 											{{svg "octicon-git-merge" 16 "text purple"}}
@@ -196,11 +196,11 @@
 										{{end}}
 									{{end}}
 								</span>
-								<a class="project-board-title vm" href="{{.Link}}">
+								<a class="project-board-title gt-vm" href="{{.Link}}">
 									{{.Title}}
 								</a>
 							</div>
-							<div class="meta my-2">
+							<div class="meta gt-my-2">
 								<span class="text light grey">
 									{{.Repo.FullName}}#{{.Index}}
 									{{$timeStr := TimeSinceUnix .GetLastEventTimestamp $.locale}}
@@ -214,31 +214,31 @@
 								</span>
 							</div>
 							{{- if .MilestoneID}}
-							<div class="meta my-2">
+							<div class="meta gt-my-2">
 								<a class="milestone" href="{{$.RepoLink}}/milestone/{{.MilestoneID}}">
-									{{svg "octicon-milestone" 16 "mr-2 vm"}}
-									<span class="vm">{{.Milestone.Name}}</span>
+									{{svg "octicon-milestone" 16 "gt-mr-2 gt-vm"}}
+									<span class="gt-vm">{{.Milestone.Name}}</span>
 								</a>
 							</div>
 							{{- end}}
 							{{- range index $.LinkedPRs .ID}}
-							<div class="meta my-2">
+							<div class="meta gt-my-2">
 								<a href="{{$.RepoLink}}/pulls/{{.Index}}">
-									<span class="m-0 {{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge" 16 "mr-2 vm"}}</span>
-									<span class="vm">{{.Title}} <span class="text light grey">#{{.Index}}</span></span>
+									<span class="gt-m-0 {{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge" 16 "gt-mr-2 gt-vm"}}</span>
+									<span class="gt-vm">{{.Title}} <span class="text light grey">#{{.Index}}</span></span>
 								</a>
 							</div>
 							{{- end}}
 						</div>
 
 						{{if or .Labels .Assignees}}
-						<div class="extra content labels-list p-0 pt-2">
+						<div class="extra content labels-list gt-p-0 gt-pt-2">
 							{{range .Labels}}
 								<a class="ui label" target="_blank" href="{{$.RepoLink}}/issues?labels={{.ID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}};" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
 							{{end}}
 							<div class="right floated">
 								{{range .Assignees}}
-									<a class="tooltip" target="_blank" href="{{.HomeLink}}" data-content="{{$.locale.Tr "repo.projects.board.assigned_to"}} {{.Name}}">{{avatar . 28 "mini mr-3"}}</a>
+									<a class="tooltip" target="_blank" href="{{.HomeLink}}" data-content="{{$.locale.Tr "repo.projects.board.assigned_to"}} {{.Name}}">{{avatar . 28 "mini gt-mr-3"}}</a>
 								{{end}}
 							</div>
 						</div>