💄 improve UI styles

src/app/app.component.html

@@ -1,4 +1,4 @@
-<h1 class="pl-2">Irrigation management application</h1>
+<h1 class="py-2 ps-5 text-dark">Irrigation management application</h1>
 <div class="map-row">
   <div class="hs-map">
     <hslayers></hslayers>
@@ -7,7 +7,15 @@
     <irrigation-info></irrigation-info>
   </div>
 </div>
-<div class="pl-2">
-  <h3>About</h3>
-  <p>blah blah blah</p>
+<div class="mt-2 px-2">
+  <h3 class="text-info">About</h3>
+  <p>As the longer periods of droughts are presumed worldwide (climate change in progress), the amount of available
+    irrigation water is crucial. If we would be able to incorporate the data from watershed (watershed terrain slopes,
+    land use, soil types, etc.) and the prediction of precipitation (weather forecast), we can predict the amount of
+    water that will flow to reservoir during drought period and during/after rain event. This would help the farmer to
+    manage the usage of remaining water amount in reservoir by altering the uptake of water for irrigation.</p>
+  <p>The system is calculating the water reservoir storage capacity based on the DEM of reservoir bottom and current
+    water level with the incorporation of water reservoir watershed parameters and precipitation forecast. The input
+    data are processed and stored in existing WebGIS server platforms (GeoServer, PostGIS).</p>
+  <p>This application was created during Agrihub INSPIRE Hackathon 2021 and Agrihub INSPIRE Hackathon 2022.</p>
 </div>

src/app/app.component.scss

@@ -1,7 +1 @@
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/mixins";
 
-h1, h2, h3 {color: navy; font-family: Arial, Helvetica, sans-serif;}
-.pl-2 {padding-left: 2em;}
-.p-2 {padding: 2em;}

src/app/irrigation/irrigation-info.component.html

@@ -1,13 +1,16 @@
 <div class="p-2" *ngIf="dataLoaded; else loading">
-  <h1>{{currentReservoirData.volume | number:'1.0-0'}}&emsp;m<sup>3</sup></h1>
-  <p class="text-secondary">volume of water in the reservoir</p>
-  <h2>{{currentReservoirData.elevation | number:'1.3-3'}}&nbsp;m MSL</h2>
-  <p class="text-secondary">water-level</p>
-  <h2>{{currentReservoirData.area | number:'1.2-2'}}&nbsp;m<sup>2</sup></h2>
-  <p class="text-secondary">water surface</p>
-  <strong>{{currentReservoirData.timestamp | date:'medium'}}</strong>
-  <p class="text-secondary">latest data</p>
+  <strong class="leader text-dark text-uppercase">Current values</strong>
+  <h1 class="text-info mt-2">{{currentReservoirData.volume | number:'1.0-0'}}&emsp;m<sup>3</sup></h1>
+  <p class="text-secondary text-uppercase pb-2">volume of water in the reservoir</p>
+  <h2 class="text-info">{{currentReservoirData.elevation | number:'1.3-3'}}&nbsp;m MSL</h2>
+  <p class="text-secondary text-uppercase pb-2">water-level</p>
+  <h2 class="text-info">{{currentReservoirData.area | number:'1.2-2'}}&nbsp;m<sup>2</sup></h2>
+  <p class="text-secondary text-uppercase pb-2">water surface</p>
+  <strong class="text-dark">{{currentReservoirData.timestamp | date:'medium'}}</strong>
+  <p class="text-secondary text-uppercase pb-2">last sensors update</p>
 </div>
 <ng-template class="p-2" #loading>
+  <div class="spinner-border spinner mx-2" role="status" aria-hidden="true">
+  </div>
   Loading...
 </ng-template>

src/app/irrigation/irrigation-info.component.ts

@@ -5,7 +5,7 @@ import {IrrigationInfoService} from './irrigation-info.service';
 @Component({
   selector: 'irrigation-info',
   templateUrl: './irrigation-info.component.html',
-  styleUrls: ['../app.component.scss'],
+  styleUrls: ['./irrigation-forecast-panel.component.scss'],
 })
 export class IrrigationInfoComponent implements OnInit {
   dataLoaded = false;

src/app/irrigation/reservoir-history-panel.component.html

@@ -2,5 +2,6 @@
   <hs-panel-header name="history" [title]="'Reservoir history'">
   </hs-panel-header>
   <div class="card-body">
+    TODO
   </div>
 </div>

src/styles.scss

@@ -1,6 +1,19 @@
 /* You can add global styles to this file, and also import other style files */
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/helpers";
+@import "bootstrap/scss/utilities/api";
+
 .hs-map {width: 75%}
 .map-row {display: flex; height: 25rem}
 .irrigation-info {}
 
-hslayers {height: 25rem !important}
+hslayers {height: 25rem !important}