diff --git a/console/src/app/modules/new-header/header-button/header-button.component.html b/console/src/app/modules/new-header/header-button/header-button.component.html index 39e22c24fc..460eafe780 100644 --- a/console/src/app/modules/new-header/header-button/header-button.component.html +++ b/console/src/app/modules/new-header/header-button/header-button.component.html @@ -1,6 +1,4 @@ - - - diff --git a/console/src/app/modules/new-header/header-button/header-button.component.scss b/console/src/app/modules/new-header/header-button/header-button.component.scss index 4615d26aa0..deacc8ae86 100644 --- a/console/src/app/modules/new-header/header-button/header-button.component.scss +++ b/console/src/app/modules/new-header/header-button/header-button.component.scss @@ -10,6 +10,18 @@ cursor: pointer; } +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + @mixin header-button-theme($theme) { $foreground: map-get($theme, foreground); $is-dark-theme: map-get($theme, is-dark); @@ -22,7 +34,7 @@ border: 0; background: transparent; border-radius: 6px; - padding: 0 0.5rem; + padding: 0 0.25rem; cursor: pointer; color: map-get($foreground, text); @@ -30,25 +42,4 @@ background-color: if($is-dark-theme, #ffffff10, #00000010); } } - - .header-text { - height: 36px; - box-sizing: border-box; - display: flex; - align-items: center; - border: none; - color: map-get($foreground, text); - border-radius: 6px; - position: relative; - font-size: 14px; - padding: 0 0.75rem; - text-align: left; - background-color: transparent; - cursor: pointer; - transition: all ease 0.2s; - - &:hover { - background-color: if($is-dark-theme, #ffffff10, #00000010); - } - } } diff --git a/console/src/app/modules/new-header/header-button/header-button.component.ts b/console/src/app/modules/new-header/header-button/header-button.component.ts index b31573c065..16a933b11b 100644 --- a/console/src/app/modules/new-header/header-button/header-button.component.ts +++ b/console/src/app/modules/new-header/header-button/header-button.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; import { NgIconComponent, provideIcons } from '@ng-icons/core'; import { heroChevronUpDown } from '@ng-icons/heroicons/outline'; import { MatRippleModule } from '@angular/material/core'; @@ -12,4 +12,6 @@ import { MatRippleModule } from '@angular/material/core'; imports: [NgIconComponent, MatRippleModule], providers: [provideIcons({ heroChevronUpDown })], }) -export class HeaderButtonComponent {} +export class HeaderButtonComponent { + @Input() ariaLabel: string = ''; +} diff --git a/console/src/app/modules/new-header/header-dropdown/header-dropdown.component.scss b/console/src/app/modules/new-header/header-dropdown/header-dropdown.component.scss index 3a28987b25..5b2439bb12 100644 --- a/console/src/app/modules/new-header/header-dropdown/header-dropdown.component.scss +++ b/console/src/app/modules/new-header/header-dropdown/header-dropdown.component.scss @@ -2,8 +2,7 @@ $foreground: map-get($theme, foreground); $background: map-get($theme, background); $is-dark-theme: map-get($theme, is-dark); - - $border-radius: 1rem; + $border-radius: 0.5rem; .dropdown-content { max-height: 50vh; diff --git a/console/src/app/modules/new-header/header-dropdown/header-dropdown.component.ts b/console/src/app/modules/new-header/header-dropdown/header-dropdown.component.ts index 5f12a1660e..b6424de48e 100644 --- a/console/src/app/modules/new-header/header-dropdown/header-dropdown.component.ts +++ b/console/src/app/modules/new-header/header-dropdown/header-dropdown.component.ts @@ -91,7 +91,18 @@ export class HeaderDropdownComponent implements OnInit { overlayY: 'bottom', }, ]) - : undefined!, + : this.overlay + .position() + .flexibleConnectedTo(this.trigger.elementRef) + .withPositions([ + { + originX: 'start', + originY: 'bottom', + overlayX: 'start', + overlayY: 'top', + offsetY: 8, // 8px gap between trigger and overlay + }, + ]), ); } } diff --git a/console/src/app/modules/new-header/instance-selector/instance-selector.component.scss b/console/src/app/modules/new-header/instance-selector/instance-selector.component.scss index ef524e9f65..344226d2fa 100644 --- a/console/src/app/modules/new-header/instance-selector/instance-selector.component.scss +++ b/console/src/app/modules/new-header/instance-selector/instance-selector.component.scss @@ -19,6 +19,7 @@ .dropdown-label { color: if($is-dark-theme, #ffffff60, #00000060); + font-size: 14px; } .settings-button { diff --git a/console/src/app/modules/new-header/new-header.component.html b/console/src/app/modules/new-header/new-header.component.html index 052e20b3cf..854fd17636 100644 --- a/console/src/app/modules/new-header/new-header.component.html +++ b/console/src/app/modules/new-header/new-header.component.html @@ -1,14 +1,15 @@
+ + {{ instance.name }} + - - {{ instance.name }} - + + {{ org.name }} + - {{ org.name }} diff --git a/console/src/assets/i18n/en.json b/console/src/assets/i18n/en.json index 6e584f9336..711a8f1d65 100644 --- a/console/src/assets/i18n/en.json +++ b/console/src/assets/i18n/en.json @@ -80,7 +80,7 @@ }, "SETTINGS": { "INSTANCE": { - "TITLE": "Default Settings", + "TITLE": "Instance Settings", "DESCRIPTION": "Default settings for all organizations. With the right permissions, some of them are overridable in organization settings." }, "ORG": {