Comments design refinement

src/stories/chat/index.stories.tsx

@@ -9,6 +9,7 @@ import { Grid } from "../grid/grid";
 import { Row } from "../grid/row";
 import { ChatEditorArgs, SuggestedUser } from "./_types";
 import { Comment } from "./parts/comment";
+import { theme } from "../theme";
 
 const ButtonsContainer = styled.div`
   padding: 0px 16px;
@@ -46,10 +47,10 @@ const ChatPanel = ({ background, ...args }: EditorStoryArgs) => {
       <Chat.Input {...args}>{args.editorText}</Chat.Input>
       <Chat.Footer showShortcut>
         <ButtonsContainer>
-          <Button isBasic onClick={() => editor?.commands.clearContent()}>
+          <Button size="small" style={{fontSize:theme.fontSizes.sm}} isBasic onClick={() => editor?.commands.clearContent()}>
             Cancel
           </Button>
-          <Button onClick={triggerSave}>Save</Button>
+          <Button size="small" style={{fontSize:theme.fontSizes.sm}} isAccent isPrimary onClick={triggerSave}>Save</Button>
         </ButtonsContainer>
       </Chat.Footer>
     </Chat>

src/stories/chat/parts/bar.tsx

@@ -2,14 +2,19 @@ import styled from "styled-components";
 import { Tooltip } from "../../tooltip";
 import { ChatEditorArgs } from "../_types";
 import { Editor } from "@tiptap/react";
-import { EditorButton } from "./editorButton";
+import { isMac } from "../../theme/utils";
+import { ReactComponent as BoldIcon } from "../../../assets/icons/bold-fill.svg";
+import { ReactComponent as ItalicIcon } from "../../../assets/icons/italic-fill.svg";
+import { ReactComponent as MentionIcon } from "../../../assets/icons/at-fill.svg";
+import { IconButton } from "../../buttons/icon-button";
 
 const MenuContainer = styled.div`
-  padding: ${({ theme }) => theme.space.xxs} 0;
+  padding: ${({ theme }) => theme.space.xs} 0;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
+  gap: ${({ theme }) => theme.space.xxs};
 `;
 
 const VerticalDivider = styled.div`
@@ -28,32 +33,87 @@ const CommentBar = ({
 
   if(!editor) return null;
 
+  const getIcon = (type: "bold" | "italic" | "mention") => {
+    switch (type) {
+      case "bold":
+        return <BoldIcon />;
+      case "italic":
+        return <ItalicIcon />;
+      case "mention":
+        return <MentionIcon />;
+      default:
+        return null;
+    }
+  };
+
+  const handleClick = (type: "bold" | "italic" | "mention") => {
+    switch (type) {
+      case "bold":
+        return editor.chain().focus().toggleBold().run();
+      case "italic":
+        return editor.chain().focus().toggleItalic().run();
+      case "mention":
+        const { from } = editor.state.selection;
+        const char = from > 1 ? " @" : "@";
+        return editor.commands.insertContent(char);
+      default:
+        return;
+    }
+  };
+
   return (
-    <MenuContainer>
+    <MenuContainer id="menu-container">
       <Tooltip
-        content={i18n?.menu?.bold ?? "Bold text"}
+        content={`${i18n?.menu?.bold ?? "Bold text"} ${isMac() ? "Cmd" : "Ctrl"} + B`}
         placement="top"
         type="light"
         size="small"
+        hasArrow={false}
       >
-        <EditorButton editor={editor} type="bold" />
+        <IconButton
+          size={"small"}
+          isBasic={!editor.isActive("bold")}
+          isPrimary={editor.isActive("bold")}
+          isPill={false}
+          onClick={() => handleClick("bold")}
+        >
+          {getIcon("bold")}
+        </IconButton>
       </Tooltip>
       <Tooltip
-        content={i18n?.menu?.italic ?? "Italic text"}
+        content={`${i18n?.menu?.italic ?? "Italic text"} ${isMac() ? "Cmd" : "Ctrl"} + I`}
         placement="top"
         type="light"
         size="small"
+        hasArrow={false}
       >
-        <EditorButton editor={editor} type="italic" />
+        <IconButton
+          size={"small"}
+          isBasic={!editor.isActive("italic")}
+          isPrimary={editor.isActive("italic")}
+          isPill={false}
+          onClick={() => handleClick("italic")}
+        >
+          {getIcon("italic")}
+        </IconButton>
       </Tooltip>
       <VerticalDivider />
       <Tooltip
         content={i18n?.menu?.mention ?? "Add a mention"}
         placement="top"
         type="light"
         size="small"
+        hasArrow={false}
       >
-        <EditorButton editor={editor} type="mention" />
+        <IconButton
+          size={"small"}
+          isBasic={!editor.isActive("mention")}
+          isPrimary={editor.isActive("mention")}
+          isPill={false}
+          onClick={() => handleClick("mention")}
+        >
+          {getIcon("mention")}
+        </IconButton>
       </Tooltip>
     </MenuContainer>
   );

src/stories/chat/parts/footer.tsx

@@ -5,7 +5,7 @@ import { SendShortcut } from "./sendShortcut";
 const Footer = styled.div<{ showShortcut?: boolean }>`
   display: flex;
   flex-direction: row;
-  padding: ${({ theme }) => `${theme.space.sm} 0px`};
+  padding: ${({ theme }) => `${theme.space.xs} 0px ${theme.space.sm}`};
   align-items: center;
   margin: ${({ theme }) => `0 -${theme.space.base * 4}px`};
   justify-content: ${({ showShortcut }) =>

src/stories/chat/parts/sendShortcut.tsx

@@ -6,8 +6,9 @@ import { isMac } from "../../theme/utils";
 const ShortcutContainer = styled.div`
   display: flex;
   flex-direction: row;
-  padding: ${({ theme }) => `${theme.space.sm} ${theme.space.base * 4}px`};
+  padding: ${({ theme }) => `0 ${theme.space.base * 4}px`};
   background-color: ${({ theme }) => theme.palette.grey[100]};
+  font-size: ${({ theme }) => theme.fontSizes.sm};
 `;
 
 const Text = styled(SM)`