Add style for mentioning (#137)

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

@@ -20,6 +20,7 @@ import { StickerIcon } from "../Icons/StickerIcon";
 import "emoji-mart/css/emoji-mart.css";
 import { SizeLimitModal, SizeLimitModalName } from "../Modals/SizeLimitModal";
 import { SearchBlock } from "../SearchBlock";
+import { textMediumStyles } from "../Text";
 
 export function ChatInput() {
   const { sendMessage } = useMessengerContext();
@@ -158,7 +159,7 @@ export function ChatInput() {
           const secondSlice = text.slice(end > -1 ? end : content.length);
           const replaceContent = `${firstSlice} @${contact}${secondSlice}`;
           const spaceElement = document.createTextNode(" ");
-          const contactElement = document.createElement("b");
+          const contactElement = document.createElement("span");
           contactElement.innerText = `@${contact}`;
 
           if (contactElement && element.rangeCount > 0) {
@@ -338,11 +339,11 @@ const Input = styled.div`
   color: ${({ theme }) => theme.primary};
   border-radius: 16px 16px 4px 16px;
   outline: none;
-  font-family: Inter;
+  font-family: "Inter";
   font-style: normal;
   font-weight: normal;
-  font-size: 15px;
+
-  line-height: 22px;
+  ${textMediumStyles};
 
   &:focus {
     outline: none;
@@ -352,6 +353,21 @@ const Input = styled.div`
   &::-webkit-scrollbar {
     width: 0;
   }
+
+  & > span {
+    display: inline-block;
+    color: ${({ theme }) => theme.mentionColor};
+    background: ${({ theme }) => theme.mentionBg};
+    border-radius: 4px;
+    font-weight: 500;
+    position: relative;
+    padding: 0 2px;
+    cursor: pointer;
+
+    &:hover {
+      background: ${({ theme }) => theme.mentionBgHover};
+    }
+  }
 `;
 
 const AddPictureInputWrapper = styled.div`

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

@@ -8,6 +8,7 @@ import { ChatMessage } from "../../models/ChatMessage";
 import { Metadata } from "../../models/Metadata";
 import { ContactMenu } from "../Form/ContactMenu";
 import { ImageMenu } from "../Form/ImageMenu";
+import { textMediumStyles, textSmallStyles } from "../Text";
 
 interface MentionProps {
   id: string;
@@ -19,10 +20,10 @@ function Mention({ id }: MentionProps) {
   const [showMenu, setShowMenu] = useState(false);
   if (!contact) return <>{id}</>;
   return (
-    <MentionSpan onClick={() => setShowMenu(!showMenu)}>
+    <MentionBLock onClick={() => setShowMenu(!showMenu)}>
       {`@${contact.customName ?? contact.id}`}
       {showMenu && <ContactMenu id={id.slice(1)} setShowMenu={setShowMenu} />}
-    </MentionSpan>
+    </MentionBLock>
   );
 }
 
@@ -147,10 +148,10 @@ const PreviewTitleWrapper = styled.div`
   font-family: Inter;
   font-style: normal;
   font-weight: 500;
-  font-size: 13px;
   width: 290px;
-  line-height: 18px;
   margin-left: 12px;
+
+  ${textSmallStyles}
 `;
 
 const PreviewImage = styled.img`
@@ -177,10 +178,21 @@ const ContentWrapper = styled.div`
   flex-direction: column;
 `;
 
-const MentionSpan = styled.span`
+const MentionBLock = styled.div`
-  color: blue;
+  display: inline-block;
+  color: ${({ theme }) => theme.mentionColor};
+  background: ${({ theme }) => theme.mentionBg};
+  border-radius: 4px;
   font-weight: 500;
   position: relative;
+  padding: 0 2px;
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ theme }) => theme.mentionBgHover};
+  }
+
+  ${textMediumStyles}
 `;
 
 const Link = styled.a`

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

@@ -178,7 +178,7 @@ const DateSeparator = styled.div`
   text-align: center;
   justify-content: center;
   align-items: center;
-  font-family: Inter;
+  font-family: "Inter";
   font-style: normal;
   font-weight: 500;
   color: #939ba1;

packages/react-chat/src/components/Form/IdentityLoader.tsx

@@ -107,7 +107,6 @@ const Input = styled.input`
 const Button = styled.button`
   padding: 5px;
   margin: 5px;
-
   box-shadow: 5px 5px 10px -4px rgba(197, 197, 255, 1);
   border-radius: 5px;
   background-color: ${({ theme }) => theme.buttonBg};

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

@@ -19,6 +19,9 @@ export type Theme = {
   skeletonLight: string;
   skeletonDark: string;
   redColor: string;
+  mentionColor: string;
+  mentionBg: string;
+  mentionBgHover: string;
 };
 
 export const lightTheme: Theme = {
@@ -42,6 +45,9 @@ export const lightTheme: Theme = {
   skeletonLight: "#F6F8FA",
   skeletonDark: "#E9EDF1",
   redColor: "#FF2D55",
+  mentionColor: "#0DA4C9",
+  mentionBg: "#E5F8FD",
+  mentionBgHover: "#BDE7F2",
 };
 
 export const darkTheme: Theme = {
@@ -65,6 +71,9 @@ export const darkTheme: Theme = {
   skeletonLight: "#2E2F31",
   skeletonDark: "#141414",
   redColor: "#FF5C7B",
+  mentionColor: "#0DA4C9",
+  mentionBg: "#E5F8FD",
+  mentionBgHover: "#BDE7F2",
 };
 
 export default { lightTheme, darkTheme };