Styles for dialogs edited

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

@@ -1,22 +1,22 @@
 <h1 mat-dialog-title>Style editor</h1>
 <span *ngIf="element.fill" class="item">
-  <div class="item-name">Fill color:</div>
+  <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>
+  <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>
+  <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>
+  <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>
+  <div class="item-name">Rotation</div>
   <input class="item-value" matInput type="text" [(ngModel)]="rotation" />
 </span>
 <div mat-dialog-actions>

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

@@ -1,25 +1,22 @@
 .item {
-  display: flex;
   height: 25px;
   font-size: 10pt;
   margin-bottom: 10px;
 }
 
 .item-name {
-  width: 30%;
+  margin-bottom: 10px;
 }
 
 .item-value {
-  width: 70%;
-  margin: 3px;
-  margin-right: 4px;
-  margin-left: 4px;
+  width: 100%;
+  margin-bottom: 10px;
 }
 
 .input-color {
   padding: 0px;
   border-width: 0px;
-  width: 70%;
+  width: 100%;
   background-color: transparent;
   outline: none;
 }
@@ -27,3 +24,17 @@
 input:focus {
   outline: none;
 }
+
+input[type="color"] {
+	-webkit-appearance: none;
+	border: none;
+  height: 25px;
+}
+
+input[type="color"]::-webkit-color-swatch-wrapper {
+	padding: 0;
+}
+
+input[type="color"]::-webkit-color-swatch {
+	border: none;
+}

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

@@ -1,10 +1,10 @@
 <h1 mat-dialog-title>Text editor</h1>
 <span *ngIf="element.fill" class="item">
-  <div class="item-name">Fill color:</div>
+  <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>
+  <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>

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

@@ -1,24 +1,22 @@
 .item {
-  display: flex;
   height: 25px;
   font-size: 10pt;
   margin-bottom: 10px;
 }
 
 .item-name {
-  width: 30%;
+  margin-bottom: 10px;
 }
 
 .item-value {
-  width: 70%;
-  margin-top: 3px;
-  margin-bottom: 3px;
+  width: 100%;
+  margin-bottom: 10px;
 }
 
 .input-color {
   padding: 0px;
   border-width: 0px;
-  width: 70%;
+  width: 100%;
   background-color: transparent;
   outline: none;
 }
@@ -27,6 +25,20 @@ input:focus {
   outline: none;
 }
 
+input[type="color"] {
+	-webkit-appearance: none;
+	border: none;
+  height: 25px;
+}
+
+input[type="color"]::-webkit-color-swatch-wrapper {
+	padding: 0;
+}
+
+input[type="color"]::-webkit-color-swatch {
+	border: none;
+}
+
 .text {
   width: 100%;
   height: 150px;

src/app/components/projects/import-project-dialog/import-project-dialog.component.css

@@ -4,7 +4,7 @@
 
 .file-button{
     height: 50px;
-    width: 20%;
+    width: 30%;
     margin-top: 10px;
     padding: 0px;
 }
@@ -16,7 +16,7 @@
 
 .file-name-form-field {
     margin-left: 5%; 
-    width: 65%; 
+    width: 60%; 
 }
 
 .delete-button {

src/app/components/projects/projects.component.ts

@@ -109,7 +109,7 @@ export class ProjectsComponent implements OnInit {
 
   addBlankProject() {
     const dialogRef = this.dialog.open(AddBlankProjectDialogComponent, {
-      width: '550px'
+      width: '400px'
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
@@ -117,7 +117,7 @@ export class ProjectsComponent implements OnInit {
 
   importProject() {
     const dialogRef = this.dialog.open(ImportProjectDialogComponent, {
-      width: '550px'
+      width: '400px'
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;

src/styles.css

@@ -16,6 +16,10 @@ a.table-link {
   color: white!important;
 }
 
+.mat-dialog-actions {
+  margin-bottom: -12px!important;
+}
+
 @-moz-document url-prefix() {
   .temporaryElement{
       line-height: 1.4em;