From c1d382a39b8fd3213b7e0083b81527f6825770ba Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Mon, 31 Mar 2025 16:52:22 +0300
Subject: [PATCH 1/2] UI: Fixed default action header button color

---
 .../widget/action/widget-action-dialog.component.ts          | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
index 7a74624774..5e071103b8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
@@ -192,6 +192,11 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
 
   widgetHeaderButtonValidators() {
     const buttonType = this.widgetActionFormGroup.get('buttonType').value;
+    if (buttonType !== WidgetHeaderActionButtonType.icon) {
+      this.widgetActionFormGroup.get('buttonColor').patchValue('#ffffff', {emitEvent: false});
+    } else {
+      this.widgetActionFormGroup.get('buttonColor').patchValue(this.defaultIconColor, {emitEvent: false});
+    }
     this.widgetActionFormGroup.get('showIcon').disable({emitEvent: false});
     this.widgetActionFormGroup.get('buttonFillColor').disable({emitEvent: false});
     this.widgetActionFormGroup.get('buttonBorderColor').disable({emitEvent: false});

From fe0e20f785c6d3a72df33f79fbed474d3dfaed3f Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Mon, 31 Mar 2025 18:18:10 +0300
Subject: [PATCH 2/2] UI: Fixed updated header button color

---
 .../action/widget-action-dialog.component.ts  | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
index 5e071103b8..ea49a8b442 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
@@ -135,8 +135,8 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
       showIcon: [{ value: this.action.showIcon ?? true, disabled: true}, []],
       icon: [this.action.icon, Validators.required],
       buttonColor: [{ value: this.action.buttonColor ?? this.defaultIconColor, disabled: true}, []],
-      buttonFillColor: [{ value: this.action.buttonFillColor ?? '#3F52DD', disabled: true}, []],
-      buttonBorderColor: [{ value: this.action.buttonBorderColor ?? '#3F52DD', disabled: true}, []],
+      buttonFillColor: [{ value: this.action.buttonFillColor ?? '#305680', disabled: true}, []],
+      buttonBorderColor: [{ value: this.action.buttonBorderColor ?? '#0000001F', disabled: true}, []],
       customButtonStyle: [{ value: this.action.customButtonStyle ?? {}, disabled: true}, []],
       useShowWidgetActionFunction: [this.action.useShowWidgetActionFunction],
       showWidgetActionFunction: [this.action.showWidgetActionFunction || 'return true;'],
@@ -146,7 +146,7 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
     if (this.widgetActionFormGroup.get('actionSourceId').value === 'headerButton') {
       this.widgetActionFormGroup.get('buttonType').enable({emitEvent: false});
       this.widgetActionFormGroup.get('buttonColor').enable({emitEvent: false});
-      this.widgetHeaderButtonValidators();
+      this.widgetHeaderButtonValidators(true);
     }
     this.widgetActionFormGroup.get('actionSourceId').valueChanges.pipe(
       takeUntilDestroyed(this.destroyRef)
@@ -162,7 +162,7 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
       if (value === 'headerButton') {
         this.widgetActionFormGroup.get('buttonType').enable({emitEvent: false});
         this.widgetActionFormGroup.get('buttonColor').enable({emitEvent: false});
-        this.widgetHeaderButtonValidators();
+        this.widgetHeaderButtonValidators(true);
       } else {
         this.widgetActionFormGroup.get('buttonType').disable({emitEvent: false});
         this.widgetActionFormGroup.get('showIcon').disable({emitEvent: false});
@@ -190,12 +190,16 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
     });
   }
 
-  widgetHeaderButtonValidators() {
+  private widgetHeaderButtonValidators(ignoreUpdatedButtonColor = false) {
     const buttonType = this.widgetActionFormGroup.get('buttonType').value;
-    if (buttonType !== WidgetHeaderActionButtonType.icon) {
-      this.widgetActionFormGroup.get('buttonColor').patchValue('#ffffff', {emitEvent: false});
-    } else {
-      this.widgetActionFormGroup.get('buttonColor').patchValue(this.defaultIconColor, {emitEvent: false});
+    if (!ignoreUpdatedButtonColor) {
+      if ([WidgetHeaderActionButtonType.raised, WidgetHeaderActionButtonType.flat, WidgetHeaderActionButtonType.miniFab].includes(buttonType)) {
+        this.widgetActionFormGroup.get('buttonColor').patchValue('#ffffff', {emitEvent: false});
+      } else if ([WidgetHeaderActionButtonType.stroked].includes(buttonType)) {
+        this.widgetActionFormGroup.get('buttonColor').patchValue('#305680', {emitEvent: false});
+      } else {
+        this.widgetActionFormGroup.get('buttonColor').patchValue(this.defaultIconColor, {emitEvent: false});
+      }
     }
     this.widgetActionFormGroup.get('showIcon').disable({emitEvent: false});
     this.widgetActionFormGroup.get('buttonFillColor').disable({emitEvent: false});