Hover effect on comment indicator (#4545)

* Hover effect on comment indicator * Only show comment cursor when you are inserting a comment
concrete-utopia · Nov 22, 2023 · e45e28e · e45e28e
1 parent f5507f4
commit e45e28e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/editor/src/components/canvas/controls/comment-indicator.tsx b/editor/src/components/canvas/controls/comment-indicator.tsx
@@ -67,11 +67,15 @@ const CommentIndicatorInner = React.memo(() => {
         return (
           <div
             key={thread.id}
-            style={{
+            css={{
               position: 'absolute',
               top: point.y,
               left: point.x,
               width: 20,
+              '&:hover': {
+                transform: 'scale(1.15)',
+                transitionDuration: '0.1s',
+              },
             }}
             onClick={() => {
               dispatch([switchEditorMode(EditorModes.commentMode(point))])

diff --git a/editor/src/templates/editor-canvas.tsx b/editor/src/templates/editor-canvas.tsx
@@ -151,7 +151,10 @@ function getDefaultCursorForMode(mode: Mode): CSSCursor {
     case 'textEdit':
       return CSSCursor.Select
     case 'comment':
-      return CSSCursor.Comment
+      if (mode.location == null) {
+        return CSSCursor.Comment
+      }
+      return CSSCursor.Select
     case 'follow':
       return CSSCursor.Select
     default: