From 928a09b252dba854d39dc969e3203524b85d95cd 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/plan/CreateExamPage/QuestionListPreview.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/QuestionListPreview.vue
index e27b7792561..7b7532d87c0 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/QuestionListPreview.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/QuestionListPreview.vue
@@ -79,19 +79,14 @@
             </h3>
           </template>
           <template #content>
-            <div
-              v-show="isExpanded(index)"
-              :style="{
-                backgroundColor: $themePalette.grey.v_100,
-              }"
-            >
+            <div v-show="isExpanded(index)">
               <ul class="question-list">
                 <li v-for="(question, i) in section.questions">
                   <KButton
                     tabindex="0"
                     class="question-button"
                     appearance="basic-link"
-                    :class="{ selected: isSelected(question) }"
+                    :class="[listItemClass, isSelected(question) ? selectedListItemClass : '']"
                     :style="accordionStyleOverrides"
                     @click="handleQuestionChange(i, index)"
                   >
@@ -321,6 +316,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');
       },
@@ -425,14 +435,6 @@
     width: 100%;
     height: 100%;
     padding: 0.5em;
-
-    &:hover {
-      background-color: white;
-    }
-
-    &.selected {
-      background-color: white;
-    }
   }
 
 </style>