From 507280b073665f9ca28e4b113712e6294950d485 Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Mon, 21 Apr 2025 04:25:08 +0000
Subject: [PATCH] fix(ui): use gap in switch items (#7581)

Followup to PRs where the old switches were converted to this one.

The main change here is to the switch with counter. It was missing a gap.

Additionally, it removes tailwind helpers the other switches retained from before switch refactors, because they are now using gap.

Preview:
https://codeberg.org/attachments/6191f55e-0b61-49fa-ba8f-cd9c93ca7bd4
https://codeberg.org/attachments/a03fb681-45b7-40f5-929e-55154abeb20d
No visual change to the ones with icons.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7581
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
---
 templates/projects/list.tmpl             |  4 ++--
 templates/repo/graph.tmpl                |  4 ++--
 templates/repo/issue/openclose.tmpl      | 10 +++++-----
 templates/user/dashboard/issues.tmpl     |  4 ++--
 templates/user/dashboard/milestones.tmpl |  4 ++--
 web_src/css/modules/switch.css           |  1 +
 6 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/templates/projects/list.tmpl b/templates/projects/list.tmpl
index 5a9ba004eb..8c9b7c6e6f 100644
--- a/templates/projects/list.tmpl
+++ b/templates/projects/list.tmpl
@@ -2,11 +2,11 @@
 	<div class="tw-flex tw-justify-between tw-mb-4">
 		<div class="switch list-header-toggle">
 			<a class="item{{if not .IsShowClosed}} active{{end}}" href="?state=open&q={{$.Keyword}}">
-				{{svg "octicon-project-symlink" 16 "tw-mr-2"}}
+				{{svg "octicon-project-symlink" 16}}
 				{{ctx.Locale.PrettyNumber .OpenCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.open_title"}}
 			</a>
 			<a class="item{{if .IsShowClosed}} active{{end}}" href="?state=closed&q={{$.Keyword}}">
-				{{svg "octicon-check" 16 "tw-mr-2"}}
+				{{svg "octicon-check" 16}}
 				{{ctx.Locale.PrettyNumber .ClosedCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.closed_title"}}
 			</a>
 		</div>
diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl
index 739c5954b1..b6211bd5d8 100644
--- a/templates/repo/graph.tmpl
+++ b/templates/repo/graph.tmpl
@@ -48,11 +48,11 @@
 				</div>
 				<div class="switch">
 					<button id="flow-color-monochrome" class="{{if eq .Mode "monochrome"}}active {{end}}item" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">
-						{{svg "material-invert-colors" 16 "tw-mr-1"}}
+						{{svg "material-invert-colors" 16}}
 						{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}
 					</button>
 					<button id="flow-color-colored" class="{{if ne .Mode "monochrome"}}active {{end}}item" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">
-						{{svg "material-palette" 16 "tw-mr-1"}}
+						{{svg "material-palette" 16}}
 						{{ctx.Locale.Tr "repo.commit_graph.color"}}
 					</button>
 				</div>
diff --git a/templates/repo/issue/openclose.tmpl b/templates/repo/issue/openclose.tmpl
index 25f73a857d..5d5cf4140e 100644
--- a/templates/repo/issue/openclose.tmpl
+++ b/templates/repo/issue/openclose.tmpl
@@ -1,21 +1,21 @@
 <div class="switch">
 	<a class="{{if eq .State "open"}}active {{end}}item" href="{{.OpenLink}}" data-test-name="open-issue-count">
 		{{if .PageIsMilestones}}
-			{{svg "octicon-milestone" 16 "tw-mr-2"}}
+			{{svg "octicon-milestone" 16}}
 		{{else if .PageIsPullList}}
-			{{svg "octicon-git-pull-request" 16 "tw-mr-2"}}
+			{{svg "octicon-git-pull-request" 16}}
 		{{else}}
-			{{svg "octicon-issue-opened" 16 "tw-mr-2"}}
+			{{svg "octicon-issue-opened" 16}}
 		{{end}}
 		{{ctx.Locale.PrettyNumber .OpenCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.open_title"}}
 	</a>
 	<a class="{{if eq .State "closed"}}active {{end}}item" href="{{.ClosedLink}}" data-test-name="closed-issue-count">
-		{{svg "octicon-issue-closed" 16 "tw-mr-2"}}
+		{{svg "octicon-issue-closed" 16}}
 		{{ctx.Locale.PrettyNumber .ClosedCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.closed_title"}}
 	</a>
 	{{if not .PageIsMilestones}}
 		<a class="{{if eq .State "all"}}active {{end}}item" href="{{.AllStatesLink}}" data-test-name="all-issue-count">
-			{{svg "octicon-eye" 16 "tw-mr-2"}}
+			{{svg "octicon-eye" 16}}
 			{{ctx.Locale.PrettyNumber (.AllCount)}}&nbsp;{{ctx.Locale.Tr "repo.issues.all_title"}}
 		</a>
 	{{end}}
diff --git a/templates/user/dashboard/issues.tmpl b/templates/user/dashboard/issues.tmpl
index e25a9d8219..c76a61c393 100644
--- a/templates/user/dashboard/issues.tmpl
+++ b/templates/user/dashboard/issues.tmpl
@@ -6,11 +6,11 @@
 		<div class="list-header">
 			<div class="switch list-header-toggle">
 				<a class="item{{if not .IsShowClosed}} active{{end}}" href="?type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&q={{$.Keyword}}">
-					{{svg "octicon-issue-opened" 16 "tw-mr-2"}}
+					{{svg "octicon-issue-opened" 16}}
 					{{ctx.Locale.PrettyNumber .IssueStats.OpenCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.open_title"}}
 				</a>
 				<a class="item{{if .IsShowClosed}} active{{end}}" href="?type={{$.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&q={{$.Keyword}}">
-					{{svg "octicon-issue-closed" 16 "tw-mr-2"}}
+					{{svg "octicon-issue-closed" 16}}
 					{{ctx.Locale.PrettyNumber .IssueStats.ClosedCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.closed_title"}}
 				</a>
 			</div>
diff --git a/templates/user/dashboard/milestones.tmpl b/templates/user/dashboard/milestones.tmpl
index 01dcbec1c9..267d5e3534 100644
--- a/templates/user/dashboard/milestones.tmpl
+++ b/templates/user/dashboard/milestones.tmpl
@@ -37,11 +37,11 @@
 				<div class="list-header">
 					<div class="switch list-header-toggle">
 						<a class="item{{if not .IsShowClosed}} active{{end}}" href="?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
-							{{svg "octicon-milestone" 16 "tw-mr-2"}}
+							{{svg "octicon-milestone" 16}}
 							{{ctx.Locale.PrettyNumber .MilestoneStats.OpenCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.open_title"}}
 						</a>
 						<a class="item{{if .IsShowClosed}} active{{end}}" href="?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=closed&q={{$.Keyword}}">
-							{{svg "octicon-check" 16 "tw-mr-2"}}
+							{{svg "octicon-check" 16}}
 							{{ctx.Locale.PrettyNumber .MilestoneStats.ClosedCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.closed_title"}}
 						</a>
 					</div>
diff --git a/web_src/css/modules/switch.css b/web_src/css/modules/switch.css
index a9499a84aa..7780155787 100644
--- a/web_src/css/modules/switch.css
+++ b/web_src/css/modules/switch.css
@@ -11,6 +11,7 @@
 
 .switch .item {
   display: flex;
+  gap: 0.5rem;
   align-items: center;
   padding: .5em 1.125em;
   color: var(--color-text);