Added in styling for example menu items

openassessment/templates/openassessmentblock/edit/ai/oa_edit_ai_example_menu_item.html

 {% load i18n %}
 {% spaceless %}
-<li class="openassessment_ai_example_menu_item" data-example="{{ example.name }}">
+<li class="openassessment_ai_example_menu_item is--faded" data-example="{{ example.name }}">
     <h2 class="openassessment_ai_example_menu_item_name">{{ example.label }}</h2>
     <div class="openassessment_ai_example_remove_button">
         <h2>Remove</h2>

openassessment/xblock/static/js/src/studio/oa_container_item.js

@@ -63,11 +63,11 @@ OpenAssessment.ItemUtilities = {
         $(element).text(finalLabel);
     },
 
-    hideAllShowOne: function(element, selectorToHide, selectorToShow){
+    addClassToAllButOne: function(element, selectorToHide, selectorToShow, className){
         $(selectorToHide, element).each(function() {
-            $(this).addClass('is--hidden');
+            $(this).addClass(className);
         });
-        $(selectorToShow).removeClass('is--hidden');
+        $(selectorToShow, element).removeClass(className);
     }
 };
 
@@ -723,10 +723,17 @@ OpenAssessment.AIExampleMenuItem.prototype = {
         var exampleName = $(this.element).attr('data-example');
         var view = this;
         $(this.element).click(function() {
-            OpenAssessment.ItemUtilities.hideAllShowOne(
+            OpenAssessment.ItemUtilities.addClassToAllButOne(
                 $(view.element).closest('#openassessment_ai_editor_menu_and_editor'),
                 '.openassessment_ai_editor_single_visibility',
-                '.openassessment_ai_example[data-example="' + exampleName + '"]'
+                '.openassessment_ai_example[data-example="' + exampleName + '"]',
+                'is--hidden'
+            );
+            OpenAssessment.ItemUtilities.addClassToAllButOne(
+                $(view.element).closest('#openassessment_ai_editor_menu_and_editor'),
+                '.openassessment_ai_example_menu_item',
+                '.openassessment_ai_example_menu_item[data-example="' + exampleName + '"]',
+                'is--faded'
             );
         });
     },

openassessment/xblock/static/js/src/studio/oa_edit_assessment.js

@@ -551,7 +551,6 @@ OpenAssessment.EditExampleBasedAssessmentView = function(element) {
 
     $("#include_ai_assessment", this.element).click(function() {
         $('#oa_editor_tab_ai').toggleClass('is--hidden');
-        debugger;
     });
 };
 

openassessment/xblock/static/sass/oa/utilities/_developer.scss

@@ -1233,7 +1233,7 @@
 
       #openassessment_ai_menu_title{
         text-transform: uppercase;
-        color: #838486;
+        color: #626364;
         font-size: 80%;
         text-align: center;
         padding: 5px;
@@ -1283,6 +1283,8 @@
       overflow-y: hidden;
       overflow-x: scroll;
       border-bottom: 1px solid $edx-gray-l3;
+      background-color: #626364;
+      color: white;
 
       .openassessment_ai_example_menu_item_name {
         display: inline-block;
@@ -1324,8 +1326,14 @@
       }
     }
 
-    .openassessment_ai_example_menu_item:hover{
-      background-color: $edx-gray-l5;
+    .openassessment_ai_example_menu_item.is--faded:hover{
+      background-color: $edx-gray-l4;
+      cursor: pointer;
+    }
+
+    .openassessment_ai_example_menu_item.is--faded{
+      background-color: white;
+      color: #626364;
       cursor: pointer;
     }