Styles for dialogs edited

src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts

@@ -20,7 +20,7 @@ export class EditStyleActionComponent implements OnInit {
 
   editStyle() {
     const dialogRef = this.dialog.open(StyleEditorDialogComponent, {
-      width: '450px'
+      width: '300px'
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;

src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts

@@ -20,7 +20,7 @@ export class EditTextActionComponent implements OnInit {
 
   editText() {
     const dialogRef = this.dialog.open(TextEditorDialogComponent, {
-      width: '450px'
+      width: '300px'
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;

src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html

@@ -1,24 +1,27 @@
 <h1 mat-dialog-title>Style editor</h1>
-<span *ngIf="element.fill" class="item">
-  <div class="item-name">Fill color</div>
-  <input class="input-color" type="color" [(ngModel)]="element.fill" />
-</span>
-<span class="item">
-  <div class="item-name">Border color</div>
-  <input class="input-color" type="color" [(ngModel)]="element.stroke" />
-</span>
-<span class="item">
-  <div class="item-name">Border width</div>
-  <input class="item-value" matInput type="text" [(ngModel)]="element.stroke_width" />
-</span>
-<span *ngIf="element.stroke_dasharray" class="item">
-  <div class="item-name">Border style</div>
-  <input class="item-value" matInput type="text" [(ngModel)]="element.stroke_dasharray" />
-</span>
-<span class="item">
-  <div class="item-name">Rotation</div>
-  <input class="item-value" matInput type="text" [(ngModel)]="rotation" />
-</span>
+
+<div class="modal-form-container">
+  <mat-form-field>
+    <input matInput placeholder="Fill color" type="color" [(ngModel)]="element.fill">
+  </mat-form-field>
+
+  <mat-form-field>
+    <input matInput placeholder="Fill color" type="color" [(ngModel)]="element.stroke">
+  </mat-form-field>
+
+  <mat-form-field>
+    <input matInput placeholder="Border width" type="text" [(ngModel)]="element.stroke_width">
+  </mat-form-field>
+    
+  <mat-form-field *ngIf="element.stroke_dasharray">
+      <input matInput placeholder="Border style" type="text" [(ngModel)]="element.stroke_dasharray">
+  </mat-form-field>
+
+  <mat-form-field>
+      <input matInput placeholder="Rotation" type="text" [(ngModel)]="rotation">
+  </mat-form-field>
+</div>
+
 <div mat-dialog-actions>
   <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
   <button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>

src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss

@@ -38,3 +38,12 @@ input[type="color"]::-webkit-color-swatch-wrapper {
 input[type="color"]::-webkit-color-swatch {
 	border: none;
 }
+
+.modal-form-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-form-container > * {
+  width: 100%;
+}

src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html

@@ -1,13 +1,17 @@
 <h1 mat-dialog-title>Text editor</h1>
-<span *ngIf="element.fill" class="item">
-  <div class="item-name">Fill color</div>
-  <input class="input-color" type="color" (ngModelChange)="changeTextColor($event)" [(ngModel)]="element.fill" />
-</span>
-<span class="item">
-  <div class="item-name">Rotation</div>
-  <input class="item-value" matInput type="text" [(ngModel)]="rotation" />
-</span>
-<span> <textarea #textArea id="textArea" class="text" [(ngModel)]="element.text"> </textarea> </span>
+
+<div class="modal-form-container">
+  <mat-form-field>
+    <input matInput placeholder="Fill color" type="color" (ngModelChange)="changeTextColor($event)" [(ngModel)]="element.fill">
+  </mat-form-field>
+
+  <mat-form-field>
+    <input matInput placeholder="Rotation" type="text" [(ngModel)]="rotation">
+  </mat-form-field>
+
+  <textarea #textArea id="textArea" class="text" [(ngModel)]="element.text"> </textarea> 
+</div>
+
 <div mat-dialog-actions>
   <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
   <button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>

src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss

@@ -43,3 +43,12 @@ input[type="color"]::-webkit-color-swatch {
   width: 100%;
   height: 150px;
 }
+
+.modal-form-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-form-container > * {
+  width: 100%;
+}