Fix colors

projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.html

@@ -13,7 +13,7 @@
             </span>
             <a href="#" title="Zoom to extent" class="btn btn-light btn-sm" (click)="handleZoomToExtent($event,itemLayer)"><i class="far fa-search-plus" aria-hidden="true"></i></a>
             <span *ngIf="firstLayer(itemLayer)"><a href="#" title="Toggle legend" class="btn btn-light btn-sm" (click)="itemLayer.legendVisible=toggleLegend($event,itemLayer.legendVisible)"><i class="far fa-chart-bar" aria-hidden="true"></i></a></span>
-            <span *ngIf="!dataLayers" class="float-right"><a href="#" title="Remove overlay" class="btn btn-light btn-sm" (click)="handleDelete($event,itemLayer)"><i class="fas fa-layer-minus" aria-hidden="true"></i></a></span>
+            <span *ngIf="!dataLayers" class="float-end"><a href="#" title="Remove overlay" class="btn btn-light btn-sm" (click)="handleDelete($event,itemLayer)"><i class="fas fa-layer-minus" aria-hidden="true"></i></a></span>
           </div>
           <div *ngIf="itemLayer.legendVisible">
             <div class="card legend">

projects/common-map/src/fm-map/components/aol/layer-values/layer-values.component.html

@@ -2,12 +2,12 @@
    <div class="cross"  *ngIf="enabled$ | async">
        <div class="pointer"></div>
        <div class="values-container border border-dark rounded p-2" *ngIf="(layerValues$ | async ) as layers">
-           <div class="lonlat pb-2 "><span class="font-weight-bold">{{lonlat$}}</span><i class="ml-2 fal fa-copy" (click)="copyToClipboard()"></i> </div>
+           <div class="lonlat pb-2 "><span class="font-weight-bold">{{lonlat$}}</span><i class="ms-2 fal fa-copy" (click)="copyToClipboard()"></i> </div>
            <ul class="value-list p-0 mb-0" *ngIf="layers.length>0 ;else no_data">
                <li class="border-top pt-1 pb-1 value" *ngFor="let layerValue of layers">
                    <div>{{layerValue.layerName}}</div>
                    <div>{{layerValue.date|date}}</div>
-                   <div><span *ngIf="layerValue.quantity"><span class="mr-1">{{layerValue.quantity}}</span> </span><span class="mr-1 font-weight-bold">{{layerValue.value}}</span><span>{{layerValue.unit}}</span></div>
+                   <div><span *ngIf="layerValue.quantity"><span class="me-1">{{layerValue.quantity}}</span> </span><span class="me-1 font-weight-bold">{{layerValue.value}}</span><span>{{layerValue.unit}}</span></div>
                </li>
            </ul>
            <ng-template #no_data>

projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.html

@@ -5,7 +5,7 @@
     <h3>{{schemeItem.name}}</h3>
     <div *ngIf="features;let features">
         <div class="cropfields">
-          <div class="row m-0 pl-3 pr-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
+          <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
           <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
         </div>
       </div>

projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.html

@@ -4,7 +4,7 @@
       <h3><i class="far fa-farm"></i>&nbsp;<span i18n>Farms</span></h3>
       <div *ngIf="features;let features">
       <div class="farms">
