Minor fixes related to the comments feature (#5551)

app/client/src/comments/CommentCard/CommentCard.tsx

@@ -204,17 +204,20 @@ const reduceReactions = (
         (res: Record<string, ComponentReaction>, reaction: Reaction) => {
           const { byUsername, emoji } = reaction;
           const sameAsCurrent = byUsername === username;
-          const user = sameAsCurrent ? "You" : byUsername;
           if (res[reaction.emoji]) {
             res[reaction.emoji].count++;
-            res[reaction.emoji].users = Array.from(
-              new Set([...(res[reaction.emoji].users || []), user]),
-            );
+            if (!sameAsCurrent) {
+              res[reaction.emoji].users = [
+                ...(res[reaction.emoji].users || []),
+                byUsername,
+              ];
+            }
           } else {
+            const users = !sameAsCurrent ? [byUsername] : [];
             res[emoji] = {
               count: 1,
               reactionEmoji: emoji,
-              users: [user],
+              users,
             } as ComponentReaction;
           }
 

app/client/src/comments/CommentsShowcaseCarousel/CommentsCarouselModal.tsx

@@ -16,6 +16,7 @@ function ShowcaseCarouselModal({ children }: { children: React.ReactNode }) {
         // TODO (rishabh) handle close
       }}
       overlayClassName="comments-onboarding-carousel"
+      portalClassName="comments-onboarding-carousel-portal"
       scrollContents
       width={325}
       zIndex={Layers.appComments}

app/client/src/components/ads/EmojiReactions.tsx

@@ -60,6 +60,7 @@ function ReactionsBy(props: { reaction: Reaction }) {
   const users = reaction?.users.slice(0, 5);
 
   if (isSliced) users.push("...");
+  if (reaction.active) users.unshift("You");
 
   return <ReactionsByContainer>{users.join(", ")}</ReactionsByContainer>;
 }
@@ -117,6 +118,7 @@ function EmojiReactions({
         };
         if (reactions[emojiData].count === 0) delete reactions[emojiData];
       } else {
+        addOrRemove = ReactionOperation.ADD;
         reactions[emojiData] = {
           active: true,
           reactionEmoji: emojiData,
@@ -138,6 +140,7 @@ function EmojiReactions({
       addOrRemove as ReactionOperation,
     );
   };
+
   return (
     <Container>
       {!hideReactions &&
@@ -145,6 +148,7 @@ function EmojiReactions({
           <TooltipComponent
             boundary={"viewport"}
             content={<ReactionsBy reaction={reaction} />}
+            disabled={!reaction.users || reaction.users.length === 0}
             key={reaction.reactionEmoji}
             modifiers={{ preventOverflow: { enabled: true } }}
           >

app/client/src/components/ads/Tooltip.tsx

@@ -8,6 +8,7 @@ type Variant = "dark" | "light";
 
 type TooltipProps = CommonComponentProps & {
   content: JSX.Element | string;
+  disabled?: boolean;
   position?: Position;
   children: JSX.Element | React.ReactNode;
   variant?: Variant;
@@ -30,6 +31,7 @@ function TooltipComponent(props: TooltipProps) {
       autoFocus={props.autoFocus}
       boundary={props.boundary || "scrollParent"}
       content={props.content}
+      disabled={props.disabled}
       hoverOpenDelay={props.hoverOpenDelay}
       isOpen={props.isOpen}
       minimal={props.minimal}

app/client/src/components/designSystems/blueprint/ModalComponent.tsx

@@ -71,6 +71,7 @@ export type ModalComponentProps = {
   right?: number;
   hasBackDrop?: boolean;
   zIndex?: number;
+  portalClassName?: string;
 };
 
 /* eslint-disable react/display-name */
@@ -99,7 +100,7 @@ export function ModalComponent(props: ModalComponentProps) {
       hasBackdrop={false}
       isOpen={props.isOpen}
       onClose={props.onClose}
-      portalClassName="bp3-modal-widget"
+      portalClassName={`bp3-modal-widget ${props.portalClassName}`}
       usePortal
     >
       <Container

app/client/src/constants/DefaultTheme.tsx

@@ -937,6 +937,8 @@ type ColorType = {
     cardHoverBackground: string;
     introTitle: string;
     introContent: string;
+    modeIconCircleStroke: string;
+    activeModeIconCircleStroke: string;
   };
   mentionSuggestion: {
     nameText: string;
@@ -1112,6 +1114,8 @@ const comments = {
   activeModeIcon: "#F0F0F0",
   modeIcon: "#6D6D6D",
   cardHoverBackground: "#FAFAFA",
+  modeIconCircleStroke: "#222222",
+  activeModeIconCircleStroke: "#090707",
 };
 
 const auth: any = {
@@ -1646,7 +1650,14 @@ export const light: ColorType = {
   mentionsInput,
   helpModal,
   globalSearch,
-  comments,
+  comments: {
+    ...comments,
+    activeModeBackground: "#EBEBEB",
+    activeModeIcon: "#4B4848",
+    modeIcon: "#858282",
+    modeIconCircleStroke: "#fff",
+    activeModeIconCircleStroke: "#EBEBEB",
+  },
   selected: lightShades[12],
   header: {
     separator: "#E0DEDE",

app/client/src/globalStyles/popover.ts

@@ -1,6 +1,7 @@
 import { createGlobalStyle } from "styled-components";
 import { Classes } from "@blueprintjs/core";
 import { Classes as PopoverClasses } from "@blueprintjs/popover2";
+import { Layers } from "constants/Layers";
 
 export const PopoverStyles = createGlobalStyle`
   .${Classes.POPOVER}, .${PopoverClasses.POPOVER2} {
@@ -21,4 +22,7 @@ export const PopoverStyles = createGlobalStyle`
   .comments-onboarding-carousel .${Classes.OVERLAY_CONTENT} {
     filter: drop-shadow(0px 6px 20px rgba(0, 0, 0, 0.15));
   }
+  .bp3-modal-widget.comments-onboarding-carousel-portal {
+    z-index: ${Layers.help} !important; 
+  }
 `;

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

@@ -43,7 +43,7 @@ const getShowCommentsButtonToolTip = () => {
 const setShowCommentsButtonToolTip = (value = "") =>
   localStorage.setItem("ShowCommentsButtonToolTip", value);
 
-const ModeButton = styled.div<{ active: boolean }>`
+const ModeButton = styled.div<{ active: boolean; type: string }>`
   position: relative;
   display: flex;
   align-items: center;
@@ -58,13 +58,32 @@ const ModeButton = styled.div<{ active: boolean }>`
       : "transparent"};
 
   svg path {
+    fill: ${(props) =>
+      props.type !== "fill"
+        ? "transparent"
+        : props.active
+        ? props.theme.colors.comments.activeModeIcon
+        : props.theme.colors.comments.modeIcon};
+    stroke: ${(props) =>
+      props.type !== "stroke"
+        ? "transparent"
+        : props.active
+        ? props.theme.colors.comments.activeModeIcon
+        : props.theme.colors.comments.modeIcon};
+  }
+
+  svg rect:not(:first-child) {
     fill: ${(props) =>
       props.active
         ? props.theme.colors.comments.activeModeIcon
         : props.theme.colors.comments.modeIcon};
   }
+
   svg circle {
-    stroke: transparent;
+    stroke: ${(props) =>
+      props.active
+        ? props.theme.colors.comments.activeModeIconCircleStroke
+        : props.theme.colors.comments.modeIconCircleStroke};
   }
 `;
 
@@ -212,7 +231,12 @@ function CommentModeBtn({
   const CommentModeIcon = showUnreadIndicator ? CommentModeUnread : CommentMode;
 
   return (
-    <ModeButton active={isCommentMode} onClick={handleSetCommentModeButton}>
+    <ModeButton
+      active={isCommentMode}
+      className="t--switch-comment-mode-on"
+      onClick={handleSetCommentModeButton}
+      type="stroke"
+    >
       <TooltipComponent
         content={
           <>
@@ -273,6 +297,7 @@ function ToggleCommentModeButton() {
           <ModeButton
             active={!isCommentMode}
             onClick={() => setCommentModeInUrl(false)}
+            type="fill"
           >
             <ViewOrEditMode mode={mode} />
           </ModeButton>