commit 9d5c8063adc0f018ae593876e301f3cb9a13ca78
Author: lmoucka@students.zcu.cz <AccessGitLm21895.199521>
Date:   Thu May 13 01:10:53 2021 +0200

    Re #8874 - Stylování popup oken
    + Add styles for next popup windows

diff --git a/src/app/dashboard/components/position-insert-popup/position-insert-popup.component.html b/src/app/dashboard/components/position-insert-popup/position-insert-popup.component.html
index e0bd011..5dc1643 100644
--- a/src/app/dashboard/components/position-insert-popup/position-insert-popup.component.html
+++ b/src/app/dashboard/components/position-insert-popup/position-insert-popup.component.html
@@ -1,4 +1,4 @@
-<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Add position to unit!" [style]="{width: '70vw'}"
+<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Add position to unit!" [style]="{width: '50vw'}"
           [baseZIndex]="10000" (onShow)="clearFormArray()">
 
   <form [formGroup]="insertForm">
diff --git a/src/app/dashboard/components/sensor-insert-popup/sensor-insert-popup.component.html b/src/app/dashboard/components/sensor-insert-popup/sensor-insert-popup.component.html
index 6c8b3b6..c1d536c 100644
--- a/src/app/dashboard/components/sensor-insert-popup/sensor-insert-popup.component.html
+++ b/src/app/dashboard/components/sensor-insert-popup/sensor-insert-popup.component.html
@@ -1,28 +1,29 @@
-<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Add sensor to unit - {{unit?.unitId}}" [style]="{width: '70vw'}"
-          [baseZIndex]="10000" (onShow)="clearFormArray()">
+<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Add sensor to unit&nbsp;&ndash;&nbsp;{{unit?.unitId}}" [style]="{width: '40vw'}"
+          [baseZIndex]="10000" (onShow)="clearFormArray()" [className]="'popup-form'">
 
   <form [formGroup]="insertForm">
-  <div class="input-group form-group">
+  <div class="input-group form-group popup-sensors-wrapper">
     <div formArrayName="sensors" *ngFor="let item of insertForm.get('sensors')['controls']; let i = index;">
-      <div [formGroupName]="i">
+      <div [formGroupName]="i" class="popup-sensor">
         <div class="input-group form-group">
           <div class="input-group-prepend">
-            <span class="input-group-text">Sensor ID</span>
+            <span class="input-group-text"><i class="fas fa-list-ol"></i></span>
           </div>
-          <input type="text" formControlName="sensorId" class="form-control" id="sensorId" placeholder="sensorId"/>
+          <input type="text" formControlName="sensorId" class="form-control" id="sensorId" placeholder="Sensor ID"/>
         </div>
         <div class="input-group form-group">
           <div class="input-group-prepend">
-            <span class="input-group-text">Sensor name</span>
+            <span class="input-group-text"><i class="fas fa-file-signature"></i></span>
           </div>
           <input type="text" formControlName="sensorName" class="form-control" id="sensorName"
-                 placeholder="sensorName"/>
+                 placeholder="Sensor name"/>
         </div>
         <div class="input-group form-group">
           <div class="input-group-prepend">
-            <span class="input-group-text">Sensor type</span>
+            <span class="input-group-text"><i class="fas fa-file-signature"></i></span>
           </div>
           <select formControlName="sensorType" id="sensorType">
+            <option [ngValue]="null" disabled>Select sensor type</option>
             <option *ngFor="let sensorType of sensorTypes; let i = index" [value]="sensorTypes[i].sensorType">
               {{sensorTypes[i].sensorType}}
             </option>
@@ -30,9 +31,10 @@
         </div>
         <div class="input-group form-group">
           <div class="input-group-prepend">
-            <span class="input-group-text">Sensor phenomeon</span>
+            <span class="input-group-text"><i class="fas fa-tint"></i></span>
           </div>
           <select formControlName="phenomenons" id="phenomenons">
+            <option [ngValue]="null" disabled>Select phenomenon</option>
             <option *ngFor="let phenomenon of phenomenons; let i = index" [value]="phenomenons[i].phenomenonId">
               {{phenomenons[i].phenomenonName}} ( {{ phenomenons[i].unit}})
             </option>
