From 53949a0f655c3f9ec6ef0032befe1d42d4d6382e Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Thu, 27 Jan 2022 20:31:26 +0200
Subject: [PATCH] class.active instead of style.background

---
 .../annotation-references-list.component.html               | 4 ++--
 .../annotation-references-list.component.scss               | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.html
index a5a00454a..fe7f4ac8d 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.html
@@ -8,7 +8,7 @@
             <iqser-circle-button (action)="annotationReferencesService.hide()" icon="iqser:close"></iqser-circle-button>
         </div>
         <div class="annotations-container flex">
-            <div [style.background-color]="isSelected(annotation.id) ? 'var(--iqser-grey-8)' : ''" class="annotation-container">
+            <div [class.active]="isSelected(annotation.id)" class="annotation-container">
                 <div class="annotation-card-container flex">
                     <redaction-annotation-card [annotation]="annotation" [file]="file"></redaction-annotation-card>
                     <redaction-annotation-references-page-indicator
@@ -19,7 +19,7 @@
             <div
                 (click)="referenceClicked.emit(reference)"
                 *ngFor="let reference of annotationReferences"
-                [style.background-color]="isSelected(reference.id) ? 'var(--iqser-grey-8)' : ''"
+                [class.active]="isSelected(reference.id)"
                 class="annotation-container"
             >
                 <div class="annotation-card-container flex">
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss
index 3731b49ac..55585cd01 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss
@@ -1,4 +1,4 @@
-@use 'common-mixins' as mixins;
+@use 'variables';
 
 .references-dialog {
     position: fixed;
@@ -22,6 +22,10 @@
             width: 100%;
             border-top: 1px solid rgba(226, 228, 233, 0.9);
 
+            &.active {
+                background-color: variables.$grey-8;
+            }
+
             &:not(:first-child) {
                 cursor: pointer;
             }