From cd6091dd71c7c5166711ea28115cc235d76b53f6 Mon Sep 17 00:00:00 2001
From: MisRob <robosovam@gmail.com>
Date: Mon, 8 Jul 2024 20:29:24 +0200
Subject: [PATCH] Fix colors of list items

and remove hardcoded colors
in favor of theme tokens.

Fixes https://github.com/learningequality/kolibri/issues/12425
---
 .../CreateExamPage/QuestionListPreview.vue    | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/QuestionListPreview.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/QuestionListPreview.vue
index e2352c94637..6ec3a753371 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/QuestionListPreview.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/QuestionListPreview.vue
@@ -79,12 +79,7 @@
             </h3>
           </template>
           <template #content>
-            <div
-              v-show="isExpanded(index)"
-              :style="{
-                backgroundColor: $themePalette.grey.v_200,
-              }"
-            >
+            <div v-show="isExpanded(index)">
               <ul class="question-list">
                 <li
                   v-for="(question, i) in section.questions"
@@ -94,7 +89,7 @@
                     tabindex="0"
                     class="question-button"
                     appearance="basic-link"
-                    :class="{ selected: isSelected(question) }"
+                    :class="[listItemClass, isSelected(question) ? selectedListItemClass : '']"
                     :style="accordionStyleOverrides"
                     @click="handleQuestionChange(i, index)"
                   >
@@ -320,6 +315,21 @@
           textDecoration: 'none',
         };
       },
+      listItemClass() {
+        return this.$computedClass({
+          ':hover': {
+            backgroundColor: this.$themePalette.grey.v_100,
+          },
+        });
+      },
+      selectedListItemClass() {
+        return this.$computedClass({
+          backgroundColor: this.$themePalette.grey.v_100,
+          ':hover': {
+            backgroundColor: this.$themePalette.grey.v_200,
+          },
+        });
+      },
       resourceMissingText() {
         return this.coreString('resourceNotFoundOnDevice');
       },
@@ -414,14 +424,6 @@
     width: 100%;
     height: 100%;
     padding: 0.5em;
-
-    &:hover {
-      background-color: white;
-    }
-
-    &.selected {
-      background-color: white;
-    }
   }
 
 </style>