From 1b359027b1b56d86bc8d17a37d223cd4256b92e3 Mon Sep 17 00:00:00 2001 From: Volha Mardvilka Date: Mon, 16 Dec 2024 16:37:02 +0000 Subject: [PATCH] 382095919: (feat) add general settings page --- modules/ui/src/app/app.component.html | 36 +---- modules/ui/src/app/app.component.spec.ts | 111 ------------- modules/ui/src/app/app.component.ts | 43 +---- .../settings-dropdown.component.html | 24 +-- .../settings-dropdown.component.scss | 61 +++++-- .../general-settings.component.html | 149 ++++++++++++++---- .../general-settings.component.scss | 124 +++++++-------- .../general-settings.component.spec.ts | 49 +----- .../general-settings.component.ts | 29 ++-- modules/ui/src/styles.scss | 24 ++- modules/ui/src/theming/colors.scss | 2 + 11 files changed, 287 insertions(+), 365 deletions(-) diff --git a/modules/ui/src/app/app.component.html b/modules/ui/src/app/app.component.html index 0ff440418..cb522c448 100644 --- a/modules/ui/src/app/app.component.html +++ b/modules/ui/src/app/app.component.html @@ -91,9 +91,6 @@

Testrun

routerLink="{{ Routes.Settings }}" routerLinkActive="app-sidebar-button-active" (keydown.enter)="onNavigationClick()"> - - - tune @@ -125,13 +122,9 @@

Testrun

