diff --git a/ogWebconsole/src/app/app.component.ts b/ogWebconsole/src/app/app.component.ts index d681b66..c39354c 100644 --- a/ogWebconsole/src/app/app.component.ts +++ b/ogWebconsole/src/app/app.component.ts @@ -13,6 +13,6 @@ export class AppComponent { this.translateService.use(savedLanguage); } ngOnInit() { - sessionStorage.setItem('language', 'es'); + // Language is already handled in constructor } } diff --git a/ogWebconsole/src/app/layout/header/header.component.css b/ogWebconsole/src/app/layout/header/header.component.css index e186ef8..20b7aec 100644 --- a/ogWebconsole/src/app/layout/header/header.component.css +++ b/ogWebconsole/src/app/layout/header/header.component.css @@ -171,3 +171,33 @@ mat-toolbar button[mat-icon-button]:hover { right: 8px; } } + +.language-button { + display: flex !important; + align-items: center; + gap: 8px; + border: 1px solid #5f5f5f !important; + border-radius: 6px !important; + padding: 0 12px !important; + color: #495057 !important; + background: #fafafa !important; + transition: all 0.2s ease-in-out !important; + font-weight: 500 !important; + height: 40px !important; +} + +.language-button:hover { + background-color: #f8f9fa !important; + border-color: #adb5bd !important; +} + +.language-button mat-icon { + font-size: 20px; + width: 20px; + height: 20px; + margin: 0 !important; +} + +.language-button .mat-icon:last-child { + margin-left: -4px !important; +} diff --git a/ogWebconsole/src/app/layout/header/header.component.html b/ogWebconsole/src/app/layout/header/header.component.html index 3cef5db..83805e2 100644 --- a/ogWebconsole/src/app/layout/header/header.component.html +++ b/ogWebconsole/src/app/layout/header/header.component.html @@ -8,67 +8,96 @@ matTooltipShowDelay="1000"> - - - -
- - - - - download - {{ 'downloadAgent' | translate }} - - - - - - -
+ }