PD-4978

Author: cryptalith

projects/orcid-registry-ui/src/lib/components/permission-notifications/permission-notifications.component.scss

@@ -8,11 +8,6 @@
   gap: var(--orcid-space-4, 16px);
 }
 
-.permission-notifications__list ::ng-deep .action-surface__text {
-  font-size: var(--orcid-font-size-body-small, 14px);
-  line-height: 21px;
-}
-
 .registry-brand-secondary-dark:hover {
   background-color: var(--orcid-color-brand-secondary-dark, #085c77);
 }

projects/orcid-ui/src/lib/components/action-surface-container/action-surface-container.component.html

@@ -1,8 +1,8 @@
 <section class="action-surface-container">
   <header class="action-surface-container__header">
-    <h2 class="action-surface-container__title orc-font-body" *ngIf="title">
+    <h3 class="action-surface-container__title orcid-font-size-body-large" *ngIf="title">
       {{ title }}
-    </h2>
+    </h3>
     <p
       class="action-surface-container__subtitle orc-font-body-small"
       *ngIf="subtitle"

projects/orcid-ui/src/lib/components/action-surface-container/action-surface-container.component.scss

@@ -25,7 +25,7 @@
     -apple-system,
     sans-serif
   );
-  font-size: 20px;
+  font-size: var(--orcid-font-size-body, 16px);
   line-height: 1.25;
   font-weight: var(--orcid-font-weight-bold, 700);
   color: var(--orcid-color-text-dark-high, #000000);

src/app/core/inbox/permission-notifications.service.ts

@@ -97,7 +97,7 @@ export class PermissionNotificationsService {
         (n): n is InboxNotificationPermission =>
           n?.notificationType === 'PERMISSION' && !n.readDate && !n.archivedDate
       )
-      .sort((a, b) => Number(b.sentDate || 0) - Number(a.sentDate || 0))
+      .sort((a, b) => Number(b.createdDate || 0) - Number(a.createdDate || 0))
     const byClient = new Map<string, InboxNotificationPermission>()
     for (const n of unreadPermission) {
       const clientId = n?.source?.sourceClientId?.path
@@ -106,7 +106,7 @@ export class PermissionNotificationsService {
       if (!byClient.has(clientId)) byClient.set(clientId, n)
     }
     return Array.from(byClient.values()).sort(
-      (a, b) => Number(b.sentDate || 0) - Number(a.sentDate || 0)
+      (a, b) => Number(b.createdDate || 0) - Number(a.createdDate || 0)
     )
   }
 }

src/app/layout/language/language.component.ts

@@ -1,4 +1,9 @@
-import { Component, OnInit, Inject, LOCALE_ID } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  LOCALE_ID,
+} from '@angular/core'
 
 import { WINDOW } from 'src/app/cdk/window'
 import { LanguageService } from 'src/app/core/language/language.service'
@@ -8,8 +13,9 @@ import { LanguageService } from 'src/app/core/language/language.service'
   templateUrl: './language.component.html',
   styleUrls: ['./language.component.scss'],
   standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class LanguageComponent implements OnInit {
+export class LanguageComponent {
   languageMenuOptions: { [key: string]: string }
   labelLanguage = $localize`:@@layout.ariaLabelLanguage:Select your preferred language. Current language is`
 
@@ -31,6 +37,4 @@ export class LanguageComponent implements OnInit {
       this.window.location.reload()
     })
   }
-
-  ngOnInit() {}
 }

src/app/layout/maintenance-message/maintenance-message.component.ts

@@ -1,6 +1,11 @@
-import { Component, OnInit } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+} from '@angular/core'
 import { TogglzService } from 'src/app/core/togglz/togglz.service'
 import { MaintenanceMessage } from 'src/app/types/togglz.local'
+import { take } from 'rxjs/operators'
 
 @Component({
   selector: 'app-maintenance-message',
@@ -10,17 +15,23 @@ import { MaintenanceMessage } from 'src/app/types/togglz.local'
     './maintenance-message.component.scss',
   ],
   standalone: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MaintenanceMessageComponent implements OnInit {
+export class MaintenanceMessageComponent {
   maintenanceMessage: MaintenanceMessage
   closableElement: Element
   labelMaintenance = $localize`:@@layout.ariaLabelMaintenance:Maintenance message`
 
-  constructor(togglz: TogglzService) {
-    togglz.getMaintenanceMessages().subscribe((value) => {
-      this.maintenanceMessage = value
-    })
+  constructor(
+    togglz: TogglzService,
+    private cdr: ChangeDetectorRef,
+  ) {
+    togglz
+      .getMaintenanceMessages()
+      .pipe(take(1))
+      .subscribe((value) => {
+        this.maintenanceMessage = value
+        this.cdr.markForCheck()
+      })
   }
-
-  ngOnInit() {}
 }

src/app/record/components/top-bar/top-bar.component.scss

@@ -147,6 +147,6 @@ app-top-bar-actions {
   }
 }
 
-app-warning-message {
+app-warning-message, orcid-registry-permission-notifications {
   margin-bottom: 16px;
 }

src/app/record/components/top-bar/top-bar.component.ts

@@ -191,7 +191,7 @@ export class TopBarComponent implements OnInit, OnDestroy {
               (_, i) => i !== event.notificationIndex
             )
           if (target) {
-            ;(this.window as any).outOfRouterNavigation(target)
+            this.window.open(target, '_blank')
           }
         })
       return