adding url styles

...

styling external links inside the banner

Refactoring code

adding underline on hover and focus

removing hasLiink

bigbluebutton-html5/imports/ui/components/chat/styles.js

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import {
   colorWhite,
   colorGrayDark,
+  colorPrimary
 } from '/imports/ui/stylesheets/styled-components/palette';
 import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
 import Button from '/imports/ui/components/common/button/component';
@@ -25,6 +26,35 @@ const Chat = styled.div`
   overflow: hidden;
   height: 100%;
 
+  a {
+    color: ${colorPrimary};
+    text-decoration: none;
+
+    &:focus {
+      color: ${colorPrimary};
+      text-decoration: underline;
+    }
+    &:hover {
+      filter: brightness(90%);
+      text-decoration: underline;
+    }
+    &:active {
+      filter: brightness(85%);
+      text-decoration: underline;
+    }
+    &:hover:focus{
+      filter: brightness(90%);
+      text-decoration: underline;
+    }
+    &:focus:active {
+      filter: brightness(85%);
+      text-decoration: underline;
+    }
+  }
+  u {
+    text-decoration-line: none;
+  }
+
   ${({ isChrome }) => isChrome && `
     transform: translateZ(0);
   `}

bigbluebutton-html5/imports/ui/components/chat/time-window-list/time-window-chat-item/component.jsx

@@ -152,7 +152,6 @@ class TimeWindowChatItem extends PureComponent {
     } = this.props;
 
     const dateTime = new Date(timestamp);
-    const regEx = /<a[^>]+>/i;
     ChatLogger.debug('TimeWindowChatItem::renderMessageItem', this.props);
     const defaultAvatarString = name?.toLowerCase().slice(0, 2) || "  ";
     const emphasizedText = messageFromModerator && CHAT_EMPHASIZE_TEXT && chatId === CHAT_PUBLIC_ID;
@@ -188,7 +187,6 @@ class TimeWindowChatItem extends PureComponent {
             <Styled.Messages>
               {messages.map(message => (
                 <Styled.ChatItem
-                  hasLink={regEx.test(message.text)}
                   emphasizedMessage={emphasizedText}
                   key={message.id}
                   text={message.text}

bigbluebutton-html5/imports/ui/components/chat/time-window-list/time-window-chat-item/styles.js

@@ -173,12 +173,6 @@ const ChatItem = styled(MessageChatItem)`
   color: ${colorText};
   word-wrap: break-word;
 
-  ${({ hasLink }) => hasLink && `
-    & > a {
-      color: ${colorPrimary};
-    }
-  `}
-
   ${({ emphasizedMessage }) => emphasizedMessage && `
     font-weight: bold;
   `}