Fix reply counter color in hovered comment indicator (#4772)

* Fix reply counter color in hovered comment indicator * remove avatar error handling logic
concrete-utopia · Jan 25, 2024 · cf3c150 · cf3c150
1 parent 25260fa
commit cf3c150
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 23 deletions.
diff --git a/editor/src/components/canvas/controls/comment-indicator.tsx b/editor/src/components/canvas/controls/comment-indicator.tsx
@@ -336,10 +336,6 @@ const CommentIndicator = React.memo(({ thread }: CommentIndicatorProps) => {
     ],
   )
 
-  // This is a hack: when the comment is unread, we show a dark background, so we need light foreground colors.
-  // So we trick the Liveblocks Comment component and lie to it that the theme is dark mode.
-  const dataThemeProp = isRead ? {} : { 'data-theme': 'dark' }
-
   const style = useIndicatorStyle(dragPosition ?? location, {
     isRead: isRead,
     resolved: thread.metadata.resolved,
@@ -366,7 +362,7 @@ const CommentIndicator = React.memo(({ thread }: CommentIndicatorProps) => {
           overflow: 'auto',
           background: 'transparent',
         }}
-        {...dataThemeProp}
+        forceDarkMode={!isRead}
       />
     </div>
   )
@@ -572,10 +568,11 @@ function useHover() {
 type CommentIndicatorWrapper = {
   thread: ThreadData<ThreadMetadata>
   expanded: boolean
+  forceDarkMode: boolean
 } & CommentWrapperProps
 
 const CommentIndicatorWrapper = React.memo((props: CommentIndicatorWrapper) => {
-  const { thread, expanded, user, ...commentProps } = props
+  const { thread, expanded, user, forceDarkMode, ...commentProps } = props
 
   const [avatarRef, animateAvatar] = useAnimate()
 
@@ -594,8 +591,14 @@ const CommentIndicatorWrapper = React.memo((props: CommentIndicatorWrapper) => {
     )
   }, [expanded, avatarRef, animateAvatar])
 
+  // This is a hack: when the comment is unread, we show a dark background, so we need light foreground colors.
+  // So we trick the Liveblocks Comment component and lie to it that the theme is dark mode.
+  const updatedCommentProps = forceDarkMode
+    ? { ...commentProps, 'data-theme': 'dark' }
+    : commentProps
+
   if (user == null) {
-    return <Comment {...commentProps} />
+    return <Comment {...updatedCommentProps} />
   }
 
   return (
@@ -643,8 +646,8 @@ const CommentIndicatorWrapper = React.memo((props: CommentIndicatorWrapper) => {
             }}
             transition={{ duration: animDuration }}
           >
-            <Comment {...commentProps} />
-            <CommentRepliesCounter thread={thread} />
+            <Comment {...updatedCommentProps} />
+            <CommentRepliesCounter thread={thread} forceDarkMode={forceDarkMode} />
           </motion.div>,
         )}
       </AnimatePresence>

diff --git a/editor/src/components/canvas/controls/comment-replies-counter.tsx b/editor/src/components/canvas/controls/comment-replies-counter.tsx
@@ -2,14 +2,39 @@ import React from 'react'
 import type { ThreadData } from '@liveblocks/client'
 import type { ThreadMetadata } from '../../../../liveblocks.config'
 import { useColorTheme } from '../../../uuiui'
+import { darkColorThemeCssVariables } from '../../../uuiui/styles/theme/utopia-theme'
+import { dark } from '../../../uuiui/styles/theme/dark'
+import { useTheme } from '@emotion/react'
+import { Substores, useEditorState } from '../../editor/store/store-hook'
+import { getCurrentTheme } from '../../editor/store/editor-state'
 
 interface CommentRepliesCounterProps {
   thread: ThreadData<ThreadMetadata>
+  forceDarkMode?: boolean
 }
 
 export const CommentRepliesCounter = React.memo((props: CommentRepliesCounterProps) => {
   const colorTheme = useColorTheme()
 
+  const theme = useEditorState(
+    Substores.userState,
+    (store) => getCurrentTheme(store.userState),
+    'CommentRepliesCounter theme',
+  )
+
+  const color = React.useMemo(() => {
+    // If we don't force dark mode because of a blue background, we can just use foreground color
+    if (!props.forceDarkMode) {
+      return colorTheme.fg6.value
+    }
+    // In dark mode we need a lighter foreground which is visible well on blue background
+    if (theme === 'dark') {
+      return colorTheme.fg2.value
+    }
+    // In light mode we need a light background color, so it is visible on blue background
+    return colorTheme.bg3.value
+  }, [colorTheme, theme, props.forceDarkMode])
+
   const repliesCount = props.thread.comments.filter((c) => c.deletedAt == null).length - 1
 
   if (repliesCount <= 0) {
@@ -21,7 +46,7 @@ export const CommentRepliesCounter = React.memo((props: CommentRepliesCounterPro
       style={{
         paddingLeft: 44,
         fontSize: 9,
-        color: colorTheme.fg6.value,
+        color: color,
         marginBottom: 8,
       }}
     >

diff --git a/editor/src/components/user-bar.tsx b/editor/src/components/user-bar.tsx
@@ -453,18 +453,7 @@ const AvatarPicture = React.memo((props: AvatarPictureProps) => {
 
   const { initials, size } = props
 
-  const [pictureNotFound, setPictureNotFound] = React.useState(false)
-
-  React.useEffect(() => {
-    setPictureNotFound(false)
-  }, [url])
-
-  const onPictureError = React.useCallback(() => {
-    console.warn('cannot get picture', url)
-    setPictureNotFound(true)
-  }, [url])
-
-  if (url == null || pictureNotFound) {
+  if (url == null) {
     return <span>{initials}</span>
   }
   return (
@@ -479,7 +468,6 @@ const AvatarPicture = React.memo((props: AvatarPictureProps) => {
       }}
       src={url}
       referrerPolicy='no-referrer'
-      onError={onPictureError}
       draggable={false}
     />
   )