From 4e6f8dd57a435d42fd061f0d900af48a3a425353 Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Mon, 13 Jan 2025 17:20:32 +0000
Subject: [PATCH] Use redesigned switch on commit graph page (#6545)

[skip ci] no related tests (covered by visual testing only)

Followup to https://codeberg.org/forgejo/forgejo/pulls/5214 and https://codeberg.org/forgejo/forgejo/pulls/6459.

Resolves https://codeberg.org/forgejo/forgejo/issues/2852.

## Preview

|Before|After|
|-|-|
|![](/attachments/c871bcdd-f60c-460f-93d8-33550b409d25)|![](/attachments/e97e63d8-2917-408d-87ce-37ee31dedc93)|

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6545
Reviewed-by: Michael Kriese <michael.kriese@gmx.de>
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
---
 templates/repo/graph.tmpl      | 12 +++++++++---
 web_src/css/modules/switch.css |  8 ++++++++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl
index 04b056cc60..739c5954b1 100644
--- a/templates/repo/graph.tmpl
+++ b/templates/repo/graph.tmpl
@@ -46,9 +46,15 @@
 						</div>
 					</div>
 				</div>
-				<div class="ui icon buttons small">
-					<button id="flow-color-monochrome" class="ui icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}</button>
-					<button id="flow-color-colored" class="ui icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button>
+				<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"}}
+						{{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"}}
+						{{ctx.Locale.Tr "repo.commit_graph.color"}}
+					</button>
 				</div>
 			</div>
 			<div id="git-graph-content">
diff --git a/web_src/css/modules/switch.css b/web_src/css/modules/switch.css
index 5250274d05..265c2ed45a 100644
--- a/web_src/css/modules/switch.css
+++ b/web_src/css/modules/switch.css
@@ -22,3 +22,11 @@
   background: var(--color-active);
   outline: 1px solid var(--color-input-border);
 }
+
+.switch .item svg {
+  vertical-align: sub;
+}
+
+.switch button.item {
+  background: transparent;
+}