-        <div class="row m-0 pl-3 pr-3" *ngFor="let feature of features"[ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
+        <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features"[ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
           <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
         </div>
       </div>      

projects/common-map/src/fm-map/components/feature-list/feature-list.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="features;let features">
   <fm-back-button></fm-back-button>
-  <div class="row m-0 pl-3 pr-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
+  <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
     <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
   </div>
 </div>

projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.html

@@ -4,7 +4,7 @@
     <div class="card layers-card m-1">
       <div class="card-header">
         <span i18n>Layers</span>
-        <i class="float-right fas fa-times" (click)="close($event)"></i>
+        <i class="float-end fas fa-times" (click)="close($event)"></i>
       </div>
       <ul class="navbar-nav">
         <li class="nav-item py-0">

projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.html

@@ -1,4 +1,4 @@
-<div class="row pl-3">
+<div class="row ps-3">
   <div class="col-8 nopadding"><span i18n>Average</span>:</div>
   <div class="col-4 pull-left nopadding">{{histogram.mean| number:'1.0-2'}}</div>
   <div class="col-8 nopadding"><span i18n>Standard deviation</span>:</div>

projects/common-map/src/fm-map/components/legend/statistics-details/statistics-details.component.html

@@ -1,4 +1,4 @@
-<div class="row pl-3">
+<div class="row ps-3">
   <div class="col-8 nopadding"><span i18n>Data points</span>:</div>
   <div class="col-4 pull-left nopadding">{{statistics.populationCount}}</div>
   <div class="col-8 nopadding"><span i18n>Min</span>:</div>

projects/common-map/src/fm-map/components/map-search/map-search.component.html

@@ -7,14 +7,10 @@
   <div class="card p-2">
     <form class="form" (ngSubmit)="handleSearch($event)">
       <div class="input-group">
-        <div class="input-group-prepend">
-          <button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fal fa-bars" aria-hidden="true"></i></button>
-        </div>
+        <button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fal fa-bars" aria-hidden="true"></i></button>
         <input #searchText class="form-control" type="text" (focus)="handleFocus($event)" [ngModel]="searchTextLocal" name="searchTextLocal" (ngModelChange)="handleChange($event)" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" (selectItem)="handleSelect($event)" placeholder="Search" i18n-placeholder />
-        <div class="input-group-append">
-          <button type="submit" class="btn btn-outline-secondary" [disabled]="disabled"><i class="fal fa-search"></i></button>
-          <button type="button" class="clear btn btn-outline-secondary" [disabled]="!clearEnabled" (click)="handleClearClick($event)"><i class="fas fa-times"></i></button>
-        </div>
+        <button type="submit" class="btn btn-outline-secondary" [disabled]="disabled"><i class="fal fa-search"></i></button>
+        <button type="button" class="clear btn btn-outline-secondary" [disabled]="!clearEnabled" (click)="handleClearClick($event)"><i class="fas fa-times"></i></button>
       </div>
       <div class="options">
         <div class="form-check">

projects/common-map/src/fm-map/components/map/map.component.scss

@@ -195,7 +195,7 @@ timespan.menuVisible {
   width: 4rem;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: theme-color();
+  color: $primary;
 }
 
 .shortcut-icon > .farm-icon {

projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html

@@ -20,7 +20,7 @@
       </div>
       <div class="card menu-card">
         <ul class="p-0 mt-2">
-          <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
+          <li *ngIf="item.isEditable"><a href="#" class="ms-1 me-1" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
           <ng-container *ngIf="itemTypeService.isLayer(item)">
             <li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a   href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-plus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li>
             <li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a  href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-minus" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li>

projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html

@@ -19,7 +19,7 @@
       </div>
       <div class="card menu-card">
         <ul class="p-0 mt-2">
-          <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" ><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
+          <li *ngIf="item.isEditable"><a href="#" class="mt-1 me-1" (click)="handleOnEdit(item)" ><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
           <ng-container *ngIf="itemTypeService.isLayer(item)">
             <li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a   href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)" ><i class="fas fa-layer-olus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li>
             <li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a  href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)" ><i class="fas fa-layer-minus" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li>

projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html

@@ -36,7 +36,7 @@
       </div>
       <div class="card menu-card">
         <ul class="p-0 mt-2">
-          <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
+          <li *ngIf="item.isEditable"><a href="#" class="mt-1 me-1" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
           <ng-container *ngIf="itemTypeService.isLayer(item)">
             <li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a   href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-plus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li>
             <li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a  href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-minus" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li>

projects/common/src/fm/components/app/app.component.html

@@ -3,9 +3,9 @@
     <div class="container-fluid">
       <div class="header-logo pageonly"><router-outlet name="header-logo"></router-outlet></div> 
       <button type="button" class="btn btn-outline-secondary apponly" (click)="handleToggleMenu($event)"><i class="fal fa-bars" aria-hidden="true"></i></button>
-      <router-outlet name="menu" class="ml-4"></router-outlet>
+      <router-outlet name="menu" class="ms-4"></router-outlet>
       <div class="collapse navbar-collapse pageonly">      
