styles for message only view

webroot/js/chat/chat.js

@@ -182,7 +182,7 @@ export default class Chat extends Component {
     if (messagesOnly) {
       return (
         html`
-          <div id="messages-container">
+          <div id="messages-container" class="messages-only">
             ${messageList}
           </div>
       `);

webroot/js/chat/message.js

@@ -14,7 +14,10 @@ export default class Message extends Component {
       const { image, author, body } = message;
       const formattedMessage = formatMessageText(body, username);
       const avatar = image || generateAvatar(author);
-      const avatarBgColor = { backgroundColor: messageBubbleColorForString(author) };
+
+      const authorColor = messageBubbleColorForString(author);
+      const avatarBgColor = { backgroundColor: authorColor };
+      const authorTextColor = { color: authorColor };
       return (
         html`
           <div class="message flex">

webroot/styles/standalone-chat.css

@@ -1,4 +1,34 @@
 /*
-The styles in this file mostly ovveride those coming fro chat.css
+The styles in this file mostly ovveride those coming from chat.css
 
 */
+
+
+#messages-container.messages-only {
+
+  /* modify this px number if you want things to be relatively bigger or smaller 8*/
+  font-size: 16px;
+
+  padding: 1em .5em;
+  background-color: rgba(0,0,0,.4);
+}
+.messages-only .message-content {
+  text-shadow: 1px 1px 0px rgba(0,0,0,0.25);
+}
+.message-avatar {
+  box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);
+}
+.messages-only .message {
+  padding: .5em;
+}
+
+.messages-only .message-text {
+  font-weight: 400;
+  color: white;
+}
+.messages-only .message-text a {
+  color: #fc0;
+}
+.messages-only .message-author {
+  color: rgba(20,0,40,1);
+}