Fix for updating highlight colours, add proper copy icon

packages/web/components/elements/icons/CopyIcon.tsx

@@ -0,0 +1,39 @@
+/* eslint-disable functional/no-class */
+/* eslint-disable functional/no-this-expression */
+import { IconProps } from './IconProps'
+
+import React from 'react'
+
+export class CopyIcon extends React.Component<IconProps> {
+  render() {
+    const size = (this.props.size || 26).toString()
+    const color = (this.props.color || '#2A2A2A').toString()
+
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 26 26"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g>
+          <path
+            d="M8.66211 11.241C8.66211 10.6885 8.8816 10.1586 9.2723 9.76791C9.663 9.37721 10.1929 9.15771 10.7454 9.15771H19.0788C19.6313 9.15771 20.1612 9.37721 20.5519 9.76791C20.9426 10.1586 21.1621 10.6885 21.1621 11.241V19.5744C21.1621 20.1269 20.9426 20.6568 20.5519 21.0475C20.1612 21.4382 19.6313 21.6577 19.0788 21.6577H10.7454C10.1929 21.6577 9.663 21.4382 9.2723 21.0475C8.8816 20.6568 8.66211 20.1269 8.66211 19.5744V11.241Z"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M16.9941 9.15739V7.07406C16.9941 6.52152 16.7746 5.99162 16.3839 5.60092C15.9932 5.21022 15.4633 4.99072 14.9108 4.99072H6.57747C6.02494 4.99072 5.49504 5.21022 5.10433 5.60092C4.71363 5.99162 4.49414 6.52152 4.49414 7.07406V15.4074C4.49414 15.9599 4.71363 16.4898 5.10433 16.8805C5.49504 17.2712 6.02494 17.4907 6.57747 17.4907H8.66081"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+      </svg>
+    )
+  }
+}

packages/web/components/patterns/HighlightBar.tsx

@@ -20,6 +20,7 @@ import { LabelIcon } from '../elements/icons/LabelIcon'
 import { NotebookIcon } from '../elements/icons/NotebookIcon'
 import { highlightColor, highlightColors } from '../../lib/themeUpdater'
 import { useState } from 'react'
+import { CopyIcon } from '../elements/icons/CopyIcon'
 
 type PageCoordinates = {
   pageX: number
@@ -87,6 +88,7 @@ const Separator = styled('div', {
 
 function BarContent(props: HighlightBarProps): JSX.Element {
   const [hovered, setHovered] = useState<string | undefined>(undefined)
+  const size = props.displayAtBottom ? 35 : 25
 
   return (
     <HStack
@@ -94,8 +96,8 @@ function BarContent(props: HighlightBarProps): JSX.Element {
       alignment="center"
       css={{
         display: 'flex',
-        padding: '5px 10px',
-        gap: '5px',
+        padding: props.displayAtBottom ? '10px 15px' : '5px 10px',
+        gap: props.displayAtBottom ? '15px' : '5px',
         width: props.displayAtBottom ? '100%' : 'auto',
       }}
     >
@@ -127,16 +129,16 @@ function BarContent(props: HighlightBarProps): JSX.Element {
             {props.isNewHighlight || props.highlightColor != color ? (
               <Circle
                 key={color}
-                width={25}
-                height={25}
+                width={size}
+                height={size}
                 color={highlightColor(color)}
                 weight="fill"
               />
             ) : (
               <CheckCircle
                 key={color}
-                width={25}
-                height={25}
+                width={size}
+                height={size}
                 color={highlightColor(color)}
                 weight="fill"
               />
@@ -159,7 +161,7 @@ function BarContent(props: HighlightBarProps): JSX.Element {
             }}
           >
             <LabelIcon
-              size={25}
+              size={size}
               color={
                 hovered == 'labels'
                   ? theme.colors.thTextContrast.toString()
@@ -182,7 +184,7 @@ function BarContent(props: HighlightBarProps): JSX.Element {
         }}
       >
         <NotebookIcon
-          size={25}
+          size={size}
           color={
             hovered == 'note'
               ? theme.colors.thTextContrast.toString()
@@ -201,9 +203,8 @@ function BarContent(props: HighlightBarProps): JSX.Element {
           setHovered(undefined)
         }}
       >
-        <CopySimple
-          width={25}
-          height={25}
+        <CopyIcon
+          size={size}
           color={
             hovered == 'copy'
               ? theme.colors.thTextContrast.toString()

packages/web/components/templates/article/HighlightNoteModal.tsx

@@ -40,6 +40,7 @@ export function HighlightNoteModal(
       const result = await updateHighlightMutation({
         highlightId: props.highlight?.id,
         annotation: noteContent,
+        color: props.highlight?.color,
       })
 
       if (result) {
@@ -48,6 +49,7 @@ export function HighlightNoteModal(
       } else {
         showErrorToast('Error updating your note', { position: 'bottom-right' })
       }
+      document.dispatchEvent(new Event('highlightsUpdated'))
     }
     if (!props.highlight && props.createHighlightForNote) {
       const result = await props.createHighlightForNote(noteContent)

packages/web/components/templates/article/HighlightsLayer.tsx

@@ -215,6 +215,27 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
     [highlights, highlightLocations]
   )
 
+  const updateHighlightColor = useCallback(
+    (highlight: Highlight, color: string) => {
+      const initial = highlight.color
+      highlight.color = color
+      updateHighlightsCallback(highlight)
+      ;(async () => {
+        const update = await props.articleMutations.updateHighlightMutation({
+          highlightId: highlight.id,
+          color: color,
+        })
+        if (!update) {
+          highlight.color = initial
+          updateHighlightsCallback(highlight)
+          showErrorToast('Error updating highlight color')
+        }
+        document.dispatchEvent(new Event('highlightsUpdated'))
+      })()
+    },
+    [props, highlights, highlightLocations, updateHighlightsCallback]
+  )
+
   const openNoteModal = useCallback(
     (inputs: HighlightActionProps) => {
       // First try to send a signal to the ios app
@@ -242,6 +263,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
         }
         setHighlightModalAction(inputs)
       }
+      document.dispatchEvent(new Event('highlightsUpdated'))
     },
     [props.highlightBarDisabled, createHighlightFromSelection]
   )
@@ -462,9 +484,10 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
           })
           break
         case 'updateColor':
-          if (focusedHighlight) {
-            focusedHighlight.color = param
-            await updateHighlightsCallback(focusedHighlight)
+          if (focusedHighlight && param) {
+            updateHighlightColor(focusedHighlight, param)
+          } else {
+            showErrorToast('Error updating color')
           }
           break
         case 'comment':
@@ -540,6 +563,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
       removeHighlightCallback,
       selectionData,
       setSelectionData,
+      updateHighlightColor,
       confirmDeleteHighlightWithNoteId,
     ]
   )
@@ -709,6 +733,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
           dispatchHighlightError('saveAnnotation', error)
         }
       }
+      document.dispatchEvent(new Event('highlightsUpdated'))
     }
 
     document.addEventListener('annotate', annotate)

packages/web/lib/networking/mutations/updateHighlightMutation.ts

@@ -5,6 +5,7 @@ export type UpdateHighlightInput = {
   highlightId: string
   annotation?: string
   sharedAt?: string
+  color?: string
 }
 
 type UpdateHighlightOutput = {