Replacing icons with https://ionic.io/ionicons at multiple places

#587

src/frontend/app/app.module.ts

@@ -157,6 +157,7 @@ import {
   ionVideocamOutline,
   ionVolumeMediumOutline,
   ionVolumeMuteOutline,
+  ionWarningOutline,
 } from '@ng-icons/ionicons';
 import {SortingMethodIconComponent} from './ui/sorting-method-icon/sorting-method-icon.component';
 
@@ -216,7 +217,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
       ionInformationOutline, ionContractOutline, ionExpandOutline, ionCloseOutline,
       ionTimerOutline,
       ionPlayOutline, ionPauseOutline, ionVolumeMediumOutline, ionVolumeMuteOutline,
-      ionCameraOutline
+      ionCameraOutline, ionWarningOutline
     }),
     ClipboardModule,
     TooltipModule.forRoot(),

src/frontend/app/ui/faces/face/face.component.css

@@ -40,11 +40,16 @@ a {
 }
 
 .no-image {
-  position: absolute;
-  color: #7f7f7f;
-  font-size: 80px;
-  top: calc(50% - 40px);
-  left: calc(50% - 40px);
+  display: block;
+  color: var(--bs-secondary-color);
+  font-size: 100px;
+  top: calc(50% - 20px);
+  left: calc(50%);
+  transform: translate(-50%, -50%);
+  position: relative;
+}
+.no-image ::ng-deep svg {
+  --ng-icon__stroke-width: 32;
 }
 
 .photo {

src/frontend/app/ui/faces/face/face.component.html

@@ -7,12 +7,11 @@
        [style.height.px]="size">
 
     <div class="photo"
-         *ngIf="thumbnail && thumbnail.Available"
+         *ngIf="thumbnail && thumbnail.Available && false"
          [style.background-image]="getSanitizedThUrl()"></div>
 
-    <span *ngIf="!thumbnail || !thumbnail.Available" class="oi oi-person no-image"
-          aria-hidden="true">
-    </span>
+    <ng-icon *ngIf="!thumbnail || !thumbnail.Available || true"
+             class="no-image" name="ionPersonOutline"></ng-icon>
   </div>
 
 

src/frontend/app/ui/gallery/grid/photo/loading/loading.photo.grid.gallery.component.css

@@ -6,12 +6,13 @@
   font-size: 50px;
 }
 
-.static span {
+.static ng-icon {
   top: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   left: 50%;
   display: table;
+  position: relative;
 }
 
 .sk-cube-grid {
@@ -34,6 +35,7 @@
 .sk-cube-grid.animate .sk-cube1 {
   -webkit-animation-delay: 0.4s;
   animation-delay: 0.4s;
+  border-top-left-radius: var(--bs-border-radius);
 }
 
 .sk-cube-grid.animate .sk-cube2 {
@@ -44,6 +46,7 @@
 .sk-cube-grid.animate .sk-cube3 {
   -webkit-animation-delay: 0.8s;
   animation-delay: 0.8s;
+  border-top-right-radius: var(--bs-border-radius);
 }
 
 .sk-cube-grid.animate .sk-cube4 {
@@ -59,6 +62,7 @@
 .sk-cube-grid.animate .sk-cube6 {
   -webkit-animation-delay: 0.6s;
   animation-delay: 0.6s;
+  border-bottom-left-radius: var(--bs-border-radius);
 }
 
 .sk-cube-grid.animate .sk-cube7 {
@@ -74,6 +78,7 @@
 .sk-cube-grid.animate .sk-cube9 {
   -webkit-animation-delay: 0.4s;
   animation-delay: 0.4s;
+  border-bottom-right-radius: var(--bs-border-radius);
 }
 
 @-webkit-keyframes sk-cubeGridScaleDelay {

src/frontend/app/ui/gallery/grid/photo/loading/loading.photo.grid.gallery.component.html

@@ -1,7 +1,5 @@
 <div class="static" *ngIf="animate == false">
-    <span class="oi"
-          [ngClass]="error ? 'oi-warning' :  'oi-image'" aria-hidden="true">
-    </span>
+  <ng-icon [name]="error ? 'ionWarningOutline' : 'ionImageOutline'"></ng-icon>
 </div>
 <div class="sk-cube-grid animate" *ngIf="animate == true">
   <div class="sk-cube sk-cube1"></div>

src/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.css

@@ -42,3 +42,7 @@ app-info-panel {
   -webkit-transition: all 0.3s ease-in-out;
 }
 
+
+ng-icon.h2 ::ng-deep svg {
+  vertical-align: bottom;
+}

src/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.html

@@ -18,7 +18,7 @@
     <div class="container h-100 flex-column" *ngIf="videoSourceError && activePhoto">
       <div class="row justify-content-center align-items-center h-100">
         <div class="col-md-8 text-white text-center">
-          <span class="oi oi-warning h2 me-2"></span><span class="h2" i18n>Error during loading the video.</span>
+          <ng-icon name="ionWarningOutline" class="h2 me-2 align-bottom"></ng-icon><span class="h2" i18n>Error during loading the video.</span>
           <br/>
           <ng-container *ngIf="activePhoto.gridMedia.isVideoTranscodingNeeded()" i18n>
             Most likely the video is not transcoded.

src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css

@@ -73,7 +73,11 @@
   opacity: 1.0;
 }
 
-::ng-deep .marker-svg-small .marker-svg-wrapper{
+::ng-deep .leaflet-container a.leaflet-popup-close-button span{
+  font-size: x-large;
+}
+
+::ng-deep .marker-svg-small .marker-svg-wrapper {
   width: 30px;
   height: 30px;
   transform: scale(0.5);
@@ -118,13 +122,17 @@
 
 ::ng-deep .lightbox-map-gallery-component-preview-loading {
   background-color: #bbbbbb;
-  color: #7f7f7f;
-  font-size: 50px;
+  color: var(--bs-secondary-color-rgb);
 }
 
-::ng-deep .lightbox-map-gallery-component-preview-loading span {
-  top: calc(50% - 25px);
-  left: calc(50% - 25px);
+::ng-deep .lightbox-map-gallery-component-preview-loading svg {
+  top: calc(50%);
+  left: calc(50%);
+  opacity: 0.75; /* making sure that --bs-secondary-color used as color does not make ghosting line effect*/
+  transform: translate(-50%, -50%);
+  display: block;
+  position: relative;
+  --ng-icon__size: 250px
 }
 
 ::ng-deep .marker-cluster-small {

src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts

@@ -36,6 +36,7 @@ import {LeafletControlLayersConfig} from '@asymmetrik/ngx-leaflet';
 import {ThemeService} from '../../../../model/theme.service';
 import {Subscription} from 'rxjs';
 import {MarkerFactory} from '../MarkerFactory';
+import {ionImageOutline, ionWarningOutline} from '@ng-icons/ionicons';
 
 
 @Component({
@@ -371,9 +372,7 @@ export class GalleryMapLightboxComponent implements OnChanges, OnDestroy {
         } else {
           const noPhotoPopup = `<div class="lightbox-map-gallery-component-preview-loading"
                                  style="width: ${width}px; height: ${height}px">
-                  <span class="oi ${photoTh.Error ? 'oi-warning' : 'oi-image'}"
-                        aria-hidden="true">
-                  </span>
+                  ${photoTh.Error ? ionWarningOutline : ionImageOutline}
                   </div>`;
 
           mkr.bindPopup(noPhotoPopup, {minWidth: width});