Merge pull request #2290 from daostack/feature/CW-2260-chat-style-imp…

…rovements Messages all the way down in chat #2260
daostack · Nov 7, 2023 · f4c45d7 · f4c45d7
2 parents 4a38a0e + 429f840
commit f4c45d7
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 14 deletions.
diff --git a/src/pages/common/components/ChatComponent/ChatComponent.module.scss b/src/pages/common/components/ChatComponent/ChatComponent.module.scss
@@ -6,7 +6,7 @@
   flex-direction: column;
   flex: 1;
   width: inherit;
-  height: calc(100% - #{$container-desktop-header-height});
+  height: calc(100% - var(--chat-header-height, 0rem));
   background-color: $white;
   box-sizing: border-box;
   --chat-input-wrapper-height: 3.125rem;
@@ -18,15 +18,18 @@
   overscroll-behavior: contain;
   display: flex;
   flex-direction: column-reverse;
-  padding: 0.5rem 2rem 0;
-  padding-bottom: calc(var(--chat-input-wrapper-height) + 7rem);
+  padding: 0.5rem 2rem 0 2rem;
+  margin-bottom: var(--chat-input-wrapper-height);
+
+  @include big-phone {
+    margin-bottom: 0;
+  }
 }
 
 .emptyChat {
   display: flex;
   justify-content: center;
-  padding: 0.5rem 2rem 0;
-  padding-bottom: calc(var(--chat-input-wrapper-height) + 7rem);
+  align-self: center;
 }
 
 .bottomChatContainer {

diff --git a/src/pages/common/components/ChatComponent/ChatComponent.tsx b/src/pages/common/components/ChatComponent/ChatComponent.tsx
@@ -183,13 +183,13 @@ export default function ChatComponent({
   const chatWrapperId = useMemo(() => `chat-wrapper-${uuidv4()}`, []);
   const chatInputWrapperRef = useRef<HTMLDivElement>(null);
   const chatContainerRef = useRef<HTMLDivElement>(null);
-  const [isScrolling, setScrolling] = useState(false);
+  const [isScrolling, setIsScrolling] = useState(false);
   const chatContentContextValue: ChatContentData = useMemo(
     () => ({
       isScrolling,
       chatContentRect: chatContainerRef.current?.getBoundingClientRect(),
     }),
-    [isScrolling],
+    [isScrolling, chatContainerRef.current],
   );
 
   const [message, setMessage] = useState<TextEditorValue>(
@@ -603,11 +603,11 @@ export default function ChatComponent({
 
   useEffect(() => {
     const deactivateScrollingFlag = debounce(() => {
-      setScrolling(false);
+      setIsScrolling(false);
     }, 300);
 
     function handleScroll() {
-      setScrolling(true);
+      setIsScrolling(true);
       deactivateScrollingFlag();
     }
 

diff --git a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.module.scss b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.module.scss
@@ -26,7 +26,6 @@
 .noMessagesText {
   align-self: flex-start;
   max-width: 17.5rem;
-  margin: 3.375rem 0 0;
   padding: 0.5rem 1rem;
   font-size: $xsmall;
   line-height: 143%;

diff --git a/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.module.scss b/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.module.scss
@@ -1,14 +1,19 @@
 @import "../../../../../../constants";
 
+.rightPaneContainerWithHeader {
+  --chat-header-height: #{$container-desktop-header-height};
+}
+
 .titleWrapper {
-  height: $container-desktop-header-height;
+  height: var(--chat-header-height);
   padding: 0 1.25rem;
   display: flex;
   align-items: center;
   background-color: $c-light-gray-2;
   border-bottom: 0.0625rem solid $c-light-gray;
   box-sizing: border-box;
 }
+
 .title {
   margin: 0;
   display: -webkit-box;
@@ -22,6 +27,7 @@
   overflow-wrap: break-word;
   text-overflow: ellipsis;
 }
+
 .titleRTL {
   text-align: right;
   direction: rtl;

diff --git a/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.tsx b/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.tsx
@@ -82,7 +82,11 @@ const DesktopChat: FC<ChatProps> = (props) => {
   }, [dmUserId]);
 
   return (
-    <DesktopRightPane className={className}>
+    <DesktopRightPane
+      className={classNames(className, {
+        [styles.rightPaneContainerWithHeader]: withTitle,
+      })}
+    >
       {withTitle && (
         <div className={styles.titleWrapper}>
           {dmUser?.photoURL && (

diff --git a/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.module.scss b/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.module.scss
@@ -1,6 +1,8 @@
 @import "../../../../../../constants";
 
 .modal {
+  height: 90vh;
+
   .modalHeaderWrapper {
     padding: 0;
 

diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
@@ -224,7 +224,7 @@ export default function ChatMessage({
     },
   );
 
-  const handleContextMenu: MouseEventHandler<HTMLLIElement> = (event) => {
+  const handleContextMenu: MouseEventHandler<HTMLDivElement> = (event) => {
     if (!isTabletView) {
       event.preventDefault();
       setIsMenuOpen(true);
@@ -341,7 +341,6 @@ export default function ChatMessage({
     <li
       id={discussionMessage.id}
       className={classNames(styles.container, className)}
-      onContextMenu={handleContextMenu}
     >
       <div
         className={classNames(styles.message, {
@@ -370,6 +369,7 @@ export default function ChatMessage({
         ) : (
           <>
             <div
+              onContextMenu={handleContextMenu}
               className={classNames(styles.messageText, {
                 [styles.messageTextCurrentUser]: !isNotCurrentUserMessage,
                 [styles.messageTextRtl]: isRtlText(discussionMessage.text),