[editor] Change style of add button in StateVariablesDialogComponent

- Swap the position of dialog buttons

projects/editor/src/app/components/dialogs/state-variables-dialog/state-variables-dialog.component.html

 <h1 mat-dialog-title>{{'manageStateVariables' | translate}}</h1>
 <div mat-dialog-content class="fx-column-start-stretch fx-gap-20">
-  <div class="fx-row-end-stretch">
-    <button mat-icon-button
-            matSuffix
-            color="primary"
-            (click)="addStateVariable()">
-      <mat-icon>add</mat-icon>
-    </button>
-  </div>
   <div *ngFor="let stateVariable of stateVariables; let i = index"
        class="fx-row-start-stretch fx-gap-10">
     <aspect-state-variable-editor
@@ -20,14 +12,19 @@
       <mat-icon>delete</mat-icon>
     </button>
   </div>
-</div>
-<div mat-dialog-actions>
   <button mat-button
-          mat-dialog-close>
-    {{'cancel' | translate }}
+          class="add-button"
+          (click)="addStateVariable()">
+    <mat-icon class="add-icon">add</mat-icon>
   </button>
+</div>
+<div mat-dialog-actions>
   <button mat-button
           [mat-dialog-close]="stateVariables">
     {{'save' | translate }}
   </button>
+  <button mat-button
+          mat-dialog-close>
+    {{'cancel' | translate }}
+  </button>
 </div>

projects/editor/src/app/components/dialogs/state-variables-dialog/state-variables-dialog.component.ts

@@ -3,7 +3,19 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { StateVariable } from 'common/models/state-variable';
 
 @Component({
-  templateUrl: './state-variables-dialog.component.html'
+  templateUrl: './state-variables-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 StateVariablesDialogComponent {
   stateVariables: StateVariable[];