Merge pull request #288 from AppQuality/develop

Improve chat spacing and save behaviour
AppQuality · Dec 29, 2023 · 95ecafd · 95ecafd
2 parents 54b1471 + 6969349
commit 95ecafd
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 12 deletions.
diff --git a/src/stories/chat/parts/commentBox.tsx b/src/stories/chat/parts/commentBox.tsx
@@ -23,14 +23,14 @@ import { useChatContext } from "../context/chatContext";
 const ChatBoxContainer = styled.div`
   display: flex;
   border-top: 1px solid ${({ theme }) => theme.palette.grey[200]};
-  margin: ${({ theme }) => `0 -${theme.space.md}`};
-  padding: ${({ theme }) => theme.space.md};
+  margin: ${({ theme }) => `0 -${theme.space.base * 4}px`};
+  padding: ${({ theme }) => `${theme.space.base * 4}px ${theme.space.sm} 0`};
 `;
 
 const EditorContainer = styled(FauxInput)<ChatArgs>`
   margin-left: ${({ theme }) => theme.space.sm};
+  padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};
   .ProseMirror {
-    padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};
     background-color: #fff;
     min-height: 36px;
     outline: none;
@@ -59,11 +59,12 @@ export const CommentBox = ({
 }: PropsWithChildren<ChatEditorArgs>) => {
   const { children, hasInlineMenu, bubbleOptions, author } = props;
 
-  const { setEditor, triggerSave } = useChatContext();
+  const { editor, setEditor, triggerSave } = useChatContext();
 
   const onKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
     if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
       triggerSave();
+      editor?.commands.clearContent();
     }
   };
 

diff --git a/src/stories/chat/parts/containers.tsx b/src/stories/chat/parts/containers.tsx
@@ -3,19 +3,19 @@ import { Card } from "../../cards";
 import { ChatArgs } from "../_types";
 
 export const ChatContainer = styled(Card)`
-  padding: ${({ theme }) => theme.space.md};
+  padding: ${({ theme }) => `0 ${theme.space.base * 4}px`};
   &:hover {
     box-shadow: none;
   }
   cursor: default;
 `;
 
 export const MessagesContainer = styled.div<ChatArgs>`
-  padding: ${({ theme }) => theme.space.md};
-  margin: ${({ theme }) => `0 -${theme.space.md}`};
+  padding: ${({ theme }) => `${theme.space.md} ${theme.space.sm}`};
+  margin: ${({ theme }) => `0 -${theme.space.base * 4}px`};
   display: flex;
   flex-direction: column;
-  gap: ${({ theme }) => theme.space.sm};
+  gap: ${({ theme }) => theme.space.xs};
   background: ${({ chatBkg }) => chatBkg ?? `#fff`};
   overflow-y: auto;
 `;
diff --git a/src/stories/chat/parts/header.tsx b/src/stories/chat/parts/header.tsx
@@ -1,12 +1,9 @@
-import { ReactNode } from "react";
-import { MD } from "../../typography/typescale";
 import { Title } from "../../title";
 import styled from "styled-components";
-import { NavDivider } from "../../navigation/nav/nav-item";
 
 export const ChatTitle = styled(Title)`
   color: ${({ theme }) => theme.palette.blue[600]};
   margin: ${({ theme }) => `0 -${theme.space.md}`};
-  padding: ${({ theme }) => `0 ${theme.space.md} ${theme.space.sm}`};
+  padding: ${({ theme }) => `${theme.space.sm} ${theme.space.md}`};
   border-bottom: ${({ theme }) => `1px solid ${theme.palette.grey[200]}`};
 `;