diff --git a/packages/react-chat/src/components/Chat/ChatMessageContent.tsx b/packages/react-chat/src/components/Chat/ChatMessageContent.tsx
index 05b3f043..d4034a05 100644
--- a/packages/react-chat/src/components/Chat/ChatMessageContent.tsx
+++ b/packages/react-chat/src/components/Chat/ChatMessageContent.tsx
@@ -1,4 +1,7 @@
import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+
+import { Theme } from "../../styles/themes";
/* eslint-disable no-useless-escape */
const regEx =
@@ -7,9 +10,13 @@ const regEx =
type ChatMessageContentProps = {
content: string;
+ theme: Theme;
};
-export function ChatMessageContent({ content }: ChatMessageContentProps) {
+export function ChatMessageContent({
+ content,
+ theme,
+}: ChatMessageContentProps) {
const [elements, setElements] = useState<(string | React.ReactElement)[]>([
content,
]);
@@ -25,9 +32,15 @@ export function ChatMessageContent({ content }: ChatMessageContentProps) {
? match
: "https://" + match;
newSplit.push(
-
+
{match}
- ,
+ ,
split[idx + 1]
);
});
@@ -37,3 +50,8 @@ export function ChatMessageContent({ content }: ChatMessageContentProps) {
return <>{elements.map((el) => el)}>;
}
+
+const Link = styled.a`
+ text-decoration: underline;
+ color: ${({ theme }) => theme.memberNameColor};
+`;
diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx
index 3ce90187..acdc7570 100644
--- a/packages/react-chat/src/components/Chat/ChatMessages.tsx
+++ b/packages/react-chat/src/components/Chat/ChatMessages.tsx
@@ -49,7 +49,7 @@ export function ChatMessages({ messages, theme }: ChatMessagesProps) {
-
+
diff --git a/packages/react-chat/src/components/Members.tsx b/packages/react-chat/src/components/Members.tsx
index 85fa2cfd..a22911bc 100644
--- a/packages/react-chat/src/components/Members.tsx
+++ b/packages/react-chat/src/components/Members.tsx
@@ -116,6 +116,9 @@ const MemberName = styled.p`
color: ${({ theme }) => theme.textPrimaryColor};
opacity: 0.7;
margin-left: 8px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
`;
const MembersList = styled.div`
@@ -139,6 +142,7 @@ const MemberIcon = styled(Icon)`
position: relative;
background-size: contain;
background-position: center;
+ flex-shrink: 0;
&.online {
&::after {
diff --git a/packages/react-chat/src/helpers/channelsMock.ts b/packages/react-chat/src/helpers/channelsMock.ts
index 42ceab6f..b2b420b6 100644
--- a/packages/react-chat/src/helpers/channelsMock.ts
+++ b/packages/react-chat/src/helpers/channelsMock.ts
@@ -100,7 +100,7 @@ export const channels = [
},
{
id: 3,
- name: "Guest",
+ name: "Merry Silvester Christmas",
isOnline: true,
},
],
diff --git a/packages/react-chat/src/styles/GlobalStyle.tsx b/packages/react-chat/src/styles/GlobalStyle.tsx
index 29b98c75..588d3ae2 100644
--- a/packages/react-chat/src/styles/GlobalStyle.tsx
+++ b/packages/react-chat/src/styles/GlobalStyle.tsx
@@ -118,7 +118,7 @@ export const GlobalStyle = createGlobalStyle`
}
body {
- line-height: 1;
+ line-height: 147%;
}
ol,