@@ -43,10 +45,9 @@
     </div>
   </div>
   </form>
-
-  <p-button type="button" (click)="addSensor()" class="pr-2">Add Sensor</p-button>
   <p-footer>
-    <div class="row justify-content-end align-items-center">
+    <div class="popup-buttons-wrapper">
+      <p-button type="button" (click)="addSensor()" class="pr-2">Add Sensor</p-button>
       <div>
         <p-button icon="pi pi-times" (click)="close()" label="Close" class="pr-2"></p-button>
         <p-button icon="pi pi-check" (click)="processSensorInsertion()" type="submit" label="Save" class="pr-2"></p-button>
diff --git a/src/app/dashboard/components/unit-popup/unit-popup.component.html b/src/app/dashboard/components/unit-popup/unit-popup.component.html
index 8df24e0..c19f63d 100644
--- a/src/app/dashboard/components/unit-popup/unit-popup.component.html
+++ b/src/app/dashboard/components/unit-popup/unit-popup.component.html
@@ -1,9 +1,9 @@
-<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Edit unit - {{ unit?.unitId}}" [style]="{width: '50vw'}" [baseZIndex]="10000">
+<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Edit unit - {{ unit?.unitId}}" [style]="{width: '50vw'}" [baseZIndex]="10000" [className]="'popup-form'">
 
   <form [formGroup]="insertForm">
     <div class="input-group form-group">
       <div class="input-group-prepend">
-        <span class="input-group-text">Description</span>
+        <span class="input-group-text"><i class="fas fa-pen"></i></span>
       </div>
       <input type="text" formControlName="unitDescription" class="form-control" id="unitDescription" placeholder="{{unit?.description}}"/>
     </div>
diff --git a/src/app/shared/nav-bar/components/unit-insert-popup/unit-insert-popup.component.html b/src/app/shared/nav-bar/components/unit-insert-popup/unit-insert-popup.component.html
index 013c6f0..6b1a4a3 100644
--- a/src/app/shared/nav-bar/components/unit-insert-popup/unit-insert-popup.component.html
+++ b/src/app/shared/nav-bar/components/unit-insert-popup/unit-insert-popup.component.html
@@ -1,12 +1,12 @@
-<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Add unit!" [style]="{width: '70vw'}"
-          [baseZIndex]="10000" (onShow)="clearFormArray()">
+<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Add unit" [style]="{width: '50vw'}"
+          [baseZIndex]="10000" (onShow)="clearFormArray()" [className]="'popup-form'">
 
   <form [formGroup]="insertForm">
     <div class="input-group form-group">
       <div class="input-group-prepend">
-        <span class="input-group-text">Unit ID</span>
+        <span class="input-group-text"><i class="fas fa-list-ol"></i></span>
       </div>
-      <input type="text" formControlName="unitId" class="form-control" id="unitId" placeholder="unitId"/>
+      <input type="text" formControlName="unitId" class="form-control" id="unitId" placeholder="Unit ID"/>
       <div *ngIf="insertForm.get('unitId').invalid &&
         insertForm.get('unitId').errors &&
         (insertForm.get('unitId').dirty || insertForm.get('unitId').touched)">
@@ -18,10 +18,10 @@
     </div>
     <div class="input-group form-group">
       <div class="input-group-prepend">
-        <span class="input-group-text">Description</span>
+        <span class="input-group-text"><i class="fas fa-pen"></i></span>
       </div>
       <input type="text" formControlName="unitDescription" class="form-control" id="unitDescription"
-             placeholder="unitDescription"/>
+             placeholder="Unit description"/>
       <div *ngIf="insertForm.get('unitDescription').invalid &&
         insertForm.get('unitDescription').errors &&
         (insertForm.get('unitDescription').dirty || insertForm.get('unitDescription').touched)">
@@ -33,7 +33,7 @@
     </div>
     <div class="input-group form-group">
       <div class="input-group-prepend">
-        <span class="input-group-text">Latitude</span>
+        <span class="input-group-text"><i class="fas fa-globe"></i></span>
       </div>
       <input type="number" formControlName="lat" class="form-control" id="lat"
              placeholder="Latitude WGS-84 coordinates" step="0.0001" min="-90" max="90"/>
