Merge pull request #12623 from vvlladd28/bug/get-started-widget/fixed-blur-content

Fixed a blur effect issue in the Getting started widget

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>

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
+    }
   }
 }