From db09154662490cd50a53e1f1f89e162388a5564b Mon Sep 17 00:00:00 2001
From: andrej romanov <50377758+auumgn@users.noreply.github.com>
Date: Wed, 24 Jul 2024 20:12:44 +0300
Subject: [PATCH] fix email notification dropdown focus (#2312)

---
 .../modals/modal-email/modal-email.component.html        | 9 ++++++---
 .../modals/modal-email/modal-email.component.scss        | 6 ------
 .../modal-email/modal-email.component.scss-theme.scss    | 7 ++++---
 3 files changed, 10 insertions(+), 12 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
index f5be10ed4..72d6c8dab 100644
--- 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
@@ -249,7 +249,10 @@ <h2 class="orc-font-body-large" i18n="@@side-bar.emailAddressesUppercase">
           >your ORCID account settings.</a
         >
       </p>
-      <div appearance="outline" class="mat-form-field-min">
+      <mat-form-field
+        appearance="outline"
+        class="mat-form-field-min select-notifications-email"
+      >
         <mat-select
           outline="black"
           [aria-label]="ariaLabelSelect"
@@ -260,7 +263,7 @@ <h2 class="orc-font-body-large" i18n="@@side-bar.emailAddressesUppercase">
           }"
           placeholder=" {{ primaryEmail?.value }}"
           [(value)]="primaryEmail"
-          class="select-notifications-email orc-font-body-small"
+          class="orc-font-body-small"
         >
           <ng-container *ngFor="let email of emails">
             <mat-option
@@ -275,7 +278,7 @@ <h2 class="orc-font-body-large" i18n="@@side-bar.emailAddressesUppercase">
             </mat-option>
           </ng-container>
         </mat-select>
-      </div>
+      </mat-form-field>
     </section>
   </div>
 </app-modal>
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
index 83c31aba7..8a9006538 100644
--- 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
@@ -104,14 +104,8 @@ mat-form-field {
 }
 
 .select-notifications-email {
-  padding: 0 8px 0 8px;
-  align-items: center;
-  display: flex;
   height: 38px;
   max-width: 402px;
-  width: auto;
-  border: solid 1px;
-  border-radius: 0 5px 5px 0;
 }
 .current-notification-email {
   font-weight: bold;
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
index 998cf07b3..20ea5a02e 100644
--- 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
@@ -29,10 +29,11 @@
     background: mat.get-color-from-palette($background, 'ui-background-light');
   }
 
+  ::ng-deep .mat-option-text {
+    color: black;
+  }
+
   .select-notifications-email {
-    ::ng-deep .mat-select-placeholder {
-      color: black;
-    }
     color: rgba(0, 0, 0, 0.12);
   }