diff --git a/angular/src/app/directives/directives.module.ts b/angular/src/app/directives/directives.module.ts index 28b7064..832c7dd 100644 --- a/angular/src/app/directives/directives.module.ts +++ b/angular/src/app/directives/directives.module.ts @@ -2,12 +2,13 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FocusNextInputDirective } from './focus-next-input.directive'; import { DownloadAppDirective } from './download-app.directive'; +import { UpdateOutlineGapDirective } from './update-outline-gap.directive'; @NgModule({ imports: [ CommonModule ], - declarations: [FocusNextInputDirective, DownloadAppDirective], - exports: [FocusNextInputDirective, DownloadAppDirective] + declarations: [FocusNextInputDirective, DownloadAppDirective, UpdateOutlineGapDirective], + exports: [FocusNextInputDirective, DownloadAppDirective, UpdateOutlineGapDirective] }) export class DirectivesModule { } diff --git a/angular/src/app/directives/update-outline-gap.directive.ts b/angular/src/app/directives/update-outline-gap.directive.ts new file mode 100644 index 0000000..cd44156 --- /dev/null +++ b/angular/src/app/directives/update-outline-gap.directive.ts @@ -0,0 +1,17 @@ +import { AfterViewInit, Directive } from '@angular/core'; +import { MatFormField } from '@angular/material/form-field'; + +// TODO: this is temporary workaround, upgrade angular to 15+, where input labels fork fine +@Directive({ + selector: 'mat-form-field[appearance=outline]', +}) +export class UpdateOutlineGapDirective implements AfterViewInit { + constructor(private formField: MatFormField) { + } + + ngAfterViewInit() { + document.fonts.ready.then(() => { + this.formField.updateOutlineGap(); + }); + } +} diff --git a/angular/src/styles.scss b/angular/src/styles.scss index e34ead8..a5e5ead 100644 --- a/angular/src/styles.scss +++ b/angular/src/styles.scss @@ -100,7 +100,7 @@ hr { } .mat-menu-panel { - background: #231f20; + background: var(--background-color); border-radius: 0; }