From 828f711549f26837c24c138c31fe0d0f6e4fd7bd Mon Sep 17 00:00:00 2001
From: Lucas Lara <llara@localhost>
Date: Mon, 10 Feb 2025 16:49:11 +0100
Subject: [PATCH] refs #1477 Refactor Ogboot  component for improved layout and
 styling

---
 .../ogboot-status/ogboot-status.component.css | 156 ++++++++++--------
 .../ogboot-status.component.html              |  30 ++--
 .../pxe-boot-files.component.css              |  52 +++---
 .../pxe-boot-files.component.html             |  48 +++---
 .../pxe-images/pxe-images.component.css       |  53 ++----
 .../pxe-images/pxe-images.component.html      |  54 +++---
 .../components/ogboot/pxe/pxe.component.css   |  37 ++---
 .../components/ogboot/pxe/pxe.component.html  |  34 ++--
 8 files changed, 219 insertions(+), 245 deletions(-)

diff --git a/ogWebconsole/src/app/components/ogboot/ogboot-status/ogboot-status.component.css b/ogWebconsole/src/app/components/ogboot/ogboot-status/ogboot-status.component.css
index a4c857a..a3b3ffc 100644
--- a/ogWebconsole/src/app/components/ogboot/ogboot-status/ogboot-status.component.css
+++ b/ogWebconsole/src/app/components/ogboot/ogboot-status/ogboot-status.component.css
@@ -2,95 +2,105 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 100px;
-  padding: 10px;
+  padding: 10px 10px;
+  border-bottom: 1px solid #ddd;
 }
-  
-  .disk-usage-info{
-    display: flex;
-    justify-content: start;
-    margin-top: 10px;
-  }
 
-  p {
-    margin-left: 15px;
-  }.dashboard {
-    padding: 20px;
-  }
+.header-container-title {
+  flex-grow: 1;
+  text-align: left;
+  margin-left: 1em;
+}
 
-  .disk-usage-container {
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: 20px;
-  }
+.disk-usage-info {
+  display: flex;
+  justify-content: start;
+  margin-top: 10px;
+}
 
-  .disk-usage {
-    flex: 2;
-    margin-right: 20px;
-  }
+p {
+  margin-left: 15px;
+}
 
-  .services-status {
-    flex: 1;
-  }
+.dashboard {
+  padding: 0.5rem 0.5rem 0.5rem 1rem;
+}
 
-  .services-status ul {
-    list-style-type: none;
-    padding: 0;
-  }
+.disk-usage-container {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 20px;
+}
 
-  .services-status li {
-    margin: 5px 0;
-    display: flex;
-    align-items: center;
-  }
+.disk-usage {
+  flex: 2;
+  margin-right: 20px;
+}
 
-  .status-led {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    display: inline-block;
-    margin-right: 10px;
-  }
+.services-status {
+  flex: 1;
+}
 
-  .status-led.active {
-    background-color: green;
-  }
+.services-status ul {
+  list-style-type: none;
+  padding: 0;
+}
 
-  .status-led.inactive {
-    background-color: red;
-  }
+.services-status li {
+  margin: 5px 0;
+  display: flex;
+  align-items: center;
+}
 
-  .installed-oglives {
-    margin-top: 20px;
-  }
+.status-led {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 10px;
+}
 
-  table {
-    width: 100%;
-    border-collapse: collapse;
-  }
+.status-led.active {
+  background-color: green;
+}
 
-  th, td {
-    border: 1px solid #ddd;
-    padding: 8px;
-  }
+.status-led.inactive {
+  background-color: red;
+}
 
-  th {
-    background-color: #f4f4f4;
-  }
+.installed-oglives {
+  margin-top: 20px;
+}
 
-  .button-container {
-    display: flex;
-    flex-direction: column;
-    gap: 10px; /* Espacio entre botones */
-    margin-top: 50px;
-  }
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+th {
+  background-color: #f4f4f4;
+}
+
+.button-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  /* Espacio entre botones */
+  margin-top: 50px;
+}
 
 
 
