From e45e28e0a9f8008f7f72fc8cc73d43f141872f07 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Wed, 22 Nov 2023 15:38:40 +0100
Subject: [PATCH] Hover effect on comment indicator (#4545)

* Hover effect on comment indicator

* Only show comment cursor when you are inserting a comment
---
 editor/src/components/canvas/controls/comment-indicator.tsx | 6 +++++-
 editor/src/templates/editor-canvas.tsx                      | 5 ++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/editor/src/components/canvas/controls/comment-indicator.tsx b/editor/src/components/canvas/controls/comment-indicator.tsx
index c13a8c7636f1..59ce50b2e381 100644
--- 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
index 6a6d0c14caa3..f5e62694e466 100644
--- 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: