From 1cf77c5c798de66e64390adb853377feb4819678 Mon Sep 17 00:00:00 2001
From: andrej romanov <50377758+auumgn@users.noreply.github.com>
Date: Thu, 12 Dec 2024 22:57:13 +0200
Subject: [PATCH] New alert tweaks  (#2425)

* replace more sign in alerts

* replace deactivation alert

---------

Co-authored-by: Angel Montenegro <a.montenegro@orcid.org>
---
 ...settings-actions-deactivate.component.html |  26 +---
 ...settings-actions-deactivate.component.scss |  12 +-
 ...tions-deactivate.component.scss-theme.scss |  14 --
 .../print-errors/print-errors.component.html  | 121 ++++++++----------
 .../print-errors/print-errors.component.scss  |   4 +-
 5 files changed, 67 insertions(+), 110 deletions(-)

diff --git a/src/app/account-settings/components/settings-actions-deactivate/settings-actions-deactivate.component.html b/src/app/account-settings/components/settings-actions-deactivate/settings-actions-deactivate.component.html
index b02f7b3ba7..d7a7e9722d 100644
--- a/src/app/account-settings/components/settings-actions-deactivate/settings-actions-deactivate.component.html
+++ b/src/app/account-settings/components/settings-actions-deactivate/settings-actions-deactivate.component.html
@@ -98,24 +98,12 @@
       Deactivate ORCID account
     </button>
   </div>
-  <div
-    *ngIf="deactivatedEmail"
-    class="info margin-bottom-16"
-    [ngClass]="{
-      'orc-font-body-small': !isMobile,
-      'orc-font-small-print': isMobile
-    }"
-  >
-    <div>
-      <mat-icon class="large-material-icon">info</mat-icon>
+  <app-alert-message *ngIf="deactivatedEmail">
+    <div content>
+      <ng-container i18n="@@account.andEmailDeactivateWasSend">
+        An account deactivation email has been sent to
+      </ng-container>
+      <strong> {{ deactivatedEmail }} </strong>
     </div>
-    <div class="col l11 m6 s3">
-      <div>
-        <ng-container i18n="@@account.andEmailDeactivateWasSend">
-          An account deactivation email has been sent to
-        </ng-container>
-        <strong> {{ deactivatedEmail }} </strong>
-      </div>
-    </div>
-  </div>
+  </app-alert-message>
 </app-settings-panels-data>
diff --git a/src/app/account-settings/components/settings-actions-deactivate/settings-actions-deactivate.component.scss b/src/app/account-settings/components/settings-actions-deactivate/settings-actions-deactivate.component.scss
index 56aab5eaab..ecab917d0a 100644
--- a/src/app/account-settings/components/settings-actions-deactivate/settings-actions-deactivate.component.scss
+++ b/src/app/account-settings/components/settings-actions-deactivate/settings-actions-deactivate.component.scss
@@ -10,15 +10,7 @@ ul {
   margin-top: 16px;
 }
 
-.info {
-  padding: 16px;
+app-alert-message {
   margin-top: 16px;
-  margin-bottom: 16px;
-  border: solid 2px;
-  border-radius: 4px;
-  display: flex;
-
-  p {
-    margin: 0;
-  }
+  margin-bottom: 8px;
 }
diff --git a/src/app/account-settings/components/settings-actions-deactivate/settings-actions-deactivate.component.scss-theme.scss b/src/app/account-settings/components/settings-actions-deactivate/settings-actions-deactivate.component.scss-theme.scss
index 929c0caa28..278b4f332f 100644
--- a/src/app/account-settings/components/settings-actions-deactivate/settings-actions-deactivate.component.scss-theme.scss
+++ b/src/app/account-settings/components/settings-actions-deactivate/settings-actions-deactivate.component.scss-theme.scss
@@ -7,20 +7,6 @@
   $warn: map-get($theme, accent);
   $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;
-    }
-  }
 }
 
 @include settings-defaults-email-frequency($orcid-app-theme);
diff --git a/src/app/sign-in/components/errors/print-errors/print-errors.component.html b/src/app/sign-in/components/errors/print-errors/print-errors.component.html
index acd8979050..665f7b8e42 100644
--- a/src/app/sign-in/components/errors/print-errors/print-errors.component.html
+++ b/src/app/sign-in/components/errors/print-errors/print-errors.component.html
@@ -1,73 +1,64 @@
-<div class="info" aria-live="polite">
-  <div>
-    <mat-icon class="large-material-icon material-symbols-outlined"
-      >error</mat-icon
-    >
-  </div>
-  <div class="content">
+<app-alert-message>
+  <div content class="content">
     <div>
