From 534692ce9b22d316349281d73054d0aa0ff5c40c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 9 Mar 2021 15:48:16 +0200
Subject: [PATCH] Distinguish between active and hover in dialogs

---
 .../manual-annotation-dialog.component.html   |  2 +-
 apps/red-ui/src/assets/styles/red-select.scss | 21 ++++++++-----------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html b/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
index 392827321..9a872514b 100644
--- a/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
+++ b/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
@@ -38,7 +38,7 @@
             <div class="red-input-group required w-300" *ngIf="isDictionaryRequest && !isFalsePositiveRequest">
                 <label translate="manual-annotation.dialog.content.dictionary"></label>
 
-                <mat-select panelClass="description-select" formControlName="dictionary">
+                <mat-select formControlName="dictionary">
                     <mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
                     <mat-option
                         *ngFor="let dictionary of redactionDictionaries"
diff --git a/apps/red-ui/src/assets/styles/red-select.scss b/apps/red-ui/src/assets/styles/red-select.scss
index 1e5c2af1b..64853a80a 100644
--- a/apps/red-ui/src/assets/styles/red-select.scss
+++ b/apps/red-ui/src/assets/styles/red-select.scss
@@ -1,18 +1,15 @@
 @import 'red-variables';
 
-.mat-select-panel.description-select mat-option.mat-option {
-    height: unset;
+.mat-select-panel .mat-option {
+    font-family: Inter, sans-serif;
 
-    .mat-option-text.mat-option-text {
-        white-space: normal;
-        line-height: 16px;
-        margin: 12px auto;
-        font-weight: 500;
+    &:hover:not(.mat-option-disabled),
+    &:focus:not(.mat-option-disabled) {
+        background-color: $grey-6;
+    }
 
-        .description {
-            font-size: 12px;
-            font-weight: initial;
-            opacity: 0.6;
-        }
+    &.mat-selected:not(.mat-option-multiple) {
+        background-color: rgba($primary, 0.2);
+        color: $grey-1;
     }
 }