From c2f3203c68cbc1ee979921707dd62240fd83fc92 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Mon, 21 Oct 2024 11:46:35 -0600
Subject: [PATCH] Change Et2SwitchIcon style in toolbar

---
 api/js/etemplate/Et2Switch/Et2SwitchIcon.ts |  9 ++++++++-
 api/templates/default/etemplate2.css        | 12 ++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/api/js/etemplate/Et2Switch/Et2SwitchIcon.ts b/api/js/etemplate/Et2Switch/Et2SwitchIcon.ts
index 1d1870a974..f4b709636f 100644
--- a/api/js/etemplate/Et2Switch/Et2SwitchIcon.ts
+++ b/api/js/etemplate/Et2Switch/Et2SwitchIcon.ts
@@ -64,11 +64,18 @@ export class Et2SwitchIcon extends Et2InputWidget(LitElement)
 					color: var(--sl-color-neutral-400);
 				}
 
+				sl-switch {
+					display: flex;
+					align-items: center;
+				}
+
 				sl-switch[checked] slot[name="on"], sl-switch:not([checked]) slot[name="off"] {
 					color: var(--indicator-color, inherit);
 				}
 
-				sl-switch::part(label) {
+				sl-switch::part(label), sl-switch::part(form-control) {
+					display: flex;
+					align-items: center;
 					margin-inline-start: 0px;
 				}
 
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index f4477ef4a3..2881ec799d 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -2619,8 +2619,12 @@ table.egwGridView_outer thead tr th.noResize:hover {
 }
 
 .et2_toolbar et2-switch-icon {
-	font-size: 2.4em;
-	height: 1em;
+	font-size: 20px;
+	border-radius: var(--sl-border-radius-medium);
+	border-color: var(--sl-input-border-color);
+	border-width: var(--sl-input-border-width);
+	border-style: solid;
+	padding: 0px var(--sl-spacing-medium);
 }
 
 .et2_toolbar et2-switch-icon::part(form-control-label) {
@@ -2630,10 +2634,10 @@ table.egwGridView_outer thead tr th.noResize:hover {
 }
 
 .et2_toolbar et2-switch-icon::part(switch-label) {
-	top: calc(-1.1 * var(--sl-spacing-medium));
+	top: calc(-0.3 * var(--sl-spacing-medium));
 }
 
-et2-switch-icon:hover:not([disabled])::part(control) {
+et2-switch-icon:hover:not([disabled]), et2-switch-icon:hover:not([disabled])::part(control) {
 	background-color: var(--sl-color-gray-150);
 	border-color: var(--sl-input-border-color-hover);
 	color: var(--sl-input-color-hover);