Merge pull request #2812 from ORCID/lmendoza/PD-5328

PD-5328, PD-5403

Author: cryptalith

projects/orcid-registry-ui/src/lib/components/auth-challenge/auth-challenge.component.html

@@ -25,9 +25,15 @@ <h1 class="orc-font-heading-small text-center font-normal" i18n>
       >and</ng-container
     >&nbsp;}@if (showTwoFactorField) {<ng-container i18n
       >a two-factor authentication code</ng-container
-    >&nbsp;}to&nbsp;{{ actionDescription }}@if (boldText) {&nbsp;<b>{{
-      boldText
-    }}</b
+    >&nbsp;}<ng-container
+      i18n="
+        auth challenge action clause|Clause in the verification sentence before
+        a dynamic action fragment. actionDescription is a translated verb phrase
+        like 'disable 2FA', 'unlink the alternate sign in account', or 'complete
+        your password reset'. Keep the sentence natural in your
+        language.@@authChallenge.toActionDescription"
+      >to {{ actionDescription }}</ng-container
+    >@if (boldText) {&nbsp;<b>{{ boldText }}</b
     >}@if (trailingText) {&nbsp;{{ trailingText }}}
   </p>
 

src/app/layout/language/language.component.html

@@ -14,24 +14,19 @@
   #languageMenu="matMenu"
   id="cy-language-menu"
   [attr.aria-label]="labelLanguage"
+  class="orcid-language-menu-panel"
 >
-  <div
+  <button
     *ngFor="let language of languageMenuOptions | keyvalue"
     (click)="changeLanguage(language.key)"
     mat-menu-item
-    [ngClass]="{ 'orcid-mat-menu-item-active': language.key === locale }"
-    class="orcid-menu-item-small"
+    [attr.aria-label]="language.value"
+    [ngClass]="{ 'orcid-language-menu-item-selected': language.key === locale }"
+    class="orcid-language-menu-item"
   >
-    <button
-      mat-menu-item
-      [ngClass]="{ 'orcid-mat-menu-item-active': language.key === locale }"
-      class="orcid-menu-item-small"
-      [attr.aria-label]="language.value"
-    >
-      <div class="row middle space-between">
-        {{ language.value }}
-        <mat-icon *ngIf="language.key === locale">check</mat-icon>
-      </div>
-    </button>
-  </div>
+    <div class="row middle space-between">
+      {{ language.value }}
+      <mat-icon *ngIf="language.key === locale">check</mat-icon>
+    </div>
+  </button>
 </mat-menu>

src/assets/scss/material.orcid.overwrites.scss/menu.scss

@@ -15,6 +15,43 @@
   }
 }
 
+.mat-mdc-menu-panel.orcid-language-menu-panel {
+  .mat-mdc-menu-content:not(:empty) {
+    padding: 0;
+  }
+
+  .mat-mdc-menu-item.orcid-language-menu-item {
+    min-height: 56px;
+    line-height: 56px;
+    padding: 0 16px;
+    min-width: 160px;
+    letter-spacing: 0.25px;
+  }
+
+  .mat-mdc-menu-item.orcid-language-menu-item
+    .mat-mdc-menu-item-text
+    .row.space-between {
+    width: 100%;
+  }
+
+  .mat-mdc-menu-item.orcid-language-menu-item .mat-icon {
+    margin: 0;
+    height: auto;
+    width: auto;
+  }
+
+  .mat-mdc-menu-item.orcid-language-menu-item.orcid-language-menu-item-selected {
+    background-color: $ui-background-light;
+  }
+
+  .mat-mdc-menu-item.orcid-language-menu-item.cdk-focused,
+  .mat-mdc-menu-item.orcid-language-menu-item.cdk-program-focused,
+  .mat-mdc-menu-item.orcid-language-menu-item.cdk-keyboard-focused {
+    background-color: rgba(16, 152, 255, 0.05);
+    box-shadow: inset 0 0 0 2px #1098ff;
+  }
+}
+
 .mat-mdc-menu-panel.trusted-individuals {
   width: auto;
   max-width: initial;