@@ -56,7 +56,7 @@
     </div>
     <div class="input-group form-group">
       <div class="input-group-prepend">
-        <span class="input-group-text">Longitude</span>
+        <span class="input-group-text"><i class="fas fa-globe"></i></span>
       </div>
       <input type="number" formControlName="lon" class="form-control" id="lon"
              placeholder="Longitude WGS-84 coordinates" step="0.0001" min="-180" max="180"/>
@@ -77,35 +77,37 @@
         </small>
       </div>
     </div>
+    <h3>Add sensors</h3>
     <hr>
-    <div class="input-group form-group">
+    <div class="input-group form-group popup-sensors-wrapper">
       <div formArrayName="sensors" *ngFor="let item of insertForm.get('sensors')['controls']; let i = index;">
-        <div [formGroupName]="i">
+        <div [formGroupName]="i" class="popup-sensor">
           <div class="input-group form-group">
             <div class="input-group-prepend">
-              <span class="input-group-text">Sensor ID</span>
+              <span class="input-group-text"><i class="fas fa-list-ol"></i></span>
             </div>
-            <input type="text" formControlName="sensorId" class="form-control" id="sensorId" placeholder="sensorId"/>
+            <input type="text" formControlName="sensorId" class="form-control" id="sensorId" placeholder="Sensor ID"/>
           </div>
           <div class="input-group form-group">
             <div class="input-group-prepend">
-              <span class="input-group-text">Sensor name</span>
+              <span class="input-group-text"><i class="fas fa-file-signature"></i></span>
             </div>
             <input type="text" formControlName="sensorName" class="form-control" id="sensorName"
-                   placeholder="sensorName"/>
+                   placeholder="Sensor name"/>
           </div>
           <div class="input-group form-group">
             <div class="input-group-prepend">
-              <span class="input-group-text">Sensor type</span>
+              <span class="input-group-text"><i class="fas fa-file-signature"></i></span>
             </div>
             <input type="text" formControlName="sensorType" class="form-control" id="sensorType"
-                   placeholder="sensorType"/>
+                   placeholder="Sensor type"/>
           </div>
           <div class="input-group form-group">
             <div class="input-group-prepend">
-              <span class="input-group-text">Sensor name</span>
+              <span class="input-group-text"><i class="fas fa-tint"></i></span>
             </div>
             <select formControlName="phenomenons" id="phenomenons">
+              <option [ngValue]="null" disabled>Select phenomenon</option>
               <option *ngFor="let phenomenon of phenomenons; let i = index" [value]="phenomenons[i].phenomenonId">
                 {{phenomenons[i].phenomenonName}} ( {{ phenomenons[i].unit}})
               </option>
@@ -116,13 +118,9 @@
       </div>
     </div>
   </form>
-
-
-  <p-button type="button" (click)="addSensor()" class="pr-2">Add Sensor</p-button>
-
-
   <p-footer>
-    <div class="row justify-content-end align-items-center">
+    <div class="popup-buttons-wrapper">
+      <p-button type="button" (click)="addSensor()" class="pr-2">Add sensor</p-button>
       <div>
         <p-button icon="pi pi-times" (click)="close()" label="Close" class="pr-2"></p-button>
         <p-button icon="pi pi-check" (click)="processInsertion()" type="submit" label="Save" class="pr-2"></p-button>
diff --git a/src/assets/scss/_popup-form.scss b/src/assets/scss/_popup-form.scss
index 9216d91..c4e1566 100644
--- a/src/assets/scss/_popup-form.scss
+++ b/src/assets/scss/_popup-form.scss
@@ -1,4 +1,15 @@
 .popup-form {
+
+  h3 {
+    margin-top: $grid-gutter-width / 2;
+    text-align: center;
+    font-size: 24px;
+  }
+
+  hr {
+    background: #F2F2F2;
+  }
+
   .p-dialog {
     .p-dialog-header, .p-dialog-content, .p-dialog-footer {
       background: $primary;
@@ -42,4 +53,17 @@
       background: #F2F2F2;
     }
   }
+
+  .popup-sensors-wrapper {
+    justify-content: center;
+  }
+
+  .popup-sensor {
+    margin: 0 10px;
+  }
+
+  .popup-buttons-wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
 }