Selected port is missing! Please define a valid one using Testrun *ngIf="vm.hasConnectionSettings === false"> Step 1: To perform a device test, please, select ports in Testrun - - - - - { TestBed.configureTestingModule({ imports: [ - FakeGeneralSettingsComponent, AppComponent, RouterTestingModule, HttpClientTestingModule, @@ -187,7 +185,6 @@ describe('AppComponent', () => { }).overrideComponent(AppComponent, { remove: { imports: [ - GeneralSettingsComponent, SpinnerComponent, ShutdownAppComponent, TestingCompleteComponent, @@ -196,7 +193,6 @@ describe('AppComponent', () => { }, add: { imports: [ - FakeGeneralSettingsComponent, FakeSpinnerComponent, FakeShutdownAppComponent, FakeVersionComponent, @@ -311,60 +307,6 @@ describe('AppComponent', () => { expect(router.url).toBe(Routes.Reports); })); - it('should call toggleSettingsBtn focus when settingsDrawer close on closeSetting', fakeAsync(() => { - fixture.detectChanges(); - - spyOn(component.settingsDrawer(), 'close').and.returnValue( - Promise.resolve('close') - ); - spyOn(component.toggleSettingsBtn(), 'focus'); - - component.closeSetting(true); - tick(); - - component - .settingsDrawer() - .close() - .then(() => { - expect(component.toggleSettingsBtn().focus).toHaveBeenCalled(); - }); - })); - - it('should call focusFirstElementInContainer if settingsDrawer opened not from toggleBtn', fakeAsync(() => { - fixture.detectChanges(); - - spyOn(component.settingsDrawer(), 'close').and.returnValue( - Promise.resolve('close') - ); - - component.openGeneralSettings(false, false); - tick(); - component.closeSetting(false); - flush(); - - component - .settingsDrawer() - .close() - .then(() => { - expect( - mockFocusManagerService.focusFirstElementInContainer - ).toHaveBeenCalled(); - }); - })); - - it('should update interfaces and config', () => { - fixture.detectChanges(); - - const settings = component.settings(); - spyOn(settings, 'getSystemInterfaces'); - spyOn(settings, 'getSystemConfig'); - - component.openGeneralSettings(false, false); - - expect(settings.getSystemInterfaces).toHaveBeenCalled(); - expect(settings.getSystemConfig).toHaveBeenCalled(); - }); - it('should navigate to the settings when "settings" button is clicked', fakeAsync(() => { fixture.detectChanges(); @@ -377,21 +319,6 @@ describe('AppComponent', () => { expect(router.url).toBe(Routes.Settings); })); - it('should announce settingsDrawer disabled on openSetting and settings are disabled', fakeAsync(() => { - fixture.detectChanges(); - - spyOn(component.settingsDrawer(), 'open').and.returnValue( - Promise.resolve('open') - ); - - component.openSetting(true); - tick(); - - expect(mockLiveAnnouncer.announce).toHaveBeenCalledWith( - 'The settings panel is disabled' - ); - })); - it('should have spinner', () => { const spinner = compiled.querySelector('app-spinner'); @@ -457,20 +384,6 @@ describe('AppComponent', () => { expect(calloutLinkEl).toBeTruthy(); expect(calloutLinkContent).toContain('System settings'); }); - - keyboardCases.forEach(testCase => { - it(`should call openSetting on keydown ${testCase.name} "Connection settings" link`, fakeAsync(() => { - const spyOpenSetting = spyOn(component, 'openSetting'); - const calloutLinkEl = compiled.querySelector( - '.message-link' - ) as HTMLAnchorElement; - - calloutLinkEl.dispatchEvent(testCase.event); - flush(); - - expect(spyOpenSetting).toHaveBeenCalled(); - })); - }); }); describe('with system status as "Idle"', () => { @@ -776,19 +689,6 @@ describe('AppComponent', () => { }); }); - it('should not call toggleSettingsBtn focus on closeSetting when device length is 0', async () => { - fixture.detectChanges(); - - spyOn(component.settingsDrawer(), 'close').and.returnValue( - Promise.resolve('close') - ); - const spyToggle = spyOn(component.toggleSettingsBtn(), 'focus'); - - await component.closeSetting(false); - - expect(spyToggle).toHaveBeenCalledTimes(0); - }); - it('should set focus to first focusable elem when close callout', fakeAsync(() => { component.calloutClosed('mockId'); tick(100); @@ -799,17 +699,6 @@ describe('AppComponent', () => { })); }); -@Component({ - selector: 'app-general-settings', - template: '
', -}) -class FakeGeneralSettingsComponent { - @Input() settingsDisable = false; - @Output() closeSettingEvent = new EventEmitter(); - getSystemInterfaces = () => {}; - getSystemConfig = () => {}; -} - @Component({ selector: 'app-spinner', template: '
', diff --git a/modules/ui/src/app/app.component.ts b/modules/ui/src/app/app.component.ts index 1dfd8f65c..10f70f977 100644 --- a/modules/ui/src/app/app.component.ts +++ b/modules/ui/src/app/app.component.ts @@ -23,7 +23,7 @@ import { } from '@angular/core'; import { MatIconModule, MatIconRegistry } from '@angular/material/icon'; import { DomSanitizer } from '@angular/platform-browser'; -import { MatDrawer, MatSidenavModule } from '@angular/material/sidenav'; +import { MatSidenavModule } from '@angular/material/sidenav'; import { StatusOfTestrun } from './model/testrun-status'; import { NavigationEnd, Router, RouterModule } from '@angular/router'; import { CalloutType } from './model/callout-type'; @@ -32,10 +32,8 @@ import { FocusManagerService } from './services/focus-manager.service'; import { State, Store } from '@ngrx/store'; import { AppState } from './store/state'; import { setIsOpenAddDevice } from './store/actions'; -import { GeneralSettingsComponent } from './pages/general-settings/general-settings.component'; import { AppStore } from './app.store'; import { TestRunService } from './services/test-run.service'; -import { CdkTrapFocus, LiveAnnouncer } from '@angular/cdk/a11y'; import { filter, take } from 'rxjs/operators'; import { timer } from 'rxjs'; import { MatToolbarModule } from '@angular/material/toolbar'; @@ -86,11 +84,9 @@ const QUALIFICATION_URL = '/assets/icons/qualification.svg'; BypassComponent, VersionComponent, CalloutComponent, - CdkTrapFocus, ShutdownAppComponent, WifiComponent, TestingCompleteComponent, - GeneralSettingsComponent, RouterModule, CommonModule, ], @@ -105,17 +101,12 @@ export class AppComponent implements AfterViewInit { private readonly focusManagerService = inject(FocusManagerService); private testRunService = inject(TestRunService); appStore = inject(AppStore); - private liveAnnouncer = inject(LiveAnnouncer); public readonly CalloutType = CalloutType; public readonly StatusOfTestrun = StatusOfTestrun; public readonly Routes = Routes; - private openedSettingFromToggleBtn = true; - - readonly settingsDrawer = viewChild.required('settingsDrawer'); readonly toggleSettingsBtn = viewChild.required('toggleSettingsBtn'); - readonly settings = viewChild.required('settings'); viewModel$ = this.appStore.viewModel$; readonly riskAssessmentLink = viewChild('riskAssessmentLink'); @@ -206,34 +197,10 @@ export class AppComponent implements AfterViewInit { }); } - async closeSetting(hasDevices: boolean): Promise { - return await this.settingsDrawer() - .close() - .then(() => { - if (hasDevices) { - this.toggleSettingsBtn().focus(); - } // else device create window will be opened - if (!this.openedSettingFromToggleBtn) { - this.focusManagerService.focusFirstElementInContainer(); - } - }); - } - - async openSetting(isSettingsDisabled: boolean): Promise { - return await this.openGeneralSettings(false, isSettingsDisabled); - } - - async openGeneralSettings( - openSettingFromToggleBtn: boolean, - isSettingsDisabled: boolean - ) { - this.openedSettingFromToggleBtn = openSettingFromToggleBtn; - this.settings().getSystemInterfaces(); - this.settings().getSystemConfig(); - await this.settingsDrawer().open(); - if (isSettingsDisabled) { - await this.liveAnnouncer.announce('The settings panel is disabled'); - } + navigateToSettings(): void { + this.route.navigate([Routes.Settings]).then(() => { + this.appStore.setFocusOnPage(); + }); } consentShown() { this.appStore.setContent(); diff --git a/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.html b/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.html index 7157db8d3..a8617b90a 100644 --- a/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.html +++ b/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.html @@ -1,12 +1,15 @@ - -

- {{ description }} -

+
+ +

+ {{ description }} +

+
+ {{ label }} +
+ +
diff --git a/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.scss b/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.scss index 0f9d68042..b3fe66ee5 100644 --- a/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.scss +++ b/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.scss @@ -3,12 +3,17 @@ @use 'variables'; :host { - padding-top: 16px; + display: grid; + grid-template-columns: 1fr 1fr 1.1fr; + gap: 46px; + padding: 8px 0; } .setting-form-label { - font-size: 18px; - color: colors.$dark-grey; + font-size: 16px; + line-height: 24px; + font-weight: 500; + color: colors.$on-surface; } :host:has(.two-ports-message) .internet-label { @@ -16,47 +21,54 @@ } .setting-label-description { - font-family: variables.$font-secondary; + margin: 0; font-size: 14px; line-height: 20px; - letter-spacing: 0.2px; - margin: 8px 0; - color: colors.$dark-grey; + letter-spacing: 0; + color: colors.$on-surface-variant; } .setting-option-value { - padding: 14px 16px; + padding: 8px 16px; } .option-value { margin: 0; - font-family: Roboto; - font-size: 14px; + font-family: variables.$font-text; + font-size: 16px; font-style: normal; font-weight: 400; - line-height: 20px; - letter-spacing: 0.2px; + line-height: 22px; + letter-spacing: 0; &.top { - color: colors.$grey-800; + color: colors.$on-surface-variant; } &.bottom { - color: colors.$grey-700; + color: colors.$schemes-outline; } } .setting-field { width: 100%; + padding: 10px 0; &.mat-form-field-disabled { opacity: 0.6; } + &::ng-deep.mat-mdc-form-field-subscript-wrapper { + display: none; + } + ::ng-deep .mat-mdc-form-field-infix { - min-height: 76px; + min-height: 60px; + height: 60px; display: flex; align-items: center; + padding-top: 9px; + padding-bottom: 6px; } ::ng-deep .mat-mdc-floating-label { @@ -69,6 +81,23 @@ } ::ng-deep .mat-mdc-floating-label:not(.mdc-floating-label--float-above) { - top: 35px; + top: 28px; } } + +.label-column { + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 16px; + color: colors.$on-surface-variant; + font-family: variables.$font-text; +} + +.info-column { + display: flex; + flex-direction: column; + gap: 6px; + width: 260px; + padding: 0 12px; +} diff --git a/modules/ui/src/app/pages/general-settings/general-settings.component.html b/modules/ui/src/app/pages/general-settings/general-settings.component.html index 2dd8567b3..a8a7a6beb 100644 --- a/modules/ui/src/app/pages/general-settings/general-settings.component.html +++ b/modules/ui/src/app/pages/general-settings/general-settings.component.html @@ -13,17 +13,6 @@ See the License for the specific language governing permissions and limitations under the License. --> -
-

System settings

- -
System settings (vm.interfaces | keyvalue).length === 0 ">
+ + System settings label="Device connection port" key="device" [options]="vm.deviceOptions"> + System settings label="Internet connection port" key="internet" [options]="vm.internetOptions"> + -

- If a port is missing from this list, you can - - Refresh - - the System settings -

+ System settings key="monitoring-period" [options]="vm.monitoringPeriodOptions"> + +
System settings Both interfaces must have different values
-
- - Warning! No ports detected. - +
+
+
+ + Warning! No ports detected. + +
+
+ +
+
+ + + +
+
+

{{ label }}

+

+ {{ description }} +

+
+
+ + + + + + +
+
+

+ By installing and running Testrun, you understand and accept the Terms + of Service found + here +

+
+
+ + +

+ {{ vm.systemConfig.single_intf ? 'Single port' : 'Two ports' }} +

+ + +

+ + Opt out from Google Analytics + +

+ + +

+ Internet port is disabled because you selected single port mode +

+ + + +

This port is required

+ + + + +

+ If a port is missing from this list, you can + + Refresh + + the System settings +

diff --git a/modules/ui/src/app/pages/general-settings/general-settings.component.scss b/modules/ui/src/app/pages/general-settings/general-settings.component.scss index ea51621ed..7d9cb7c50 100644 --- a/modules/ui/src/app/pages/general-settings/general-settings.component.scss +++ b/modules/ui/src/app/pages/general-settings/general-settings.component.scss @@ -22,83 +22,34 @@ flex-direction: column; height: 100%; flex: 1 0 auto; -} - -.settings-drawer-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 12px 12px 16px 24px; - - &-title { - margin: 0; - font-size: 22px; - font-style: normal; - font-weight: 400; - line-height: 28px; - color: colors.$dark-grey; - } - - &-button { - min-width: 24px; - width: 24px; - height: 24px; - margin: 4px; - padding: 8px; - box-sizing: content-box; - line-height: normal !important; - - .close-button-icon { - width: 24px; - height: 24px; - margin: 0; - } - - ::ng-deep * { - line-height: inherit !important; - } - } + padding: 6px 22px; } .setting-drawer-content { - padding: 0 16px 8px 16px; - overflow: hidden; - flex: 1; - - form { - display: grid; - height: 100%; - } + overflow-y: scroll; + height: max-content; + max-height: calc(100vh - 260px); + padding: 10px; .setting-drawer-content-form-empty { grid-template-rows: repeat(2, auto) 1fr; } } -.setting-drawer-content-inputs { - overflow: auto; - margin: 0 -16px; - padding: 0 16px; -} - .error-message-container { display: block; margin-top: auto; padding-bottom: 8px; -} - -.error-message-container + .setting-drawer-footer { - margin-top: 0; + text-align: center; } .message { margin: 0; - padding: 6px 0 12px 0; - color: colors.$grey-800; - font-family: variables.$font-secondary; + color: colors.$on-surface-variant; + font-family: variables.$font-text; font-size: 14px; line-height: 20px; - letter-spacing: 0.2px; + letter-spacing: 0; } .setting-drawer-footer { @@ -108,17 +59,15 @@ flex-shrink: 0; justify-content: flex-end; - .close-button, .save-button { padding: 0 24px; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0.25px; - } - - .close-button { - margin-right: 10px; + &::ng-deep .mat-focus-indicator { + display: none; + } } } @@ -150,3 +99,52 @@ cursor: pointer; pointer-events: auto; } + +.section-item { + display: grid; + grid-template-columns: 1fr 1fr 1.1fr; + gap: 46px; + padding: 8px 0; + + p { + margin: 0; + } + .label-column { + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 16px; + color: colors.$on-surface-variant; + font-family: variables.$font-text; + } + + .info-column { + display: flex; + flex-direction: column; + gap: 6px; + width: 260px; + padding: 0 12px; + } + + .setting-form-label, + .setting-data { + font-size: 16px; + line-height: 24px; + font-weight: 500; + color: colors.$on-surface; + } + + .setting-data { + display: flex; + align-items: center; + font-weight: 400; + } + + .setting-label-description { + margin: 0; + font-size: 14px; + line-height: 20px; + letter-spacing: 0; + color: colors.$on-surface-variant; + } +} diff --git a/modules/ui/src/app/pages/general-settings/general-settings.component.spec.ts b/modules/ui/src/app/pages/general-settings/general-settings.component.spec.ts index a392de2e2..cca3ba9c0 100644 --- a/modules/ui/src/app/pages/general-settings/general-settings.component.spec.ts +++ b/modules/ui/src/app/pages/general-settings/general-settings.component.spec.ts @@ -23,7 +23,6 @@ import { MatButtonModule } from '@angular/material/button'; import { MatIcon, MatIconModule } from '@angular/material/icon'; import { MatIconTestingModule } from '@angular/material/icon/testing'; import { Component, Input } from '@angular/core'; -import { LiveAnnouncer } from '@angular/cdk/a11y'; import SpyObj = jasmine.SpyObj; import { MatInputModule } from '@angular/material/input'; import { MatSelectModule } from '@angular/material/select'; @@ -42,13 +41,13 @@ import { SpinnerComponent } from '../../components/spinner/spinner.component'; describe('GeneralSettingsComponent', () => { let component: GeneralSettingsComponent; let fixture: ComponentFixture; - let mockLiveAnnouncer: SpyObj; let compiled: HTMLElement; let mockLoaderService: SpyObj; let mockSettingsStore: SpyObj; beforeEach(async () => { - mockLiveAnnouncer = jasmine.createSpyObj(['announce']); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + (window).gtag = jasmine.createSpy('gtag'); mockLoaderService = jasmine.createSpyObj('LoaderService', ['setLoading']); mockSettingsStore = jasmine.createSpyObj('SettingsStore', [ 'getInterfaces', @@ -61,7 +60,6 @@ describe('GeneralSettingsComponent', () => { await TestBed.configureTestingModule({ providers: [ - { provide: LiveAnnouncer, useValue: mockLiveAnnouncer }, { provide: LoaderService, useValue: mockLoaderService }, { provide: GeneralSettingsStore, useValue: mockSettingsStore }, provideMockStore(), @@ -116,6 +114,11 @@ describe('GeneralSettingsComponent', () => { component.ngOnInit(); }); + afterEach(() => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + (window).gtag = undefined; + }); + it('should create', () => { expect(component).toBeTruthy(); }); @@ -167,44 +170,6 @@ describe('GeneralSettingsComponent', () => { }); }); - describe('#closeSetting', () => { - beforeEach(() => { - component.ngOnInit(); - }); - - it('should emit closeSettingEvent', () => { - spyOn(component.closeSettingEvent, 'emit'); - - component.closeSetting('Message'); - - expect(component.closeSettingEvent.emit).toHaveBeenCalled(); - }); - - it('should call liveAnnouncer with provided message', () => { - const mockMessage = 'mock event'; - - component.closeSetting(mockMessage); - - expect(mockLiveAnnouncer.announce).toHaveBeenCalledWith( - `The ${mockMessage} finished. The system settings panel is closed.` - ); - }); - - it('should call reset settingForm', () => { - spyOn(component.settingForm, 'reset'); - - component.closeSetting('Message'); - - expect(component.settingForm.reset).toHaveBeenCalled(); - }); - - it('should call setDefaultFormValues', () => { - component.closeSetting('Message'); - - expect(mockSettingsStore.setDefaultFormValues).toHaveBeenCalled(); - }); - }); - describe('#saveSetting', () => { beforeEach(() => { component.ngOnInit(); diff --git a/modules/ui/src/app/pages/general-settings/general-settings.component.ts b/modules/ui/src/app/pages/general-settings/general-settings.component.ts index a4bae3b20..7f0b99f25 100644 --- a/modules/ui/src/app/pages/general-settings/general-settings.component.ts +++ b/modules/ui/src/app/pages/general-settings/general-settings.component.ts @@ -17,11 +17,9 @@ import { ChangeDetectionStrategy, Component, ElementRef, - EventEmitter, Input, OnDestroy, OnInit, - Output, viewChild, inject, } from '@angular/core'; @@ -29,12 +27,12 @@ import { FormBuilder, FormControl, FormGroup, + FormsModule, ReactiveFormsModule, } from '@angular/forms'; import { Subject, takeUntil, tap } from 'rxjs'; import { OnlyDifferentValuesValidator } from './only-different-values.validator'; import { CalloutType } from '../../model/callout-type'; -import { CdkTrapFocus, LiveAnnouncer } from '@angular/cdk/a11y'; import { EventType } from '../../model/event-type'; import { FormKey, SystemConfig } from '../../model/setting'; import { GeneralSettingsStore } from './general-settings.store'; @@ -52,14 +50,18 @@ import { MatSelectModule } from '@angular/material/select'; import { MatIconModule } from '@angular/material/icon'; import { MatSidenavModule } from '@angular/material/sidenav'; import { MatRadioModule } from '@angular/material/radio'; +import { MatDividerModule } from '@angular/material/divider'; import { CalloutComponent } from '../../components/callout/callout.component'; import { CommonModule } from '@angular/common'; +import { MatCheckbox } from '@angular/material/checkbox'; + +// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type +declare const gtag: Function; @Component({ selector: 'app-general-settings', templateUrl: './general-settings.component.html', styleUrls: ['./general-settings.component.scss'], - hostDirectives: [CdkTrapFocus], imports: [ MatButtonModule, MatIconModule, @@ -73,6 +75,9 @@ import { CommonModule } from '@angular/common'; ReactiveFormsModule, MatFormFieldModule, MatSnackBarModule, + MatDividerModule, + MatCheckbox, + FormsModule, SpinnerComponent, CalloutComponent, SettingsDropdownComponent, @@ -82,8 +87,8 @@ import { CommonModule } from '@angular/common'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class GeneralSettingsComponent implements OnInit, OnDestroy { + optOut = false; private readonly fb = inject(FormBuilder); - private liveAnnouncer = inject(LiveAnnouncer); private readonly onlyDifferentValuesValidator = inject( OnlyDifferentValuesValidator ); @@ -91,7 +96,6 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy { private readonly loaderService = inject(LoaderService); readonly reloadSettingLink = viewChild('reloadSettingLink'); - @Output() closeSettingEvent = new EventEmitter(); private isSettingsDisable = false; get settingsDisable(): boolean { @@ -161,14 +165,6 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy { this.getSystemConfig(); this.setDefaultFormValues(); } - closeSetting(message: string): void { - this.resetForm(); - this.closeSettingEvent.emit(); - this.liveAnnouncer.announce( - `The ${message} finished. The system settings panel is closed.` - ); - this.setDefaultFormValues(); - } saveSetting(): void { if (this.settingForm.invalid) { @@ -233,10 +229,13 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy { }; this.settingsStore.updateSystemConfig({ onSystemConfigUpdate: () => { - this.closeSetting(EventType.Save); + this.setDefaultFormValues(); }, config: data, }); + gtag('consent', 'update', { + analytics_storage: this.optOut ? 'denied' : 'granted', + }); } private resetForm(): void { diff --git a/modules/ui/src/styles.scss b/modules/ui/src/styles.scss index faf90c53f..322923f4e 100644 --- a/modules/ui/src/styles.scss +++ b/modules/ui/src/styles.scss @@ -52,6 +52,18 @@ container-height: 20px, ) ); + + @include mat.select-overrides( + ( + panel-background-color: colors.$surface-container, + ) + ); + + @include mat.divider-overrides( + ( + color: colors.$outline-variant, + ) + ); } .filter-result { @@ -287,20 +299,20 @@ mat-hint { } .message-link { - color: mat.get-theme-color($light-theme, primary, 30); + color: colors.$blue-700; text-decoration: none; cursor: pointer; - font-weight: 500; + font-weight: 400; } .message-link:hover { - color: mat.get-theme-color($light-theme, primary, 25); + color: colors.$secondary; } .mat-mdc-option { - --mat-option-hover-state-layer-color: #e8f0fe; - --mat-option-focus-state-layer-color: #e8f0fe; - --mat-option-selected-state-layer-color: #e8f0fe; + --mat-option-hover-state-layer-color: #c2e7ff; + --mat-option-focus-state-layer-color: #c2e7ff; + --mat-option-selected-state-layer-color: #c2e7ff; } .mat-mdc-form-field { diff --git a/modules/ui/src/theming/colors.scss b/modules/ui/src/theming/colors.scss index 71c2f51fe..b8f9175ea 100644 --- a/modules/ui/src/theming/colors.scss +++ b/modules/ui/src/theming/colors.scss @@ -43,6 +43,7 @@ $orange-700: #a85d00; $yellow-50: #fef7e0; $cyan-50: #e4f7fb; $cyan-900: #007b83; +$blue-700: #1967d2; $primary: mat.get-theme-color($light-theme, primary, 40); $secondary: mat.get-theme-color($light-theme, secondary, 40); @@ -91,6 +92,7 @@ $on-surface: mat.get-theme-color($light-theme, neutral, 10); $on-surface-variant: mat.get-theme-color($light-theme, neutral-variant, 30); $outline: mat.get-theme-color($light-theme, neutral-variant, 50); $outline-variant: mat.get-theme-color($light-theme, neutral-variant, 80); +$schemes-outline: #757780; $inverse-surface: mat.get-theme-color($light-theme, neutral, 20); $inverse-on-surface: mat.get-theme-color($light-theme, neutral, 95);