From 6148921f13fd728af1ee6cf397d4fa9c65b08303 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ram=C3=B3n=20Souza?= <contato@ramonsouza.com>
Date: Tue, 2 Nov 2021 11:32:07 +0000
Subject: [PATCH] convert chat alert component

---
 .../ui/components/chat/alert/component.jsx    | 12 ++---
 .../ui/components/chat/alert/styles.js        | 45 +++++++++++++++++++
 2 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 bigbluebutton-html5/imports/ui/components/chat/alert/styles.js

diff --git a/bigbluebutton-html5/imports/ui/components/chat/alert/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/alert/component.jsx
index c3d4b0a73d..62767ca74a 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/alert/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/alert/component.jsx
@@ -6,7 +6,7 @@ import _ from 'lodash';
 import AudioService from '/imports/ui/components/audio/service';
 import ChatPushAlert from './push-alert/component';
 import Service from '../service';
-import { styles } from '../styles';
+import Styled from './styles';
 
 const CHAT_CONFIG = Meteor.settings.public.chat;
 const PUBLIC_CHAT_CLEAR = CHAT_CONFIG.chat_clear;
@@ -148,15 +148,15 @@ const ChatAlert = (props) => {
   };
 
   const createMessage = (name, message) => (
-    <div className={styles.pushMessageContent}>
-      <h3 className={styles.userNameMessage}>{name}</h3>
-      <div className={styles.contentMessage}>
+    <Styled.PushMessageContent>
+      <Styled.UserNameMessage>{name}</Styled.UserNameMessage>
+      <Styled.ContentMessage>
         {
           mapContentText(message)
             .reduce((acc, text) => [...acc, (<br key={_.uniqueId('br_')} />), text], [])
         }
-      </div>
-    </div>
+      </Styled.ContentMessage>
+    </Styled.PushMessageContent>
   );
 
   return pushAlertEnabled
diff --git a/bigbluebutton-html5/imports/ui/components/chat/alert/styles.js b/bigbluebutton-html5/imports/ui/components/chat/alert/styles.js
new file mode 100644
index 0000000000..0530edd8bc
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/chat/alert/styles.js
@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+import { colorGrayDark } from '/imports/ui/stylesheets/styled-components/palette';
+import { borderRadius } from '/imports/ui/stylesheets/styled-components/general';
+import { fontSizeSmall } from '/imports/ui/stylesheets/styled-components/typography';
+
+const PushMessageContent = styled.div`
+  margin-top: 1.4rem;
+  margin-bottom: .4rem;
+  margin-left: .4rem;
+  margin-right: .4rem;
+  background-color: inherit;
+  width: 98%;
+`;
+
+const UserNameMessage = styled.h3`
+  margin: 0;
+  font-size: 80%;
+  color: ${colorGrayDark};
+  font-weight: bold;
+  background-color: inherit;
+  position: relative;
+  white-space: nowrap; 
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1em;
+  max-height: 1em;
+`;
+
+const ContentMessage = styled.div`
+  margin-top: ${borderRadius};
+  font-size: 80%;
+  background-color: inherit;
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: ${fontSizeSmall};
+  max-height: calc(${fontSizeSmall} * 10);
+`;
+
+export default {
+  PushMessageContent,
+  UserNameMessage,
+  ContentMessage,
+};