Add message style (#138)

packages/react-chat-example/src/index.tsx

@@ -123,7 +123,7 @@ const Bubble = styled.div`
 
 const Drag = styled.div`
   position: absolute;
-  overflow: hide;
+  overflow: hidden;
 `;
 
 ReactDOM.render(

packages/react-chat/src/components/Chat/ChatMessageContent.tsx

@@ -1,8 +1,10 @@
 import { decode } from "html-entities";
 import React, { useEffect, useMemo, useState } from "react";
+import { utils } from "status-communities/dist/cjs";
 import styled from "styled-components";
 
 import { useFetchMetadata } from "../../contexts/fetchMetadataProvider";
+import { useIdentity } from "../../contexts/identityProvider";
 import { useMessengerContext } from "../../contexts/messengerProvider";
 import { ChatMessage } from "../../models/ChatMessage";
 import { Metadata } from "../../models/Metadata";
@@ -12,13 +14,18 @@ import { textMediumStyles, textSmallStyles } from "../Text";
 
 interface MentionProps {
   id: string;
+  setMentioned: (val: boolean) => void;
 }
 
-function Mention({ id }: MentionProps) {
+function Mention({ id, setMentioned }: MentionProps) {
   const { contacts } = useMessengerContext();
   const contact = useMemo(() => contacts[id.slice(1)], [id, contacts]);
   const [showMenu, setShowMenu] = useState(false);
+  const identity = useIdentity();
+
   if (!contact) return <>{id}</>;
+  if (contact.id === utils.bufToHex(identity.publicKey)) setMentioned(true);
+
   return (
     <MentionBLock onClick={() => setShowMenu(!showMenu)}>
       {`@${contact.customName ?? contact.id}`}
@@ -31,12 +38,14 @@ type ChatMessageContentProps = {
   message: ChatMessage;
   setImage: (image: string) => void;
   setLinkOpen: (link: string) => void;
+  setMentioned: (val: boolean) => void;
 };
 
 export function ChatMessageContent({
   message,
   setImage,
   setLinkOpen,
+  setMentioned,
 }: ChatMessageContentProps) {
   const fetchMetadata = useFetchMetadata();
   const { content, image } = useMemo(() => message, [message]);
@@ -60,7 +69,10 @@ export function ChatMessageContent({
         ];
       }
       if (element.startsWith("@")) {
-        return [<Mention key={idx} id={element} />, " "];
+        return [
+          <Mention key={idx} id={element} setMentioned={setMentioned} />,
+          " ",
+        ];
       }
       return [element, " "];
     });
@@ -181,7 +193,7 @@ const ContentWrapper = styled.div`
 const MentionBLock = styled.div`
   display: inline-block;
   color: ${({ theme }) => theme.mentionColor};
-  background: ${({ theme }) => theme.mentionBg};
+  background: ${({ theme }) => theme.mentionBgHover};
   border-radius: 4px;
   font-weight: 500;
   position: relative;
@@ -189,7 +201,7 @@ const MentionBLock = styled.div`
   cursor: pointer;
 
   &:hover {
-    background: ${({ theme }) => theme.mentionBgHover};
+    background: ${({ theme }) => theme.mentionHover};
   }
 
   ${textMediumStyles}

packages/react-chat/src/components/Chat/ChatMessages.tsx

@@ -40,6 +40,7 @@ function ChatUiMessage({
     [message.sender, contacts]
   );
   const [showMenu, setShowMenu] = useState(false);
+  const [mentioned, setMentioned] = useState(false);
 
   return (
     <MessageOuterWrapper>
@@ -50,7 +51,7 @@ function ChatUiMessage({
             : message.date.toLocaleDateString()}
         </DateSeparator>
       )}
-      <MessageWrapper>
+      <MessageWrapper className={`${mentioned && "mention"}`}>
         <Icon
           onClick={() => {
             setShowMenu((e) => !e);
@@ -83,6 +84,7 @@ function ChatUiMessage({
               message={message}
               setImage={setImage}
               setLinkOpen={setLink}
+              setMentioned={setMentioned}
             />
           </MessageText>
         </ContentWrapper>
@@ -150,7 +152,7 @@ const MessagesWrapper = styled.div`
   flex-direction: column;
   height: calc(100% - 44px);
   overflow: auto;
-  padding: 8px 16px 0;
+  padding: 8px 0;
 
   &::-webkit-scrollbar {
     width: 0;
@@ -160,8 +162,23 @@ const MessagesWrapper = styled.div`
 const MessageWrapper = styled.div`
   width: 100%;
   display: flex;
-  padding: 8px 0;
+  padding: 8px 16px;
-  margin-bottom: 8px;
+  border-left: 2px solid ${({ theme }) => theme.bodyBackgroundColor};
+
+  &:hover {
+    background: ${({ theme }) => theme.inputColor};
+    border-color: ${({ theme }) => theme.inputColor};
+  }
+
+  &.mention {
+    background: ${({ theme }) => theme.mentionBg};
+    border-color: ${({ theme }) => theme.mentionColor};
+  }
+
+  &.mention:hover {
+    background: ${({ theme }) => theme.mentionBgHover};
+    border-color: ${({ theme }) => theme.mentionColor};
+  }
 `;
 
 const MessageOuterWrapper = styled.div`

packages/react-chat/src/styles/themes.ts

@@ -20,6 +20,7 @@ export type Theme = {
   skeletonDark: string;
   redColor: string;
   mentionColor: string;
+  mentionHover: string;
   mentionBg: string;
   mentionBgHover: string;
 };
@@ -46,8 +47,9 @@ export const lightTheme: Theme = {
   skeletonDark: "#E9EDF1",
   redColor: "#FF2D55",
   mentionColor: "#0DA4C9",
+  mentionHover: "#BDE7F2",
   mentionBg: "#E5F8FD",
-  mentionBgHover: "#BDE7F2",
+  mentionBgHover: "#D4F3FA",
 };
 
 export const darkTheme: Theme = {
@@ -71,9 +73,10 @@ export const darkTheme: Theme = {
   skeletonLight: "#2E2F31",
   skeletonDark: "#141414",
   redColor: "#FF5C7B",
-  mentionColor: "#0DA4C9",
+  mentionColor: "#51D0F0",
-  mentionBg: "#E5F8FD",
+  mentionHover: "#004E60",
-  mentionBgHover: "#BDE7F2",
+  mentionBg: "#004050",
+  mentionBgHover: "#002D39",
 };
 
 export default { lightTheme, darkTheme };