Add link style (#26)

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(
-          <a key={idx} href={link}>
+          <Link
+            key={idx}
+            href={link}
+            target="_blank"
+            rel="noopener noreferrer"
+            theme={theme}
+          >
             {match}
-          </a>,
+          </Link>,
           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};
+`;

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

@@ -49,7 +49,7 @@ export function ChatMessages({ messages, theme }: ChatMessagesProps) {
                   </TimeWrapper>
                 </MessageHeaderWrapper>
                 <MessageText theme={theme}>
-                  <ChatMessageContent content={message.content} />
+                  <ChatMessageContent content={message.content} theme={theme} />
                 </MessageText>
               </ContentWrapper>
             </MessageWrapper>

packages/react-chat/src/components/Members.tsx

@@ -116,6 +116,9 @@ const MemberName = styled.p<ThemeProps>`
   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)<ThemeProps>`
   position: relative;
   background-size: contain;
   background-position: center;
+  flex-shrink: 0;
 
   &.online {
     &::after {

packages/react-chat/src/helpers/channelsMock.ts

@@ -100,7 +100,7 @@ export const channels = [
       },
       {
         id: 3,
-        name: "Guest",
+        name: "Merry Silvester Christmas",
         isOnline: true,
       },
     ],

packages/react-chat/src/styles/GlobalStyle.tsx

@@ -118,7 +118,7 @@ export const GlobalStyle = createGlobalStyle`
   }
 
   body {
-    line-height: 1;
+    line-height: 147%;
   }
 
   ol,