From a23cf58d47d3c5424216f743cade92a01e3120ae Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Sun, 5 Jan 2025 18:46:47 +0000
Subject: [PATCH] ui: switch redesign (#6459)

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6459
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
---
 templates/repo/issue/navbar.tmpl    |  4 ++--
 templates/repo/issue/openclose.tmpl |  2 +-
 web_src/css/index.css               |  1 +
 web_src/css/modules/switch.css      | 24 ++++++++++++++++++++++++
 4 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 web_src/css/modules/switch.css

diff --git a/templates/repo/issue/navbar.tmpl b/templates/repo/issue/navbar.tmpl
index 30e42c77cc..8310d3a33f 100644
--- a/templates/repo/issue/navbar.tmpl
+++ b/templates/repo/issue/navbar.tmpl
@@ -1,4 +1,4 @@
-<h2 class="ui compact small menu small-menu-items issue-list-navbar">
+<div class="switch">
 	<a class="{{if .PageIsLabels}}active {{end}}item" href="{{.RepoLink}}/labels">{{ctx.Locale.Tr "repo.labels"}}</a>
 	<a class="{{if .PageIsMilestones}}active {{end}}item" href="{{.RepoLink}}/milestones">{{ctx.Locale.Tr "repo.milestones"}}</a>
-</h2>
+</div>
diff --git a/templates/repo/issue/openclose.tmpl b/templates/repo/issue/openclose.tmpl
index 4c2d69355b..efe4fa6756 100644
--- a/templates/repo/issue/openclose.tmpl
+++ b/templates/repo/issue/openclose.tmpl
@@ -1,4 +1,4 @@
-<div class="small-menu-items ui compact tiny menu">
+<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"}}
diff --git a/web_src/css/index.css b/web_src/css/index.css
index 49ceb2c8ce..12830299cf 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -17,6 +17,7 @@
 @import "./modules/checkbox.css";
 @import "./modules/modal.css";
 
+@import "./modules/switch.css";
 @import "./modules/select.css";
 @import "./modules/tippy.css";
 @import "./modules/breadcrumb.css";
diff --git a/web_src/css/modules/switch.css b/web_src/css/modules/switch.css
new file mode 100644
index 0000000000..7afb275065
--- /dev/null
+++ b/web_src/css/modules/switch.css
@@ -0,0 +1,24 @@
+.switch {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  background: var(--color-menu);
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--border-radius);
+}
+
+.switch .item {
+  color: var(--color-text);
+  padding: .5em 1.125em;
+  border-radius: var(--border-radius);
+  text-wrap: nowrap;
+}
+
+.switch .active.item {
+  background: var(--color-active);
+  outline: 1px solid var(--color-input-border);
+}
+
+.switch .item svg {
+  vertical-align: sub;
+}