-  .btn:first-child {
-    margin-left: 0;
-  }
+.btn:first-child {
+  margin-left: 0;
+}
 
-  .btn:last-child {
-    margin-right: 0;
-  }
+.btn:last-child {
+  margin-right: 0;
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/ogboot/ogboot-status/ogboot-status.component.html b/ogWebconsole/src/app/components/ogboot/ogboot-status/ogboot-status.component.html
index a8a5ebe..1f955ed 100644
--- a/ogWebconsole/src/app/components/ogboot/ogboot-status/ogboot-status.component.html
+++ b/ogWebconsole/src/app/components/ogboot/ogboot-status/ogboot-status.component.html
@@ -1,27 +1,23 @@
 <app-loading [isLoading]="loading"></app-loading>
 
-<div class="dashboard">
-  <div class="header-container">
+<div class="header-container">
+  <button mat-icon-button color="primary" (click)="iniciarTour()">
+    <mat-icon>help</mat-icon>
+  </button>
+  <div class="header-container-title">
     <h2 joyrideStep="titleStep" text="Esta sección muestra el estado general del servidor OgBoot.">
       {{ 'ogBootServerStatus' | translate }}
     </h2>
-    <button mat-icon-button color="primary" (click)="iniciarTour()">
-      <mat-icon>help</mat-icon>
-    </button>
   </div>
+</div>
 
+<div class="dashboard">
   <div class="disk-usage-container">
     <!-- Disk Usage Section -->
     <div class="disk-usage" joyrideStep="diskUsageStep" text="{{ 'diskUsageDescription' | translate }}">
       <h3>{{ 'diskUsageTitle' | translate }}</h3>
-      <ngx-charts-pie-chart
-        [view]="view"
-        [scheme]="colorScheme"
-        [results]="diskUsageChartData"
-        [gradient]="gradient"
-        [doughnut]="isDoughnut"
-        [labels]="showLabels"
-        [legend]="showLegend">
+      <ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="diskUsageChartData" [gradient]="gradient"
+        [doughnut]="isDoughnut" [labels]="showLabels" [legend]="showLegend">
       </ngx-charts-pie-chart>
       <div class="disk-usage-info">
         <p>{{ 'totalLabel' | translate }}: {{ formatBytes(diskUsage.total) }}</p>
@@ -36,10 +32,8 @@
       <h3>{{ 'servicesTitle' | translate }}</h3>
       <ul>
         <li *ngFor="let service of getServices()">
-          <span
-            class="status-led"
-            [ngClass]="{ 'active': service.status === 'active', 'inactive': service.status !== 'active' }"
-          ></span>
+          <span class="status-led"
+            [ngClass]="{ 'active': service.status === 'active', 'inactive': service.status !== 'active' }"></span>
           {{ service.name }}: {{ service.status | translate }}
         </li>
       </ul>
@@ -68,4 +62,4 @@
       </tbody>
     </table>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.css b/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.css
index 71b0af9..d2ea8a8 100644
--- a/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.css
+++ b/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.css
@@ -1,31 +1,33 @@
-.title {
-  font-size: 24px;
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 10px;
+  border-bottom: 1px solid #ddd;
 }
 
-.divider {
-  margin: 20px 0;
+.header-container-title {
+  flex-grow: 1;
+  text-align: left;
+  margin-left: 1em;
 }
 
-table {
-  width: 100%;
-  margin-top: 50px;
-}
-
-.search-container  {
+.search-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  padding: 0 5px;
+  margin: 1.5rem 0rem 0rem 0rem;
   box-sizing: border-box;
 }
 
 .global-selectors {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 0 5px;
+  justify-content: start;
+  padding-left: 5px;
+  gap: 1rem;
+  margin-bottom: 1rem;
 }
 
 .selected-global {
@@ -42,25 +44,12 @@ table {
   padding: 5px;
 }
 
-.save-button{
+.save-button {
   justify-self: end;
 }
 
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px;
-}
-
 .mat-elevation-z8 {
-  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
-}
-
-.paginator-container {
-  display: flex;
-  justify-content: end;
-  margin-bottom: 30px;
+  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
 }
 
 .example-headers-align .mat-expansion-panel-header-description {
@@ -68,7 +57,7 @@ table {
   align-items: center;
 }
 
-.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
+.example-headers-align .mat-mdc-form-field+.mat-mdc-form-field {
   margin-left: 8px;
 }
 
@@ -79,5 +68,4 @@ table {
 
 .example-button-row .mat-mdc-button-base {
   margin: 8px 8px 8px 0;
-}
-
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.html b/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.html
index c8f7ed4..34d1f13 100644
--- a/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.html
+++ b/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.html
@@ -1,27 +1,28 @@
 <div class="header-container">
-  <h2 class="title" joyrideStep="titleStep" text="{{ 'advancedNetbootDescription' | translate }}">
-    {{ 'advancedNetbootTitle' | translate }}
-  </h2>
   <button mat-icon-button color="primary" (click)="iniciarTour()">
     <mat-icon>help</mat-icon>
   </button>
-</div>
-
-<div [formGroup]="taskForm" class="search-container">
-  <div [formGroup]="taskForm" class="search-container">
-    <mat-form-field appearance="fill" class="search-boolean" joyrideStep="selectClassStep" text="{{ 'selectClassDescription' | translate }}">
-      <mat-label>{{ 'selectClassLabel' | translate }}</mat-label>
-      <mat-select (selectionChange)="loadChildUnits($event)">
-        <mat-option *ngFor="let unit of units" [value]="unit">{{ unit.name }}</mat-option>
-      </mat-select>
-    </mat-form-field>
+  <div class="header-container-title">
+    <h2 joyrideStep="titleStep" text="{{ 'advancedNetbootDescription' | translate }}">
+      {{ 'advancedNetbootTitle' | translate }}
+    </h2>
   </div>
 </div>
 
-<mat-divider class="divider"></mat-divider>
+<div [formGroup]="taskForm" class="search-container">
+  <mat-form-field appearance="fill" class="search-boolean" joyrideStep="selectClassStep"
+    text="{{ 'selectClassDescription' | translate }}">
+    <mat-label>{{ 'selectClassLabel' | translate }}</mat-label>
+    <mat-select (selectionChange)="loadChildUnits($event)">
+      <mat-option *ngFor="let unit of units" [value]="unit">{{ unit.name }}</mat-option>
+    </mat-select>
+  </mat-form-field>
+</div>
+
 
 <div class="global-selectors">
-  <mat-form-field appearance="fill" class="selected-global" joyrideStep="applyToAllStep" text="{{ 'applyToAllDescription' | translate }}">
+  <mat-form-field appearance="fill" class="selected-global" joyrideStep="applyToAllStep"
+    text="{{ 'applyToAllDescription' | translate }}">
     <mat-label>{{ 'applyToAllLabel' | translate }}</mat-label>
     <mat-select [(value)]="globalOgLive" (selectionChange)="applyToAll()">
       <mat-option *ngFor="let option of ogLiveOptions" [value]="option['@id']">
@@ -30,18 +31,14 @@
     </mat-select>
   </mat-form-field>
 
-  <button
-    mat-flat-button
-    color="primary"
-    [disabled]="units.length === 0"
-    (click)="saveOgLiveTemplates()"
-    joyrideStep="saveButtonStep"
-    text="{{ 'saveButtonDescription' | translate }}">
+  <button mat-flat-button color="primary" [disabled]="units.length === 0" (click)="saveOgLiveTemplates()"
+    joyrideStep="saveButtonStep" text="{{ 'saveButtonDescription' | translate }}">
     {{ 'saveButtonLabel' | translate }}
   </button>
 </div>
 
-<mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep" text="{{ 'tableDescription' | translate }}">
+<mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
+  text="{{ 'tableDescription' | translate }}">
   <ng-container matColumnDef="id">
     <mat-header-cell *matHeaderCellDef>{{ 'idColumnHeader' | translate }}</mat-header-cell>
     <mat-cell *matCellDef="let element"> {{ element.id }} </mat-cell>
@@ -65,7 +62,8 @@
   <ng-container matColumnDef="ogLive">
     <mat-header-cell *matHeaderCellDef>{{ 'templateColumnHeader' | translate }}</mat-header-cell>
     <mat-cell *matCellDef="let client">
-      <mat-form-field appearance="fill" joyrideStep="selectTemplateStep" text="{{ 'selectTemplateDescription' | translate }}">
+      <mat-form-field appearance="fill" joyrideStep="selectTemplateStep"
+        text="{{ 'selectTemplateDescription' | translate }}">
         <mat-label>{{ 'selectTemplateLabel' | translate }}</mat-label>
         <mat-select [(ngModel)]="client.ogLive" [name]="'ogLive' + client.id">
           <mat-option [value]="null">{{ 'noTemplateOption' | translate }}</mat-option>
@@ -79,4 +77,4 @@
 
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
   <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-</mat-table>
+</mat-table>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/ogboot/pxe-images/pxe-images.component.css b/ogWebconsole/src/app/components/ogboot/pxe-images/pxe-images.component.css
index 7d92813..a9062b9 100644
--- a/ogWebconsole/src/app/components/ogboot/pxe-images/pxe-images.component.css
+++ b/ogWebconsole/src/app/components/ogboot/pxe-images/pxe-images.component.css
@@ -1,28 +1,32 @@
-.title {
-    font-size: 24px;
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 10px;
+  border-bottom: 1px solid #ddd;
+}
+
+.header-container-title {
+  flex-grow: 1;
+  text-align: left;
+  margin-left: 1em;
 }
 
 .images-button-row {
-    display: flex;
-    justify-content: flex-start;
-    margin-top: 16px;
-}
-
-.divider {
-    margin: 20px 0;
+  display: flex;
+  gap: 15px;
 }
 
 table {
   width: 100%;
-  margin-top: 50px;
 }
 
-.search-container  {
+.search-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  padding: 0 5px;
+  margin: 1.5rem 0rem 1.5rem 0rem;
   box-sizing: border-box;
 }
 
@@ -36,33 +40,12 @@ table {
   padding: 5px;
 }
 
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 100px;
-  padding: 10px;
-}
-
 .mat-elevation-z8 {
-  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
+  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
 }
 
 .paginator-container {
   display: flex;
   justify-content: end;
   margin-bottom: 30px;
-}
-
-.images-button-row {
-  display: flex;
-  justify-content: flex-start;
-  margin-top: 16px;
-  gap: 10px;
-}
-
-mat-spinner {
-  margin: 0 auto;
-  align-self: center;
-}
-
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/ogboot/pxe-images/pxe-images.component.html b/ogWebconsole/src/app/components/ogboot/pxe-images/pxe-images.component.html
index fffcbe4..f5d5ad2 100644
--- a/ogWebconsole/src/app/components/ogboot/pxe-images/pxe-images.component.html
+++ b/ogWebconsole/src/app/components/ogboot/pxe-images/pxe-images.component.html
@@ -2,39 +2,46 @@
   <button mat-icon-button color="primary" (click)="iniciarTour()">
     <mat-icon>help</mat-icon>
   </button>
-  <h2 class="title" joyrideStep="titleStep" [text]="'adminImagesDescription' | translate">
-    {{ 'adminImagesTitle' | translate }}
-  </h2>
+  <div class="header-container-title">
+    <h2 joyrideStep="titleStep" [text]="'adminImagesDescription' | translate">
+      {{ 'adminImagesTitle' | translate }}
+    </h2>
+  </div>
   <div class="images-button-row">
     <button mat-flat-button color="accent" (click)="openSubnetInfoDialog()">{{ 'viewInfoButton' | translate }}</button>
-    <button mat-flat-button color="primary" (click)="addImage()" joyrideStep="addImageStep" [text]="'addImageButtonDescription' | translate">
+    <button mat-flat-button color="primary" (click)="addImage()" joyrideStep="addImageStep"
+      [text]="'addImageButtonDescription' | translate">
       {{ 'addImageButton' | translate }}
     </button>
   </div>
 </div>
 
-<mat-divider class="divider"></mat-divider>
-
 <div class="search-container">
-  <mat-form-field appearance="fill" class="search-string" joyrideStep="searchNameStep" [text]="'searchNameDescription' | translate">
+  <mat-form-field appearance="fill" class="search-string" joyrideStep="searchNameStep"
+    [text]="'searchNameDescription' | translate">
     <mat-label>{{ 'searchLabel' | translate }}</mat-label>
-    <input matInput [placeholder]="'searchPlaceholder' | translate" [(ngModel)]="filters['name']" (keyup.enter)="search()">
+    <input matInput [placeholder]="'searchPlaceholder' | translate" [(ngModel)]="filters['name']"
+      (keyup.enter)="search()">
     <mat-icon matSuffix>search</mat-icon>
     <mat-hint>{{ 'searchHint' | translate }}</mat-hint>
   </mat-form-field>
 
-  <mat-form-field appearance="fill" class="search-boolean" joyrideStep="searchDefaultImageStep" [text]="'searchDefaultDescription' | translate">
+  <mat-form-field appearance="fill" class="search-boolean" joyrideStep="searchDefaultImageStep"
+    [text]="'searchDefaultDescription' | translate">
     <mat-label>{{ 'searchDefaultLabel' | translate }}</mat-label>
-    <mat-select [(ngModel)]="filters['isDefault']" (selectionChange)="search()" [placeholder]="'selectOptionPlaceholder' | translate">
+    <mat-select [(ngModel)]="filters['isDefault']" (selectionChange)="search()"
+      [placeholder]="'selectOptionPlaceholder' | translate">
       <mat-option [value]="''">{{ 'allOption' | translate }}</mat-option>
       <mat-option [value]="true">{{ 'yesOption' | translate }}</mat-option>
       <mat-option [value]="false">{{ 'noOption' | translate }}</mat-option>
     </mat-select>
   </mat-form-field>
 
-  <mat-form-field appearance="fill" class="search-boolean" joyrideStep="searchInstalledStep" [text]="'searchInstalledDescription' | translate">
+  <mat-form-field appearance="fill" class="search-boolean" joyrideStep="searchInstalledStep"
+    [text]="'searchInstalledDescription' | translate">
     <mat-label>{{ 'searchInstalledLabel' | translate }}</mat-label>
-    <mat-select [(ngModel)]="filters['installed']" (selectionChange)="search()" [placeholder]="'selectOptionPlaceholder' | translate">
+    <mat-select [(ngModel)]="filters['installed']" (selectionChange)="search()"
+      [placeholder]="'selectOptionPlaceholder' | translate">
       <mat-option [value]="''">{{ 'allOption' | translate }}</mat-option>
       <mat-option [value]="true">{{ 'yesOption' | translate }}</mat-option>
       <mat-option [value]="false">{{ 'noOption' | translate }}</mat-option>
@@ -43,7 +50,8 @@
 </div>
 
 <mat-spinner *ngIf="loading"></mat-spinner>
-<table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep" [text]="'tableDescription' | translate">
+<table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
+  [text]="'tableDescription' | translate">
   <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
     <th mat-header-cell *matHeaderCellDef>{{ column.header }}</th>
     <td mat-cell *matCellDef="let image">
@@ -66,7 +74,7 @@
 
       <ng-container *ngIf="column.columnDef === 'name'">
         <span matTooltip="{{ image.name }}">
-          {{ image.name  }}
+          {{ image.name }}
         </span>
       </ng-container>
 
@@ -76,7 +84,8 @@
         </mat-chip>
       </ng-container>
 
-      <ng-container *ngIf="column.columnDef !== 'isDefault' && column.columnDef !== 'installed' && column.columnDef !== 'downloadUrl' && column.columnDef !== 'status' && column.columnDef !== 'name'">
+      <ng-container
+        *ngIf="column.columnDef !== 'isDefault' && column.columnDef !== 'installed' && column.columnDef !== 'downloadUrl' && column.columnDef !== 'status' && column.columnDef !== 'name'">
         {{ column.cell(image) }}
       </ng-container>
     </td>
@@ -84,7 +93,8 @@
 
   <ng-container matColumnDef="actions">
     <th mat-header-cell *matHeaderCellDef style="text-align: center;">{{ 'actionsColumnHeader' | translate }}</th>
-    <td mat-cell *matCellDef="let image" style="text-align: center;" joyrideStep="actionsStep" [text]="'actionsDescription' | translate">
+    <td mat-cell *matCellDef="let image" style="text-align: center;" joyrideStep="actionsStep"
+      [text]="'actionsDescription' | translate">
       <button mat-icon-button color="info" (click)="showOgLive($event, image)">
         <mat-icon>{{ 'viewIcon' | translate }}</mat-icon>
       </button>
@@ -98,7 +108,8 @@
         <mat-icon>menu</mat-icon>
       </button>
       <mat-menu #menu="matMenu">
-        <button mat-menu-item [disabled]="image.installed" (click)="toggleAction(image, 'install')">{{ 'installOption' | translate }}</button>
+        <button mat-menu-item [disabled]="image.installed" (click)="toggleAction(image, 'install')">{{ 'installOption' |
+          translate }}</button>
         <button mat-menu-item [disabled]="!image.installed" (click)="toggleAction(image, 'uninstall')">
           {{ 'uninstallOption' | translate }}
         </button>
@@ -114,10 +125,7 @@
 </table>
 
 <div class="paginator-container" joyrideStep="paginationStep" [text]="'paginationDescription' | translate">
-  <mat-paginator [length]="length"
-                 [pageSize]="itemsPerPage"
-                 [pageIndex]="page"
-                 [pageSizeOptions]="pageSizeOptions"
-                 (page)="onPageChange($event)">
+  <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
+    (page)="onPageChange($event)">
   </mat-paginator>
-</div>
+</div>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.css b/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.css
index b478ce5..1c943ca 100644
--- a/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.css
+++ b/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.css
@@ -1,22 +1,13 @@
-.title {
-  font-size: 24px;
-}
-
-.divider {
-  margin: 20px 0;
-}
-
 table {
   width: 100%;
-  margin-top: 50px;
 }
 
-.search-container  {
+.search-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  padding: 0 5px;
+  margin: 1.5rem 0rem 1.5rem 0rem;
   box-sizing: border-box;
 }
 
@@ -34,29 +25,27 @@ table {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 100px;
-  padding: 10px;
+  padding: 10px 10px;
+  border-bottom: 1px solid #ddd;
+}
+
+.header-container-title {
+  flex-grow: 1;
+  text-align: left;
+  margin-left: 1em;
 }
 
 .mat-elevation-z8 {
-  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
+  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
 }
 
 .template-button-row {
   display: flex;
-  justify-content: flex-start;
-  margin-top: 16px;
-  gap: 10px;
-}
-
-mat-spinner {
-  margin: 0 auto;
-  align-self: center;
+  gap: 15px;
 }
 
 .paginator-container {
   display: flex;
   justify-content: end;
   margin-bottom: 30px;
-}
-
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.html b/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.html
index 303362e..b01e065 100644
--- a/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.html
+++ b/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.html
@@ -2,25 +2,31 @@
   <button mat-icon-button color="primary" (click)="iniciarTour()">
     <mat-icon>help</mat-icon>
   </button>
-  <h2 class="title" joyrideStep="titleStep" text="{{ 'adminPxeDescription' | translate }}">{{ 'adminPxeTitle' | translate }}</h2>
+  <div class="header-container-title">
+    <h2 joyrideStep="titleStep" text="{{ 'adminPxeDescription' | translate }}">{{ 'adminPxeTitle' |
+      translate }}</h2>
+  </div>
   <div class="template-button-row">
     <button mat-flat-button color="accent" (click)="openInfoDialog()">{{ 'viewInfoButton' | translate }}</button>
-    <button mat-flat-button color="primary" (click)="addPxeTemplate()" joyrideStep="addTemplateStep" text="{{ 'addTemplateButtonDescription' | translate }}">{{ 'addTemplateButton' | translate }}</button>
+    <button mat-flat-button color="primary" (click)="addPxeTemplate()" joyrideStep="addTemplateStep"
+      text="{{ 'addTemplateButtonDescription' | translate }}">{{ 'addTemplateButton' | translate }}</button>
   </div>
 </div>
 
-<mat-divider class="divider"></mat-divider>
-
 <div class="search-container">
-  <mat-form-field appearance="fill" class="search-string" joyrideStep="searchNameStep" text="{{ 'searchNameDescription' | translate }}">
+  <mat-form-field appearance="fill" class="search-string" joyrideStep="searchNameStep"
+    text="{{ 'searchNameDescription' | translate }}">
     <mat-label>{{ 'searchLabel' | translate }}</mat-label>
-    <input matInput placeholder="{{ 'searchPlaceholder' | translate }}" [(ngModel)]="filters['name']" (keyup.enter)="search()">
+    <input matInput placeholder="{{ 'searchPlaceholder' | translate }}" [(ngModel)]="filters['name']"
+      (keyup.enter)="search()">
     <mat-icon matSuffix>search</mat-icon>
     <mat-hint>{{ 'searchHint' | translate }}</mat-hint>
   </mat-form-field>
-  <mat-form-field appearance="fill" class="search-boolean" joyrideStep="searchSyncStep" text="{{ 'searchSyncDescription' | translate }}">
+  <mat-form-field appearance="fill" class="search-boolean" joyrideStep="searchSyncStep"
+    text="{{ 'searchSyncDescription' | translate }}">
     <mat-label>{{ 'createdInOgbootLabel' | translate }}</mat-label>
-    <mat-select [(ngModel)]="filters['synchronized']" (selectionChange)="search()" placeholder="{{ 'selectOptionPlaceholder' | translate }}">
+    <mat-select [(ngModel)]="filters['synchronized']" (selectionChange)="search()"
+      placeholder="{{ 'selectOptionPlaceholder' | translate }}">
       <mat-option [value]="''">{{ 'allOption' | translate }}</mat-option>
       <mat-option [value]="true">{{ 'yesOption' | translate }}</mat-option>
       <mat-option [value]="false">{{ 'noOption' | translate }}</mat-option>
@@ -29,7 +35,8 @@
 </div>
 
 <mat-spinner *ngIf="loading"></mat-spinner>
-<table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep" text="{{ 'tableDescription' | translate }}">
+<table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
+  text="{{ 'tableDescription' | translate }}">
   <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
     <th mat-header-cell *matHeaderCellDef>{{ column.header }}</th>
     <td mat-cell *matCellDef="let image">
@@ -64,10 +71,7 @@
 </table>
 
 <div class="paginator-container" joyrideStep="paginationStep" text="{{ 'paginationDescription' | translate }}">
-  <mat-paginator [length]="length"
-                 [pageSize]="itemsPerPage"
-                 [pageIndex]="page"
-                 [pageSizeOptions]="pageSizeOptions"
-                 (page)="onPageChange($event)">
+  <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
+    (page)="onPageChange($event)">
   </mat-paginator>
-</div>
+</div>
\ No newline at end of file