Fix colors of list items

and remove hardcoded colors in favor of theme tokens. Fixes #12425
learningequality · Jul 8, 2024 · 928a09b · 928a09b
1 parent 49b9044
commit 928a09b
Showing 1 changed file with 17 additions and 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
@@ -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>