[editor] Change style of add button in VisibilityRulesDialogComponent

- Swap the position of dialog buttons

projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.html

 <h1 mat-dialog-title>{{'section.manageVisibilityRules' | translate}}</h1>
 <div mat-dialog-content class="fx-column-start-stretch fx-gap-20">
-  <ng-container *ngIf="controlIds.length">
-    <div class="fx-row-end-stretch">
-      <button mat-icon-button
-              matSuffix
-              color="primary"
-              (click)="addVisibilityRule()">
-        <mat-icon>add</mat-icon>
-      </button>
-    </div>
-    <div *ngIf="visibilityRules.length"
-         class="fx-column-start-start">
-      <mat-checkbox
-        [(ngModel)]="enableReHide">
-        {{'section.enableReHide' | translate}}
-      </mat-checkbox>
-      <mat-checkbox
-        [disabled]="enableReHide"
-        [(ngModel)]="animatedVisibility">
-        {{'section.animatedVisibility' | translate}}
-      </mat-checkbox>
-      <mat-form-field>
-        <mat-label>{{'section.visibilityDelay' | translate}}</mat-label>
-        <input matInput
-               type="number"
-               step="1000"
-               [disabled]="enableReHide"
-               [placeholder]="'section.visibilityDelay' | translate"
-               [(ngModel)]="visibilityDelay">
-      </mat-form-field>
-    </div>
-  </ng-container>
+  <div *ngIf="controlIds.length && visibilityRules.length"
+       class="fx-column-start-start">
+    <mat-checkbox
+      [(ngModel)]="enableReHide">
+      {{'section.enableReHide' | translate}}
+    </mat-checkbox>
+    <mat-checkbox
+      [disabled]="enableReHide"
+      [(ngModel)]="animatedVisibility">
+      {{'section.animatedVisibility' | translate}}
+    </mat-checkbox>
+    <mat-form-field>
+      <mat-label>{{'section.visibilityDelay' | translate}}</mat-label>
+      <input matInput
+             type="number"
+             step="1000"
+             [disabled]="enableReHide"
+             [placeholder]="'section.visibilityDelay' | translate"
+             [(ngModel)]="visibilityDelay">
+    </mat-form-field>
+  </div>
 
   <p *ngIf="!controlIds.length">{{'section.addElementsOrStateVariables' | translate}}</p>
 
@@ -46,15 +36,21 @@
       <mat-icon>delete</mat-icon>
     </button>
   </div>
+  <button *ngIf="controlIds.length"
+          mat-button
+          class="add-button"
+          (click)="addVisibilityRule()">
+    <mat-icon class="add-icon">add</mat-icon>
+  </button>
 </div>
 <div mat-dialog-actions>
-  <button mat-button
-          mat-dialog-close>
-    {{'cancel' | translate}}
-  </button>
   <button *ngIf="controlIds.length"
           mat-button
           [mat-dialog-close]="{visibilityRules, visibilityDelay, animatedVisibility, enableReHide}">
     {{'save' | translate}}
   </button>
+  <button mat-button
+          mat-dialog-close>
+    {{'cancel' | translate}}
+  </button>
 </div>

projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.ts

@@ -3,7 +3,19 @@ import { VisibilityRule } from 'common/models/visibility-rule';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
-  templateUrl: './visibility-rules-dialog.component.html'
+  templateUrl: './visibility-rules-dialog.component.html',
+  styles: [`
+    .add-button {
+      width: 100%;
+      height: 25px;
+      background-color: #BABABA;
+    }
+    .add-icon {
+      font-size: 24px;
+      color: white;
+      margin-top: -5px;
+    }
+  `]
 })
 export class VisibilityRulesDialogComponent {
   visibilityRules!: VisibilityRule[];