-        <a class="btn btn-primary ml-auto" role="button" [routerLink]="[ startPage == null?'/map':startPage]">
+        <a class="btn btn-primary ms-auto" role="button" [routerLink]="[ startPage == null?'/map':startPage]">
           <span *ngIf="(user|async)==null" i18n>Sign in</span>
           <span *ngIf="(user|async)!=null" i18n>To app</span>
         </a>
@@ -21,7 +21,7 @@
       <div class="body">
         <div class="d-flex flex-row">
           <div class="mt-2 mb-2 flex-grow-1 logo" (click)="handleHome($event)"><router-outlet name="side-panel-logo"></router-outlet></div>
-          <div class="mt-2 mb-2 ml-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fal fa-times" aria-hidden="true"></i></button></div>
+          <div class="mt-2 mb-2 ms-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fal fa-times" aria-hidden="true"></i></button></div>
         </div>
         <div class="d-flex flex-column cards"> 
             <router-outlet name="side-panel-menu"></router-outlet>          

projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.html

@@ -4,7 +4,7 @@
       <div class="card-header  p-3 bg-primary text-white">
         <span *ngIf="uploadService.isUploading">Uploading files (<span>{{uploadService.totalProgress | number:'1.1-1'}}</span> %)</span>
         <span *ngIf="uploadService.isUploading == false">Uploaded <span>{{uploadService.files.length}}</span> files</span>
-        <span title="Cancel" class="fal fa-times float-right" (click)="uploadService.close()"></span><span title="Minimize" class="fal fa-chevron-down float-right mr-2" (click)="uploadService.toggleMinimize()" [ngClass]="{'fa-chevron-down': uploadService.isMinimized == false, 'fa-chevron-up':uploadService.isMinimized}"></span>
+        <span title="Cancel" class="fal fa-times float-end" (click)="uploadService.close()"></span><span title="Minimize" class="fal fa-chevron-down float-end me-2" (click)="uploadService.toggleMinimize()" [ngClass]="{'fa-chevron-down': uploadService.isMinimized == false, 'fa-chevron-up':uploadService.isMinimized}"></span>
       </div>
       <div [ngClass]="{'minimized': uploadService.isMinimized }">
         <div class="card-block p-3">

projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.scss

@@ -76,7 +76,7 @@ div.card-header span.fa {
   }
 
 .upload-file.busy > div > span.fa-times {
-  color: theme-color("danger");
+  color: $danger;
   width: 20px;
   display: inline-block;
   vertical-align: middle;
@@ -94,7 +94,7 @@ div.card-header span.fa {
   }
 
   .upload-file > div.errormessage {
-    color: theme-color("danger");
+    color: $danger;
     display: none;
   }
 

projects/common/src/fm/components/side-panel/side-panel.component.html

@@ -1,5 +1,5 @@
 <div class="side-panel hidden" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing,'left':left}" [ngStyle]="{'top':top}">
-  <div *ngIf="collapsable" class="arrow rounded-right p-2" (click)="handleToggleClick($event)">
+  <div *ngIf="collapsable" class="arrow rounded-end p-2" (click)="handleToggleClick($event)">
     <i class="fal fa-chevron-left" aria-hidden="true"></i>
   </div>
   <div  draggable="true" class="resizegrip" (dragstart)="handleStartGripDrag($event)" (touchstart)="handleStartGripDrag($event)" (dragend)="handleEndGripDrag()" (touchend)="handleEndGripDrag()" (drag)="handleGripDrag($event)" (touchmove)="handleGripDrag($event)">

projects/common/src/fm/components/timespan/timespan.component.html

@@ -5,7 +5,7 @@
    <div class="popover-anchor" [style.left.px] = "endPopoverLeft" [ngbPopover]="popoverContent" #popoverEnd="ngbPopover">&nbsp;</div>
    <div class="collapsed clearfix" [ngClass]="{'collapsed':collapsed}">
      <!-- <div class="clearfix">
-        <select class="form-control float-right" [value]="unitScale">
+        <select class="form-control float-end" [value]="unitScale">
             <option value="0">Millisecond</option>
             <option value="1">Second</option>
             <option value="2">Minute</option>
@@ -21,9 +21,9 @@
         <canvas #timeLine (mousedown)="handleViewPanMouseDown($event)" (touchstart)="handleViewPanMouseDown($event)" (mousemove)="handleCanvasMouseMove($event)" (mouseleave)="handleCanvasMouseLeave($event)">
         </canvas>
         <div class="control-container"  [style.margin-left.px]="marginLeft" [style.height.px]="lineHeight" >
