From abf42f1a56a476ee849b7a6709c989d2907b1310 Mon Sep 17 00:00:00 2001
From: Ginger Wong <omqmail@gmail.com>
Date: Sun, 23 Aug 2020 21:49:26 -0700
Subject: [PATCH] avatar\ change style update

---
 webroot/js/components/chat/message.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/webroot/js/components/chat/message.js b/webroot/js/components/chat/message.js
index ec7cfdff5..11c4506ba 100644
--- a/webroot/js/components/chat/message.js
+++ b/webroot/js/components/chat/message.js
@@ -22,7 +22,7 @@ export default class Message extends Component {
       const authorTextColor = { color: authorColor };
       return (
         html`
-          <div class="message flex flex-row align-start p-3">
+          <div class="message flex flex-row items-start p-3">
             <div
               class="message-avatar rounded-full flex items-center justify-center mr-3"
               style=${avatarBgColor}
@@ -46,10 +46,15 @@ export default class Message extends Component {
       const { oldName, newName, image } = message;
       return (
         html`
-          <div class="message flex align-start p3">
-            <div class="message-content text-sm">
-              <img class="mr-2" src=${image} />
-              <div class="text-white text-center">
+          <div class="message message-name-change flex items-center justify-start p-3">
+            <div class="message-content flex flex-row items-center justify-center text-sm">
+              <div
+                class="message-avatar rounded-full mr-3 bg-gray-900"
+              >
+                <img class="mr-2 p-1" src=${image} />
+              </div>
+
+              <div class="text-white text-center opacity-50">
                 <span class="font-bold">${oldName}</span> is now known as <span class="font-bold">${newName}</span>.
               </div>
             </div>