From 5d47ef230918167fed530cb7d82d39e9abd6622d Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Fri, 7 Feb 2025 13:32:59 +0200
Subject: [PATCH] UI: Fixed a blur effect issue in the Getting started widget

---
 .../getting-started-widget.component.html     | 26 +++++++++----------
 .../getting-started-widget.component.scss     |  3 +++
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html
index 004d9807b7..c0f980ca2e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html
@@ -26,7 +26,7 @@
       <ng-template [ngSwitchCase]="authority.SYS_ADMIN">
         <mat-step [completed]="gettingStarted.maxSelectedIndex > -1">
           <ng-template matStepLabel>
-            <div style="width: 100%;" class="flex flex-row items-center justify-between">
+            <div class="flex items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step1.title</div>
               <a *ngIf="matStepper.selectedIndex === 0" mat-button color="primary" routerLink="/tenants">{{ 'tenant.tenants' | translate }}</a>
             </div>
@@ -37,7 +37,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 0">
           <ng-template matStepLabel>
-            <div style="width: 100%;" class="flex flex-row items-center justify-between">
+            <div class="flex items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step2.title</div>
               <a *ngIf="matStepper.selectedIndex === 1" mat-button color="primary" routerLink="/settings/outgoing-mail">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -48,7 +48,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 1">
           <ng-template matStepLabel>
-            <div style="width: 100%;" class="flex flex-row items-center justify-between">
+            <div class="flex items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step3.title</div>
               <a *ngIf="matStepper.selectedIndex === 2" mat-button color="primary" routerLink="/settings/notifications">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -59,7 +59,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 2">
           <ng-template matStepLabel>
-            <div style="width: 100%;" class="flex flex-row items-center justify-between">
+            <div class="flex items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step4.title</div>
               <a *ngIf="matStepper.selectedIndex === 3" mat-button color="primary" routerLink="/security-settings/2fa">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -70,7 +70,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 3">
           <ng-template matStepLabel>
-            <div style="width: 100%;" class="flex flex-row items-center justify-between">
+            <div class="flex items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step5.title</div>
               <a *ngIf="matStepper.selectedIndex === 4" mat-button color="primary" routerLink="/security-settings/oauth2">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -81,7 +81,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 4">
           <ng-template matStepLabel>
-            <div style="width: 100%;" class="flex flex-row items-center justify-between">
+            <div class="flex items-center justify-between">
               <div translate>widgets.getting-started.sys-admin.step6.title</div>
               <a *ngIf="matStepper.selectedIndex === 5" mat-button color="primary" routerLink="/settings/notifications">{{ 'admin.settings' | translate }}</a>
             </div>
@@ -94,7 +94,7 @@
       <ng-template [ngSwitchCase]="authority.TENANT_ADMIN">
         <mat-step [completed]="gettingStarted.maxSelectedIndex > -1">
           <ng-template matStepLabel>
-            <div style="width: 100%;" class="flex flex-row items-center justify-between">
+            <div class="flex items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step1.title</div>
               <a *ngIf="matStepper.selectedIndex === 0" mat-button color="primary" routerLink="/entities/devices">{{ 'device.devices' | translate }}</a>
             </div>
@@ -105,7 +105,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 0">
           <ng-template matStepLabel>
-            <div style="width: 100%;" class="flex flex-row items-center justify-between">
+            <div class="flex items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step2.title</div>
             </div>
           </ng-template>
@@ -153,7 +153,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 1">
           <ng-template matStepLabel>
-            <div style="width: 100%;" class="flex flex-row items-center justify-between">
+            <div class="flex items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step3.title</div>
               <a *ngIf="matStepper.selectedIndex === 2" mat-button color="primary" routerLink="/dashboards">{{ 'dashboard.dashboards' | translate }}</a>
             </div>
@@ -164,7 +164,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 2">
           <ng-template matStepLabel>
-            <div style="width: 100%;" class="flex flex-row items-center justify-between">
+            <div class="flex items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step4.title</div>
               <a *ngIf="matStepper.selectedIndex === 3" mat-button color="primary" routerLink="/profiles/deviceProfiles">{{ 'widgets.getting-started.tenant-admin.step4.alarm-rules' | translate }}</a>
             </div>
@@ -175,7 +175,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 3">
           <ng-template matStepLabel>
-            <div style="width: 100%;" class="flex flex-row items-center justify-between">
+            <div class="flex items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step5.title</div>
             </div>
           </ng-template>
@@ -193,7 +193,7 @@
         </mat-step>
         <mat-step [completed]="gettingStarted.maxSelectedIndex > 4">
           <ng-template matStepLabel>
-            <div style="width: 100%;" class="flex flex-row items-center justify-between">
+            <div class="flex items-center justify-between">
               <div translate>widgets.getting-started.tenant-admin.step6.title</div>
               <a *ngIf="matStepper.selectedIndex === 5" mat-button color="primary" routerLink="/customers">{{ 'customer.customers' | translate }}</a>
             </div>
@@ -205,7 +205,7 @@
       </ng-template>
     </ng-container>
   </mat-stepper>
-  <div *ngIf="allCompleted" class="flex flex-col items-center justify-center" style="padding-top: 24px;">
+  <div *ngIf="allCompleted" class="flex justify-center pt-6">
     <button (click)="gettingStartedCompleted()" mat-flat-button color="primary">
       <mat-icon>rocket_launch</mat-icon>{{ 'widgets.getting-started.finish' | translate }}</button>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.scss
index e684c094d7..4a21006cc0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.scss
@@ -38,6 +38,9 @@
   .tb-get-started-container {
     flex: 1;
     overflow: auto;
+    mat-stepper {
+      transform: scale(1); //fixed blur content
+    }
   }
 }