From cbbff2e5f5d83fbd913c01e7a7bad4729e78cb80 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sun, 19 Jul 2020 22:57:42 -0700
Subject: [PATCH] Create padding around chat avatars and the colored container

---
 webroot/index.html        | 10 +++++-----
 webroot/styles/layout.css |  9 +++++++--
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/webroot/index.html b/webroot/index.html
index 8121ae735..19dc84400 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -124,11 +124,11 @@
         <div id="messages-container">
           <div v-for="message in messages" v-cloak>
               <div class="message flex">
-                <img
-                  v-bind:src="message.image"
-                  class="message-avatar rounded-full bg-black bg-opacity-50"
-                  v-bind:style="{ backgroundColor: message.userColor() }"
-                />
+                <div class="message-avatar rounded-full flex items-center justify-center" v-bind:style="{ backgroundColor: message.userColor() }">
+                  <img
+                    v-bind:src="message.image"
+                  />
+                </div>
                 <div class="message-content">
                   <p class="message-author text-white font-bold">{{ message.author }}</p>
                   <p class="message-text text-gray-400 font-thin " v-html="message.formatText()"></p>
diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css
index 58a8df08a..123b07529 100644
--- a/webroot/styles/layout.css
+++ b/webroot/styles/layout.css
@@ -407,10 +407,15 @@ h2 {
   align-items: flex-start;
 }
 .message-avatar {
-  height: 2.5em;
-  width: 2.5em;
   margin-right: .75em;
 }
+.message-avatar img {
+  max-width: unset;
+  height: 25.em;
+  width: 2.5em;
+  padding: 6px;
+}
+
 .message-content {
   font-size: .85em;
 }