From 978d356eedd54d839c9109331ef8c2c9f8751d30 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Mon, 5 Sep 2022 10:10:11 +0200
Subject: [PATCH] Set background color for buttons used in dialogs footer

---
 api/js/etemplate/Et2Button/ButtonMixin.ts | 2 +-
 api/js/etemplate/Styles/shoelace.ts       | 1 +
 api/templates/default/etemplate2.css      | 3 +++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/api/js/etemplate/Et2Button/ButtonMixin.ts b/api/js/etemplate/Et2Button/ButtonMixin.ts
index abcee7e509..12558f0796 100644
--- a/api/js/etemplate/Et2Button/ButtonMixin.ts
+++ b/api/js/etemplate/Et2Button/ButtonMixin.ts
@@ -83,7 +83,7 @@ export const ButtonMixin = <T extends Constructor>(superclass : T) => class exte
 			}
 			/* Make hover border match other widgets (select) */
 			.button--standard.button--default:hover:not(.button--disabled) {
-				background-color: var(--sl-color-gray-100);
+				background-color: var(--sl-color-gray-150);
 				border-color: var(--sl-input-border-color-hover);
 				color: var(--sl-input-color-hover);
 			}
diff --git a/api/js/etemplate/Styles/shoelace.ts b/api/js/etemplate/Styles/shoelace.ts
index 196229cdcd..36ed4113a2 100644
--- a/api/js/etemplate/Styles/shoelace.ts
+++ b/api/js/etemplate/Styles/shoelace.ts
@@ -53,6 +53,7 @@ export default [sl_css, css`
       --indicator-color: #696969;
       --sl-input-focus-ring-color: #26537C;
       --sl-focus-ring-width: 2px;
+      --sl-color-gray-150: #f0f0f0;
       
   }
   .tab-group--top .tab-group__tabs {
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 86fd680f7a..080e1d93a4 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -3742,6 +3742,9 @@ tr.dialogOperators td, .dialogFooterToolbar {
 .dialogFooterToolbar, .dialogFooterToolbar td {
     padding-top: 10px !important;
 }
+.dialogFooterToolbar et2-button::part(base):not(:hover) {
+    background: hsl(240 4.8% 95.9%);
+}
 .dialogHeader {
     vertical-align: middle;
     border-bottom: 1px solid #E6E6E6;