Update reset comment mode icon at the viewer

app/client/src/pages/Editor/ToggleModeButton.tsx

@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 import TooltipComponent from "components/ads/Tooltip";
 import TourTooltipWrapper from "components/ads/tour/TourTooltipWrapper";
 import { ReactComponent as Pen } from "assets/icons/comments/pen.svg";
+import { ReactComponent as Eye } from "assets/icons/comments/eye.svg";
 import { ReactComponent as CommentModeUnread } from "assets/icons/comments/comment-mode-unread-indicator.svg";
 import { ReactComponent as CommentMode } from "assets/icons/comments/chat.svg";
 import { Indices } from "constants/Layers";
@@ -26,6 +27,8 @@ import { TourType } from "entities/Tour";
 import useProceedToNextTourStep from "utils/hooks/useProceedToNextTourStep";
 import { getCommentsIntroSeen } from "utils/storage";
 import { User } from "constants/userConstants";
+import { AppState } from "reducers";
+import { APP_MODE } from "reducers/entityReducers/appReducer";
 
 const ModeButton = styled.div<{ active: boolean }>`
   position: relative;
@@ -117,6 +120,40 @@ export const setCommentModeInUrl = (isCommentMode: boolean) => {
   });
 };
 
+function EditModeReset() {
+  return (
+    <TooltipComponent
+      content={
+        <>
+          Edit Mode
+          <span style={{ color: "#fff", marginLeft: 20 }}>V</span>
+        </>
+      }
+      hoverOpenDelay={1000}
+      position={Position.BOTTOM}
+    >
+      <Pen />
+    </TooltipComponent>
+  );
+}
+
+function ViewModeReset() {
+  return (
+    <TooltipComponent
+      content={
+        <>
+          View Mode
+          <span style={{ color: "#fff", marginLeft: 20 }}>V</span>
+        </>
+      }
+      hoverOpenDelay={1000}
+      position={Position.BOTTOM}
+    >
+      <Eye />
+    </TooltipComponent>
+  );
+}
+
 function ToggleCommentModeButton() {
   const commentsEnabled = useSelector(areCommentsEnabledForUserAndAppSelector);
   const isCommentMode = useSelector(commentModeSelector);
@@ -129,6 +166,8 @@ function ToggleCommentModeButton() {
     0,
   );
 
+  const mode = useSelector((state: AppState) => state.entities.app.mode);
+
   if (!commentsEnabled) return null;
 
   const CommentModeIcon = showUnreadIndicator ? CommentModeUnread : CommentMode;
@@ -168,18 +207,7 @@ function ToggleCommentModeButton() {
             active={!isCommentMode}
             onClick={() => setCommentModeInUrl(false)}
           >
-            <TooltipComponent
-              content={
-                <>
-                  Edit Mode
-                  <span style={{ color: "#fff", marginLeft: 20 }}>V</span>
-                </>
-              }
-              hoverOpenDelay={1000}
-              position={Position.BOTTOM}
-            >
-              <Pen />
-            </TooltipComponent>
+            {mode === APP_MODE.EDIT ? <EditModeReset /> : <ViewModeReset />}
           </ModeButton>
           <ModeButton
             active={isCommentMode}