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,