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

@@ -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>

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"}}

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";

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;
+}