From 599911546b422355d92de1b2f03e4f7a35e2dafe Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 5 Feb 2024 15:23:30 +0200
Subject: [PATCH] UI: Widget button style fixes.

---
 .../button/widget-button-custom-style-panel.component.ts       | 2 +-
 .../common/button/widget-button-custom-style.component.ts      | 3 ++-
 .../app/shared/components/button/widget-button.component.scss  | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.ts
index 419ce7e4d4..e6af6f2ab9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component.ts
@@ -164,7 +164,7 @@ export class WidgetButtonCustomStylePanelComponent extends PageComponent impleme
   }
 
   private updatePreviewAppearance() {
-    this.previewAppearance = {...this.appearance};
+    this.previewAppearance = deepClone(this.appearance);
     this.previewAppearance.customStyle[this.state] = this.customStyleFormGroup.value;
     this.cd.markForCheck();
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style.component.ts
index b9a1605b19..a67f9a45ab 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/button/widget-button-custom-style.component.ts
@@ -37,6 +37,7 @@ import { MatIconButton } from '@angular/material/button';
 import {
   WidgetButtonCustomStylePanelComponent
 } from '@home/components/widget/lib/settings/common/button/widget-button-custom-style-panel.component';
+import { deepClone } from '@core/utils';
 
 @Component({
   selector: 'tb-widget-button-custom-style',
@@ -147,7 +148,7 @@ export class WidgetButtonCustomStyleComponent implements OnInit, OnChanges, Cont
   }
 
   private updatePreviewAppearance() {
-    this.previewAppearance = {...this.appearance};
+    this.previewAppearance = deepClone(this.appearance);
     if (this.modelValue) {
       this.previewAppearance.customStyle[this.state] = this.modelValue;
     }
diff --git a/ui-ngx/src/app/shared/components/button/widget-button.component.scss b/ui-ngx/src/app/shared/components/button/widget-button.component.scss
index 546a3bed19..a0abc95731 100644
--- a/ui-ngx/src/app/shared/components/button/widget-button.component.scss
+++ b/ui-ngx/src/app/shared/components/button/widget-button.component.scss
@@ -44,7 +44,7 @@ $mainColorActivatedFilled: var(--tb-widget-button-main-color-activated-filled, #
 
 $mainColorDisabled: var(--tb-widget-button-main-color-disabled, $defaultMainColorDisabled);
 $backgroundColorDisabled: var(--tb-widget-button-background-color-disabled, $defaultBackgroundColorDisabled);
-$boxShadowColorDisabled: var(--tb-widget-button-box-shadow-color-activated, $defaultBoxShadowColor);
+$boxShadowColorDisabled: var(--tb-widget-button-box-shadow-color-disabled, $defaultBoxShadowColor);
 
 
 @mixin _tb-widget-button-styles($main, $background, $boxShadow) {