Merge pull request #2316 from ORCID/fix-disabled-email-notification-d…

…ropdown-styling fix disabled email notification dropdown styling
ORCID · Jul 25, 2024 · 25641eb · 25641eb
2 parents 499d525 + 085e0d4
commit 25641eb
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 10 deletions.
diff --git a/src/app/cdk/side-bar/modals/modal-email/modal-email.component.html b/src/app/cdk/side-bar/modals/modal-email/modal-email.component.html
@@ -259,17 +259,17 @@ <h2 class="orc-font-body-large" i18n="@@side-bar.emailAddressesUppercase">
       <mat-form-field
         appearance="outline"
         class="mat-form-field-min select-notifications-email"
+        [ngClass]="{
+          'disabled-select-notifications-email': !hasVerifiedEmailAddress()
+        }"
       >
         <mat-select
           outline="black"
           [aria-label]="
             ariaLabelNotificationsAreSentToEmail + ' ' + primaryEmail?.value
           "
-          [attr.disabled]="!hasVerifiedEmailAddress()"
           (selectionChange)="makePrimary($event.value)"
-          [ngClass]="{
-            'disabled-select-notifications-email': !hasVerifiedEmailAddress()
-          }"
+          [disabled]="!hasVerifiedEmailAddress()"
           placeholder=" {{ primaryEmail?.value }}"
           [(value)]="primaryEmail"
           class="orc-font-body-small"

diff --git a/src/app/cdk/side-bar/modals/modal-email/modal-email.component.scss b/src/app/cdk/side-bar/modals/modal-email/modal-email.component.scss
@@ -115,12 +115,6 @@ mat-form-field {
   font-weight: bold;
 }
 
-.disabled-select-notifications-email {
-  ::ng-deep .mat-select-trigger {
-    cursor: default;
-  }
-}
-
 .add-more {
   margin-top: 16px;
   align-items: center;

diff --git a/src/app/cdk/side-bar/modals/modal-email/modal-email.component.scss-theme.scss b/src/app/cdk/side-bar/modals/modal-email/modal-email.component.scss-theme.scss
@@ -37,6 +37,10 @@
     color: rgba(0, 0, 0, 0.12);
   }
 
+  ::ng-deep .mat-select-placeholder {
+    color: black;
+  }
+
   .disabled-select-notifications-email {
     ::ng-deep .mat-select-placeholder {
       color: rgba(black, 0.6);