-            <div class="leftGrip rounded-left" (mousedown)="handleLeftGripMouseDown($event)" (touchstart)="handleLeftGripMouseDown($event)"   (mouseenter)="handleLeftGripMouseEnter($event)" (mouseleave)="handleLeftGripMouseLeave($event)"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
+            <div class="leftGrip rounded-start" (mousedown)="handleLeftGripMouseDown($event)" (touchstart)="handleLeftGripMouseDown($event)"   (mouseenter)="handleLeftGripMouseEnter($event)" (mouseleave)="handleLeftGripMouseLeave($event)"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
             <div class="range" [style.width.px]="rangeWidth" (mousedown)="handleRangeGripMouseDown($event)" (touchstart)="handleRangeGripMouseDown($event)" (mouseenter)="handleRangeGripMouseEnter($event)"></div>
-            <div class="rightGrip rounded-right" (mousedown)="handleRightGripMouseDown($event)" (touchstart)="handleRightGripMouseDown($event)" (mouseenter)="handleRightGripMouseEnter($event)" (mouseleave)="handleRightGripMouseLeave($event)"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
+            <div class="rightGrip rounded-end" (mousedown)="handleRightGripMouseDown($event)" (touchstart)="handleRightGripMouseDown($event)" (mouseenter)="handleRightGripMouseEnter($event)" (mouseleave)="handleRightGripMouseLeave($event)"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
         </div>
      </div>
      <!-- <div>

src/app/app-routing.module.ts

@@ -63,7 +63,7 @@ const routes = [
     canActivate: [NavBarGuard],
     component: NotImplementedComponent
   },
-  { path: 'map', loadChildren: () => import('../../projects/common-map/src/public-api').then(m => m.AppCommonMapModule), canActivateChild: [AuthGuard],canActivate: [NavBarGuard], },
+  { path: 'map', loadChildren: () => import('../../projects/common-map/src/public-api').then(m => m.AppCommonMapModule), canActivateChild: [AuthGuard],canActivate: [FullScreenGuard], },
   { path: 'map3d', loadChildren: () => import('./map3d/map3d.module').then(m => m.Map3DModule), canActivateChild: [AuthGuard], canActivate: [FullScreenGuard] },
   {
     path: 'registerdevice/:deviceToken',

src/app/landingpage/landingpage.component.html

@@ -45,21 +45,21 @@
 </section>
 <section class="showcase">
     <div class="container-fluid p-0">
-        <div class="row no-gutters">
+        <div class="row g-0">
             <div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image:url('/images/bg-showcase-1.jpg');"><span></span></div>
             <div class="col-lg-6 my-auto order-lg-1 showcase-text">
                 <h2>Fully Responsive Design</h2>
                 <p class="lead mb-0">When you use a theme created with Bootstrap, you know that the theme will look great on any device, whether it's a phone, tablet, or desktop the page will behave responsively!</p>
             </div>
         </div>
-        <div class="row no-gutters">
+        <div class="row g-0">
             <div class="col-lg-6 text-white showcase-img" style="background-image:url('/images/bg-showcase-2.jpg');"><span></span></div>
             <div class="col-lg-6 my-auto order-lg-1 showcase-text">
                 <h2>Updated For Bootstrap 4</h2>
                 <p class="lead mb-0">Newly improved, and full of great utility classes, Bootstrap 4 is leading the way in mobile responsive web development! All of the themes are now using Bootstrap 4!</p>
             </div>
         </div>
-        <div class="row no-gutters">
+        <div class="row g-0">
             <div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image:url('/images/bg-showcase-3.jpg');"><span></span></div>
             <div class="col-lg-6 my-auto order-lg-1 showcase-text">
                 <h2>Easy to Use &amp;&nbsp;Customize</h2>

src/app/menu/menu.component.scss

@@ -1,3 +1,5 @@
+@import "~bootstrap/scss/bootstrap.scss";
+
 .menu-card {
     padding-left:7px;
     padding-right:7px;
@@ -27,7 +29,7 @@
     width: 4rem;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: theme-color();
+    color: $primary;
   }
   
   .shortcut-icon > .farm-icon {