refs #1972. General styles changed. New 2025

ogWebconsole/src/app/layout/header/header.component.css

@@ -2,12 +2,8 @@ mat-toolbar {
   /*height: 7vh;*/
   min-height: 65px;
   min-width: 375px;
-  background-color: #3f51b5;
-  color: white;
-}
-
-.trace-button .mat-icon {
-  color: #ffffff;
+  background-color: #e2e8f0;
+  color: black;
 }
 
 .navbar-actions-row {
@@ -51,6 +47,10 @@ mat-toolbar {
   display: none;
 }
 
+.trace-button {
+  color: #3f51b5;
+}
+
 @media (min-width: 1500px) {
   .hide-on-small {
     display: inline;
@@ -80,4 +80,4 @@ mat-toolbar {
   .smallScreenMenubutton {
     margin-right: 2vh;
   }
-}
+}

ogWebconsole/src/app/layout/header/header.component.html

@@ -1,7 +1,6 @@
 <mat-toolbar>
   <span class="navbar-title hide-on-small" matTooltip="Consola web de administración de Opengnsys"
     matTooltipShowDelay="1000">
-    Opengnsys webconsole
   </span>
 
   <button mat-icon-button (click)="onToggleSidebar()" matTooltip="Abrir o cerrar la barra lateral"
@@ -10,8 +9,8 @@
   </button>
 
   <div class="navbar-actions-row" *ngIf="!isSmallScreen">
-    <button class="trace-button" routerLink="/commands-logs" mat-button>
-      <mat-icon>notifications</mat-icon>
+    <button routerLink="/commands-logs" mat-button>
+      <mat-icon class="trace-button" >notifications</mat-icon>
     </button>
 
     <div class="navbar-buttons-row">
@@ -73,4 +72,4 @@
       {{ 'labelEnvVars' | translate }}
     </button>
   </mat-menu>
-</mat-toolbar>
+</mat-toolbar>

ogWebconsole/src/app/layout/main-layout/main-layout.component.css

@@ -1,9 +1,30 @@
+/* styles.css o en el componente */
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
 .container {
-  height: calc(100vh - 7vh);
-  min-width: 375px;
+  height: 100%;
 }
 
 .sidebar {
-  width: 15vw;
-  min-width: 250px;
+  width: 250px;
+}
+
+.custom-sidebar {
+  background-color: #1e293b;
+  color: white;
+}
+
+.custom-sidebar .mat-list-item {
+  color: white;
+}
+
+.mat-icon {
+  color: white;
+}
+
+.mat-list-item:hover {
+  background-color: #2a2a40;
 }

ogWebconsole/src/app/layout/main-layout/main-layout.component.html

@@ -1,12 +1,11 @@
-<app-header (toggleSidebar)="toggleSidebar()"></app-header>
-
 <mat-drawer-container class="container" autosize>
-  <mat-drawer class="sidebar" [mode]="sidebarMode" [opened]="isSidebarVisible" (close)="isSidebarVisible = false">
+  <mat-drawer class="sidebar custom-sidebar" [mode]="sidebarMode" [opened]="isSidebarVisible" (close)="isSidebarVisible = false">
     <app-sidebar [isVisible]="isSidebarVisible" [sidebarMode]="sidebarMode" (closeSidebar)="isSidebarVisible = false">
     </app-sidebar>
   </mat-drawer>
 
   <mat-drawer-content class="content">
+    <app-header (toggleSidebar)="toggleSidebar()"></app-header>
     <router-outlet></router-outlet>
   </mat-drawer-content>
-</mat-drawer-container>
+</mat-drawer-container>

ogWebconsole/src/app/layout/sidebar/sidebar.component.css

@@ -1,7 +1,7 @@
 mat-nav-list {
-  width: auto; 
-  margin-right: 5px; 
-  overflow-x: hidden; 
+  width: auto;
+  margin-right: 5px;
+  overflow-x: hidden;
 }
 
 mat-list-item {
@@ -23,18 +23,42 @@ mat-icon {
 
 .user-logged {
   align-items: center;
-  height: 70px;
   gap: 2rem;
   padding: 1rem;
   font-size: medium;
 }
 
-.sidebar-content {
+.user-logged span {
+  color: #f1f5f9;
+}
+
+.custom-sidebar {
   display: flex;
   flex-direction: column;
   height: 100%;
+  background-color: #1e1e2f;
+  color: white;
 }
 
+
+.sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.sidebar-content span {
+  color: #f1f5f9;
+}
+
+button {
+  color: white;
+}
+
+mat-icon {
+  margin-right: 0.5rem;
+}
+
+
 .admin-link {
   margin-top: auto;
 }
@@ -61,5 +85,35 @@ mat-icon {
 .disabled {
   pointer-events: none;
   cursor: not-allowed;
-  opacity: 0.5;
-}
+}
+
+.user-info {
+  justify-content: center;
+  padding: 12px 0 12px;
+}
+
+.user-info-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.user-logo {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+  border-radius: 8px;
+}
+
+.user-logged {
+  color: white;
+  font-weight: 500;
+  text-align: center;
+}
+
+
+ .white-divider {
+  border-top-color: rgba(255, 255, 255, 0.2) !important;
+  margin: 8px 0;
+}

ogWebconsole/src/app/layout/sidebar/sidebar.component.html

@@ -1,11 +1,13 @@
-<mat-nav-list>
-  <mat-list-item disabled>
-    <span class="user-logged" matTooltipShowDelay="1000">
-      <span>{{ 'welcomeUser' | translate:{username: username} }}</span>
-    </span>
-  </mat-list-item>
-
-  <mat-divider></mat-divider>
+<mat-nav-list class="sidebar-content">
+  <div disabled class="user-info">
+    <div class="user-info-wrapper" matTooltipShowDelay="1000">
+      <img ngSrc="assets/images/logo.png" alt="Logo" class="user-logo" height="500" width="500"/>
+      <span class="user-logged">
+      {{ 'welcomeUser' | translate:{username: username} }}
+      </span>
+    </div>
+  </div>
+  <mat-divider class="white-divider"></mat-divider>
 
   <mat-list-item routerLink="/groups" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_GROUPS' | translate }}"
     matTooltipShowDelay="1000">
@@ -145,4 +147,4 @@
       <span>{{ 'menus' | translate }}</span>
     </span>
   </mat-list-item>
-</mat-nav-list>
+</mat-nav-list>