fix(styles): change of south/north/history-query icon

add new files:
history-query.svg + north.svg + south.svg.

New class: oib-title-image/title-image
(the purpose of these css classes is to resize the new icons)

correct bug about oib-box

frontend/src/app/history-query/history-query-list.component.html

@@ -1,6 +1,8 @@
 <div class="oib-padded-container">
   <div class="d-flex justify-content-between">
     <div class="oib-header-container">
+      <div class="image-block">
+        <img class="title-image" src="../assets/home/history-query.svg"></div>
       <h1>
         <span translate="history-query.list"></span>
         <span class="ms-4">

frontend/src/app/history-query/history-query-list.component.scss

@@ -0,0 +1,31 @@
+@import '../../common';
+
+.image-block {
+  text-align: center;
+  color: $white;
+  border-radius: 1rem;
+  background-color: $darkGrey;
+  width: 5rem;
+  height: 4rem;
+  margin-left: 0 !important;
+}
+
+img.title-image {
+  height: 3rem;
+  padding-top: 1rem;
+}
+
+// container of the page title
+.oib-header-container {
+  display: flex;
+}
+
+.justify-content-between{
+  margin: 0;
+  margin-bottom: 1rem;
+}
+
+h1 {
+  margin-top: 0.8rem;
+  margin-left: 1rem
+}

frontend/src/app/north/north-list.component.html

@@ -1,6 +1,8 @@
 <div class="oib-padded-container">
   <div class="d-flex justify-content-between">
     <div class="oib-header-container">
+      <div class="image-block">
+        <img class="title-image" src="../assets/home/north.svg"></div>
       <h1>
         <span translate="north.list"></span>
         <span class="ms-4">

frontend/src/app/north/north-list.component.scss

@@ -0,0 +1,31 @@
+@import '../../common';
+
+.image-block {
+  text-align: center;
+  color: $white;
+  border-radius: 1rem;
+  background-color: $darkGrey;
+  width: 5rem;
+  height: 4rem;
+  margin-left: 0 !important;
+}
+
+img.title-image {
+  height: 3rem;
+  padding-top: 1rem;
+}
+
+// container of the page title
+.oib-header-container {
+  display: flex;
+}
+
+.justify-content-between{
+  margin: 0;
+  margin-bottom: 1rem;
+}
+
+h1 {
+  margin-top: 0.8rem;
+  margin-left: 1rem
+}

frontend/src/app/shared/box/box.component.html

@@ -4,7 +4,10 @@
       <ng-container *ngIf="titleTemplateRef; else stringTitle">
         <ng-container *ngTemplateOutlet="titleTemplateRef"></ng-container>
       </ng-container>
-      <ng-template #stringTitle>{{ boxTitle | translate }}</ng-template>
+      <ng-template #stringTitle>
+        <img class="oib-title-image" *ngIf="imagePath" [src]="imagePath" alt="Image" /> <!-- Affiche l'image correspondante si imagePath n'est pas vide -->
+        {{ boxTitle | translate }}
+      </ng-template>
     </div>
   </div>
   <div class="oib-box-content" #boxContent>

frontend/src/app/shared/box/box.component.ts

@@ -37,6 +37,7 @@ export class BoxTitleDirective {
 export class BoxComponent implements AfterContentInit {
   @Input() boxTitle = '';
   titleTemplateRef: TemplateRef<void> | null = null;
+  imagePath = '';
 
   @ViewChild('boxContent', { static: true }) boxContent: ElementRef<any> | undefined;
   @ContentChild(BoxTitleDirective, { static: true }) titleQuery: BoxTitleDirective | undefined;
@@ -59,12 +60,21 @@ export class BoxComponent implements AfterContentInit {
       if (tableElement) {
         contentElement.classList.add('has-table');
       }
-      if (emptyDivElements.length > 0) {
+      if (emptyDivElements.length >= 0) {
         contentElement.classList.add('has-empty-div');
       }
       if (alertWarningElement) {
         contentElement.classList.add('has-alert-warning');
       }
     }
+
+    // Assign image path based on boxTitle
+    if (this.boxTitle.includes('home.south.title')) {
+      this.imagePath = '../../assets/home/south.svg';
+    } else if (this.boxTitle.includes('home.north.title')) {
+      this.imagePath = '../../assets/home/north.svg';
+    } else if (this.boxTitle.includes('home.history-query.title')) {
+      this.imagePath = '../../assets/home/history-query.svg';
+    }
   }
 }

frontend/src/app/south/south-list.component.html

@@ -1,6 +1,8 @@
 <div class="oib-padded-container">
   <div class="d-flex justify-content-between">
     <div class="oib-header-container">
+      <div class="image-block">
+        <img class="title-image" src="../assets/home/south.svg"></div>
       <h1>
         <span translate="south.list"></span>
         <span class="ms-4">

frontend/src/app/south/south-list.component.scss

@@ -0,0 +1,31 @@
+@import '../../common';
+
+.image-block {
+  text-align: center;
+  color: $white;
+  border-radius: 1rem;
+  background-color: $darkGrey;
+  width: 5rem;
+  height: 4rem;
+  margin-left: 0 !important;
+}
+
+img.title-image {
+  height: 3rem;
+  padding-top: 1rem;
+}
+
+// container of the page title
+.oib-header-container {
+  display: flex;
+}
+
+.justify-content-between{
+  margin: 0;
+  margin-bottom: 1rem;
+}
+
+h1 {
+  margin-top: 0.8rem;
+  margin-left: 1rem
+}

frontend/src/styles.scss

@@ -15,6 +15,11 @@ $fa-font-path: '../fonts';
   --menu-height: 35px;
 }
 
+img.oib-title-image {
+  height: 1rem;
+  margin-right: 0.3rem;
+}
+
 .oib-box-btn {
   padding-bottom: 0.2rem;
 }