From 0325af3ce7aa085aa0274974b44cf2beea2e175f Mon Sep 17 00:00:00 2001
From: Ginger Wong <omqmail@gmail.com>
Date: Wed, 19 Aug 2020 00:47:41 -0700
Subject: [PATCH] styles for message only view

---
 webroot/js/chat/chat.js            |  2 +-
 webroot/js/chat/message.js         |  5 ++++-
 webroot/styles/standalone-chat.css | 32 +++++++++++++++++++++++++++++-
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/webroot/js/chat/chat.js b/webroot/js/chat/chat.js
index 54caabc4c..4b9ee9649 100644
--- a/webroot/js/chat/chat.js
+++ b/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>
       `);
diff --git a/webroot/js/chat/message.js b/webroot/js/chat/message.js
index 6de5afa82..413148576 100644
--- a/webroot/js/chat/message.js
+++ b/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">
diff --git a/webroot/styles/standalone-chat.css b/webroot/styles/standalone-chat.css
index 898ece926..8a4b40e88 100644
--- a/webroot/styles/standalone-chat.css
+++ b/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);
+}