Standardize alert panels

src/app/account-settings/account-settings.module.ts

@@ -46,6 +46,7 @@ import { SettingsSharingComponent } from './components/settings-sharing/settings
 import { SettingsComponent } from './components/settings/settings.component'
 import { AccountSettingsComponent } from './pages/account-settings/account-settings.component'
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog'
+import { AlertMessageModule } from '../cdk/alert-message/alert-message.module'
 
 @NgModule({
   declarations: [
@@ -98,6 +99,7 @@ import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/lega
     TwoFactorAuthenticationFormModule,
     AccountPanelModule,
     TopBarMyPublicRecordPreviewModule,
+    AlertMessageModule,
   ],
   providers: [VerificationEmailModalService],
 })

src/app/account-settings/components/dialog-actions-duplicated/dialog-actions-duplicated.component.html

@@ -3,24 +3,13 @@
     >Remove duplicate record
   </app-modal-header>
 
-  <div
-    class="info"
-    [ngClass]="{
-      'orc-font-body-small': !isMobile,
-      'orc-font-small-print': isMobile
-    }"
-  >
-    <div class="col">
-      <mat-icon class="large-material-icon">info</mat-icon>
-    </div>
-    <div class="col l11 m6 s3">
-      <p i18n="@@account.warningDuplicated">
-        Warning! All information will be deleted from the duplicate record. Only
-        the email addresses will be transferred to your main ORCID record.
-        Removing a duplicate record cannot be undone.
-      </p>
-    </div>
-  </div>
+  <app-alert-message type="warning" class="orc-font-body-small">
+    <ng-container content i18n="@@account.warningDuplicated">
+      Warning! All information will be deleted from the duplicate record. Only
+      the email addresses will be transferred to your main ORCID record.
+      Removing a duplicate record cannot be undone.
+    </ng-container>
+  </app-alert-message>
 
   <h2 class="remove">
     <strong class="orc-font-body-large" i18n="@@account.removeThisRecord"

src/app/account-settings/components/dialog-actions-duplicated/dialog-actions-duplicated.component.scss