-      <p>
-        <ng-container *ngIf="showUnclaimedError || showDeactivatedError">
-          <ng-container i18n="@@register.theEmailAddress" *ngIf="isEmail">
-            The email address
-          </ng-container>
-          <ng-container i18n="@@ngOrcid.signin.theOrcidId" *ngIf="!isEmail">
-            The Orcid iD
-          </ng-container>
-          <strong>{{ email }}</strong>
-          <ng-container i18n="@@register.isAssociatedWith"
-            >is already associated with
+      <ng-container *ngIf="showUnclaimedError || showDeactivatedError">
+        <ng-container i18n="@@register.theEmailAddress" *ngIf="isEmail">
+          The email address
+        </ng-container>
+        <ng-container i18n="@@ngOrcid.signin.theOrcidId" *ngIf="!isEmail">
+          The Orcid iD
+        </ng-container>
+        <strong>{{ email }}</strong>
+        <ng-container i18n="@@register.isAssociatedWith"
+          >is already associated with
+        </ng-container>
+        <ng-container i18n="@@register.anUnclaimed" *ngIf="showUnclaimedError"
+          >an unclaimed
+        </ng-container>
+        <ng-container
+          i18n="@@register.aDeactivated"
+          *ngIf="showDeactivatedError"
+          >a deactivated
+        </ng-container>
+        <ng-container i18n="@@register.orcidRecord">ORCID record.</ng-container>
+        <i *ngIf="showUnclaimedError">
+          <ng-container
+            i18n="@@ngOrcid.signin.cannotSignInToOrcid"
+            *ngIf="isEmail"
+          >
+            You cannot sign in to ORCID with this email address until you have
+            claimed the record.
           </ng-container>
-          <ng-container i18n="@@register.anUnclaimed" *ngIf="showUnclaimedError"
-            >an unclaimed
+          <ng-container
+            i18n="@@ngOrcid.signin.cannotSignInToOrcidWithId"
+            *ngIf="!isEmail"
+          >
+            You cannot sign in to ORCID with this iD until you have claimed the
+            record.
           </ng-container>
+        </i>
+        <i *ngIf="showDeactivatedError">
           <ng-container
-            i18n="@@register.aDeactivated"
-            *ngIf="showDeactivatedError"
-            >a deactivated
+            i18n="@@ngOrcid.signin.needToReactivateAccount"
+            *ngIf="isEmail"
+          >
+            You will need to reactivate the account before you can sign in with
+            this email address.
           </ng-container>
-          <ng-container i18n="@@register.orcidRecord"
-            >ORCID record.</ng-container
+          <ng-container
+            i18n="@@ngOrcid.signin.needToReactivateToSigInWithId"
+            *ngIf="!isEmail"
           >
-          <i *ngIf="showUnclaimedError">
-            <ng-container
-              i18n="@@ngOrcid.signin.cannotSignInToOrcid"
-              *ngIf="isEmail"
-            >
-              You cannot sign in to ORCID with this email address until you have
-              claimed the record.
-            </ng-container>
-            <ng-container
-              i18n="@@ngOrcid.signin.cannotSignInToOrcidWithId"
-              *ngIf="!isEmail"
-            >
-              You cannot sign in to ORCID with this iD until you have claimed
-              the record.
-            </ng-container>
-          </i>
-          <i *ngIf="showDeactivatedError">
-            <ng-container
-              i18n="@@ngOrcid.signin.needToReactivateAccount"
-              *ngIf="isEmail"
-            >
-              You will need to reactivate the account before you can sign in
-              with this email address.
-            </ng-container>
-            <ng-container
-              i18n="@@ngOrcid.signin.needToReactivateToSigInWithId"
-              *ngIf="!isEmail"
-            >
-              You will need to reactivate the account before you can sign in
-              with this iD.
-            </ng-container>
-          </i>
-        </ng-container>
-        <ng-container *ngIf="showDeprecatedError">
-          <ng-container i18n="@@ngOrcid.signin.orcidAccountHasBeenDeprecated">
-            This ORCID account has been deprecated. The active account is </ng-container
-          >&nbsp;<b>{{ orcidPrimaryDeprecated }}</b>
-        </ng-container>
-      </p>
+            You will need to reactivate the account before you can sign in with
+            this iD.
+          </ng-container>
+        </i>
+      </ng-container>
+      <ng-container *ngIf="showDeprecatedError">
+        <ng-container i18n="@@ngOrcid.signin.orcidAccountHasBeenDeprecated">
+          This ORCID account has been deprecated. The active account is </ng-container
+        >&nbsp;<b>{{ orcidPrimaryDeprecated }}</b>
+      </ng-container>
     </div>
 
     <div>
@@ -130,4 +121,4 @@
       >
     </div>
   </div>
-</div>
+</app-alert-message>
diff --git a/src/app/sign-in/components/errors/print-errors/print-errors.component.scss b/src/app/sign-in/components/errors/print-errors/print-errors.component.scss
index 1f4a6ab3a7..a8a3b34d28 100644
--- a/src/app/sign-in/components/errors/print-errors/print-errors.component.scss
+++ b/src/app/sign-in/components/errors/print-errors/print-errors.component.scss
@@ -2,6 +2,6 @@
   margin: auto;
 }
 
-.orcid-error {
-  margin-top: 20px !important;
+app-alert-message {
+  margin-top: 20px;
 }