Improve RSS feed icons (#28368)

- The RSS Feed icons were placed in a proper button, so that it does
  not look "inconsistent". This also makes the problem of the button
  being improperly aligned go away.
- The icon that shows on user profiles has not been modified because
  of a lack of better implementation ideas.
- Where applicable, the RSS Feed icon was put directly next to the
  Follow button (right menu), as both functionalities effectively
  share the same purpose.
- Despite the attempt at achieving less inconsistency, a conscious
  decision to not add any text to those buttons was made, opting for
  tooltips instead. "Make it present, but not too annoying."
- A special exception was made for the Releases pages (which contains
  text, not a tooltip), where an RSS feed would be particularly
  beneficial to users.

The fact that the RSS functionality is explicitly optional was taken
into account, and these improvements were made with public-facing
instances (where the feature works best) in mind.

4 files changed, 19 insertions, 10 deletions

diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl
index 2bebcc0f87..a84e3efc89 100644
--- a/templates/org/home.tmpl
+++ b/templates/org/home.tmpl
@@ -9,9 +9,6 @@
 					{{if .Org.Visibility.IsLimited}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</span>{{end}}
 					{{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}}
 				</span>
-				{{if .EnableFeed}}
-					<a class="rss-icon gt-mx-3" href="{{.Org.HomeLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">{{svg "octicon-rss" 24}}</a>
-				{{end}}
 			</div>
 			{{if $.RenderedDescription}}<div class="render-content markup">{{$.RenderedDescription|Str2html}}</div>{{end}}
 			<div class="text grey meta">
@@ -23,6 +20,11 @@
 			</div>
 		</div>
 		<div class="right menu">
+			{{if .EnableFeed}}
+			<button class="link-action ui basic label button gt-mr-0" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}" data-url="{{$.Org.HomeLink}}.rss">
+				{{svg "octicon-rss" 24}}
+			</button>
+			{{end}}
 			<button class="link-action ui basic button gt-mr-0" data-url="{{.Org.HomeLink}}?action={{if $.IsFollowing}}unfollow{{else}}follow{{end}}">
 				{{if $.IsFollowing}}
 					{{ctx.Locale.Tr "user.unfollow"}}
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 2a3ebc4e77..e4aadf37e3 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -25,9 +25,6 @@
 							<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.template"}}</span>
 						{{end}}
 					</div>
-					{{if $.EnableFeed}}
-						<a class="rss-icon gt-ml-3" href="{{$.RepoLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</a>
-					{{end}}
 				</div>
 				{{if $.PullMirror}}
 					<div class="fork-flag">{{ctx.Locale.Tr "repo.mirror_from"}} <a target="_blank" rel="noopener noreferrer" href="{{$.PullMirror.RemoteAddress}}">{{$.PullMirror.RemoteAddress}}</a></div>
@@ -55,6 +52,12 @@
 							</div>
 						</form>
 					{{end}}
+					{{if $.EnableFeed}}
+					{{/* An extra div-element is not necessary here, as this button does not secretly contain two buttons. */}}
+					<button class="ui compact small basic button" data-url="{{$.RepoLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">
+						{{svg "octicon-rss" 16}}
+					</button>
+					{{end}}
 					<form method="post" action="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
 						{{$.CsrfTokenHtml}}
 						<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.watch_guest_user"}}"{{end}}>
diff --git a/templates/repo/release_tag_header.tmpl b/templates/repo/release_tag_header.tmpl
index 4fe6a1251c..f474fb89ea 100644
--- a/templates/repo/release_tag_header.tmpl
+++ b/templates/repo/release_tag_header.tmpl
@@ -10,10 +10,12 @@
 					<a class="{{if .PageIsTagList}}active {{end}}item" href="{{.RepoLink}}/tags">{{ctx.Locale.PrettyNumber .NumTags}} {{ctx.Locale.TrN .NumTags "repo.tag" "repo.tags"}}</a>
 				{{end}}
 			</h2>
-			{{if .EnableFeed}}
-				<a class="rss-icon gt-mx-3" href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</a>
-			{{end}}
 		</div>
+		{{if .EnableFeed}}
+			<a class="ui small button" href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss">
+				{{svg "octicon-rss" 18}} {{ctx.Locale.Tr "rss_feed"}}
+			</a>
+		{{end}}
 		{{if and (not .PageIsTagList) .CanCreateRelease}}
 			<a class="ui small primary button" href="{{$.RepoLink}}/releases/new">
 				{{ctx.Locale.Tr "repo.release.new_release"}}
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index 983491f97d..4129a133b7 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -43,7 +43,9 @@
 				<a download href="{{$.RawFileLink}}"><span class="btn-octicon" data-tooltip-content="{{ctx.Locale.Tr "repo.download_file"}}">{{svg "octicon-download"}}</span></a>
 				<a id="copy-content" class="btn-octicon {{if not .CanCopyContent}} disabled{{end}}"{{if or .IsImageFile (and .HasSourceRenderedToggle (not .IsDisplayingSource))}} data-link="{{$.RawFileLink}}"{{end}} data-tooltip-content="{{if .CanCopyContent}}{{ctx.Locale.Tr "copy_content"}}{{else}}{{ctx.Locale.Tr "copy_type_unsupported"}}{{end}}">{{svg "octicon-copy" 14}}</a>
 				{{if .EnableFeed}}
-				<a class="btn-octicon" href="{{$.FeedURL}}/rss/{{$.BranchNameSubURL}}/{{PathEscapeSegments .TreePath}}">{{svg "octicon-rss" 14}}</a>
+				<a class="btn-octicon" href="{{$.FeedURL}}/rss/{{$.BranchNameSubURL}}/{{PathEscapeSegments .TreePath}}" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">
+					{{svg "octicon-rss" 14}}
+				</a>
 				{{end}}
 				{{if .Repository.CanEnableEditor}}
 					{{if .CanEditFile}}