@@ -1,16 +1,3 @@
-.info {
-  padding: 16px;
-  margin-top: 16px;
-  margin-bottom: 16px;
-  border: solid 2px;
-  border-radius: 4px;
-  display: flex;
-
-  p {
-    margin: 0;
-  }
-}
-
 h2 {
   border-bottom: solid 2px;
   padding-bottom: 8px;

src/app/account-settings/components/dialog-actions-duplicated/dialog-actions-duplicated.component.scss-theme.scss

@@ -8,19 +8,6 @@
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
 
-  .info {
-    border-color: mat.get-color-from-palette(
-      $foreground,
-      'state-notice-dark'
-    ) !important;
-
-    mat-icon {
-      color: mat.get-color-from-palette(
-        $foreground,
-        'state-notice-dark'
-      ) !important;
-    }
-  }
   h2.remove {
     border-color: map-get($foreground, 'state-warning-dark');
   }

src/app/account-trusted-parties/account-trusted-parties.module.ts

@@ -36,6 +36,7 @@ import { SettingsTrustedOrganizationsComponent } from './components/settings-tru
 import { SettingsUsersThatThrustYouComponent } from './components/settings-users-that-thrust-you/settings-users-that-thrust-you.component'
 import { SettingsComponent } from './components/settings/settings.component'
 import { AccountTrustedPartiesComponent } from './pages/account-trusted-parties/account-trusted-parties.component'
+import { AlertMessageModule } from '../cdk/alert-message/alert-message.module'
 
 @NgModule({
   declarations: [
@@ -78,6 +79,7 @@ import { AccountTrustedPartiesComponent } from './pages/account-trusted-parties/
     TwoFactorAuthenticationFormModule,
     AccountPanelModule,
     TopBarMyPublicRecordPreviewModule,
+    AlertMessageModule,
     MatTooltipModule,
   ],
   providers: [VerificationEmailModalService],

src/app/account-trusted-parties/components/dialog-revoke-trusted-organization/dialog-revoke-trusted-organization.component.html

@@ -22,37 +22,26 @@
     <div>{{ permissions.key | scopePathType }}</div>
   </div>
 
-  <div
-    class="info"
-    [ngClass]="{
-      'orc-font-body-small': !isMobile,
-      'orc-font-small-print': isMobile
-    }"
-  >
-    <div class="col">
-      <mat-icon class="large-material-icon">info</mat-icon>
-    </div>
-    <div class="col l11 m6 s3">
-      <p>
-        <ng-container i18n="@@account.organizationsCanStillDelete"
-          >Organizations can still delete items they added to your record even
-          after their access permissions have been revoked.
-        </ng-container>
+  <app-alert-message class="orc-font-body-small">
+    <ng-container content>
+      <ng-container i18n="@@account.organizationsCanStillDelete"
+        >Organizations can still delete items they added to your record even
+        after their access permissions have been revoked.
+      </ng-container>
 
-        <ng-container>
-          <a
-            href="https://support.orcid.org/hc/en-us/articles/360006973893-Trusted-organizations"
-            rel="noopener noreferrer"
-            target="_blank"
-            i18n="@@account.findOutMoreAboutTrusted"
-            class="underline"
-          >
-            Find out more about Trusted Organizations and access permissions
-          </a>
-        </ng-container>
-      </p>
-    </div>
-  </div>
+      <ng-container>
+        <a
+          href="https://support.orcid.org/hc/en-us/articles/360006973893-Trusted-organizations"
+          rel="noopener noreferrer"
+          target="_blank"
+          i18n="@@account.findOutMoreAboutTrusted"
+          class="underline"
+        >
+          Find out more about Trusted Organizations and access permissions
+        </a>
+      </ng-container>
+    </ng-container>
+  </app-alert-message>
 
   <app-modal-footer>
     <button

src/app/account-trusted-parties/components/dialog-revoke-trusted-organization/dialog-revoke-trusted-organization.component.scss

@@ -1,16 +1,3 @@
-.info {
-  padding: 16px;
-  margin-top: 16px;
-  margin-bottom: 16px;
-  border: solid 2px;
-  border-radius: 4px;
-  display: flex;
-
-  p {
-    margin: 0;
-  }
-}
-
 .permission-container.last {
   border-bottom: 1px solid;
 }

src/app/account-trusted-parties/components/dialog-revoke-trusted-organization/dialog-revoke-trusted-organization.component.scss-theme.scss

@@ -8,19 +8,6 @@
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
 
-  .info {
-    border-color: mat.get-color-from-palette(
-      $foreground,
-      'state-notice-dark'
-    ) !important;
-
-    mat-icon {
-      color: mat.get-color-from-palette(
-        $foreground,
-        'state-notice-dark'
-      ) !important;
-    }
-  }
   .permission-container.last {
     border-color: map-get($background, light-grey);
   }

src/app/cdk/alert-message/alert-message.component.html

@@ -1,9 +1,45 @@
-<div>
-  <mat-icon class="large-material-icon" role="presentation"
-    >error_outline</mat-icon
-  >
-</div>
+<div
+  class="alert-container"
+  [ngClass]="{
+    'alert-notice': type == 'notice',
+    'alert-info': type == 'info',
+    'alert-warning': type == 'warning',
+    'alert-success': type == 'success'
+  }"
+>
+  <div>
+    <mat-icon
+      *ngIf="type == 'notice'"
+      class="large-material-icon"
+      role="presentation"
+      >info_outline</mat-icon
+    >
+    <mat-icon
+      *ngIf="type == 'info'"
+      class="large-material-icon"
+      role="presentation"
+      >help_outline</mat-icon
+    >
+    <mat-icon
+      *ngIf="type == 'warning'"
+      class="large-material-icon"
+      role="presentation"
+      >warning_amber</mat-icon
+    >
+    <mat-icon
+      *ngIf="type == 'success'"
+      class="large-material-icon"
+      role="presentation"
+      >thumb_up_off_alt</mat-icon
+    >
+  </div>
 
-<div class="alert-container">
-  <ng-content></ng-content>
+  <div>
+    <strong class="title orc-font-body">
+      <ng-content select="[title]"></ng-content>
+    </strong>
+    <div class="content orc-font-body-small">
+      <ng-content select="[content]"></ng-content>
+    </div>
+  </div>
 </div>

src/app/cdk/alert-message/alert-message.component.scss

@@ -1,4 +1,25 @@
 :host {
+  width: 100%;
+  display: inline-block;
+}
+
+.title {
+  ::ng-deep * {
+    margin: 0;
+  }
+  line-height: 24px;
+}
+
+.content {
+  ::ng-deep {
+    > :first-child {
+      margin-top: 8px;
+    }
+  }
+  line-height: 21px !important;
+}
+
+.alert-container {
   border: solid 2px;
   border-radius: 4px;
   padding: 16px;

src/app/cdk/alert-message/alert-message.component.scss-theme.scss

@@ -8,18 +8,72 @@
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
 
-  :host {
-    border-color: mat.get-color-from-palette(
-      $foreground,
-      'state-notice-dark'
-    ) !important;
-    background-color: rgba($state-notice-light, 0.15);
-  }
-  mat-icon {
-    color: mat.get-color-from-palette(
-      $foreground,
-      'state-notice-dark'
-    ) !important;
+  $alert-colors: (
+    'alert-notice': (
+      'border': 'state-notice-darkest',
+      'background': 'state-notice-lightest',
+      'link-darkest': 'brand-quad-darkest',
+      'link-dark': 'brand-quad-dark',
+    ),
+    'alert-info': (
+      'border': 'state-info-darkest',
+      'background': 'state-info-lightest',
+      'link-darkest': 'state-info-darkest',
+      'link-dark': 'state-info-dark',
+    ),
+    'alert-warning': (
+      'border': 'state-warning-dark',
+      'background': 'state-warning-lightest',
+      'link-darkest': 'state-warning-darkest',
+      'link-dark': 'state-warning-dark',
+    ),
+    'alert-success': (
+      'border': 'brand-primary-dark',
+      'background': 'brand-primary-lightest',
+      'link-darkest': 'brand-primary-darkest',
+      'link-dark': 'brand-primary-dark',
+    ),
+  );
+
+  @each $class, $settings in $alert-colors {
+    $border-color: map-get($settings, 'border');
+    $background-color: map-get($settings, 'background');
+    $link-darkest: map-get($settings, 'link-darkest');
+    $link-dark: map-get($settings, 'link-dark');
+
+    .#{$class} {
+      border-color: mat.get-color-from-palette(
+        $foreground,
+        $border-color
+      ) !important;
+      background-color: mat.get-color-from-palette(
+        $foreground,
+        $background-color
+      ) !important;
+
+      mat-icon {
+        color: mat.get-color-from-palette(
+          $foreground,
+          $border-color
+        ) !important;
+      }
+
+      ::ng-deep a {
+        color: mat.get-color-from-palette(
+          $foreground,
+          $link-darkest
+        ) !important;
+
+        &:visited {
+          color: black !important;
+        }
+        &:hover,
+        &:active,
+        &:focus {
+          color: mat.get-color-from-palette($foreground, $link-dark) !important;
+        }
+      }
+    }
   }
 }
 

src/app/cdk/alert-message/alert-message.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, Input } from '@angular/core'
+import { AlertType } from 'src/app/constants'
 
 @Component({
   selector: 'app-alert-message',
@@ -8,8 +9,12 @@ import { Component, OnInit } from '@angular/core'
     'alert-message.component.scss-theme.scss',
   ],
 })
-export class AlertMessageComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit(): void {}
+/**
+ * Use `title` and `content` attributes to display the message
+ * Use headings (h1, h2...) for the title
+ * Title is stripped of any margin, has 24px line height and is bold
+ * Content has `margin-top: 8px` on its first child if it has any, line height is 21px
+ */
+export class AlertMessageComponent {
+  @Input() type: AlertType = 'notice'
 }