Update sidebar on color change

Resolves MS-894 #complete

client/cypress/e2e/frontend/modules/highlights.cy.ts

@@ -195,11 +195,11 @@ const createHighlight = (text: string, content = false) => {
   cy.getByDataCy('highlight-mark').should('have.length', 1);
 };
 
-const updateHighlight = (text) => {
-  cy.getByDataCy('highlight-beta').click();
+const updateHighlight = (text, color = 'beta') => {
+  cy.getByDataCy(`highlight-${color}`).click();
   cy.wait('@UpdateHighlight');
   cy.getByDataCy('highlight-mark').should('contain', text);
-  cy.getByDataCy('highlight-mark').should('have.class', 'highlight--beta');
+  cy.getByDataCy('highlight-mark').should('have.class', `highlight--${color}`);
   //
   // we only want to have one of each element and not accidentally create multiple
   cy.getByDataCy('highlight-popover').should('have.length', 1); // there should only be one popover
@@ -274,7 +274,8 @@ describe('Highlights', () => {
     cy.getByDataCy('highlight-popover').should('be.visible');
     cy.getByDataCy('highlight-sidebar').should('be.visible');
 
-    // todo: change the color
+    updateHighlight(highlightedText, 'gamma');
+    cy.getByDataCy('highlight-in-sidebar').should('have.class', 'highlight--gamma');
     // todo: write a note
     // todo: click the note icon without first setting a color
 

client/src/components/highlights/HighlightPopover.vue

@@ -16,6 +16,7 @@
       ></div>
       <div
         class="highlight-popover__color highlight-popover__color--blue"
+        data-cy="highlight-gamma"
         @click="$emit('choose-color', 'gamma')"
       ></div>
     </section>

client/src/helpers/highlight.ts

@@ -316,7 +316,7 @@ const markClickListenerCurry =
 
           // we need to refresh the sidebar
           highlightSidebar.open({
-            highlight,
+            highlight: newHighlight,
             onUpdateText: onUpdateTextCurry(newHighlight),
           });
         } catch (error) {