style message items

webroot/index.html

@@ -53,18 +53,16 @@
         <div id="chat-container">
           <div id="messages-container">
             <div v-for="(message, index) in messages">
-              <div class="bg-white shadow-md  px-8 pt-6 pb-8 mb-4">
+              
-                <div class="flex items-center">
+                <div class="message flex">
                   <img
                     v-bind:src="message.image"
-                    class="w-10 h-10 rounded-full mr-4 border-black-500"
+                    class="message-avatar rounded-full"
-                    style="padding: 5px; background-color: #ececec;"
                   />
     
-                  <div class="text-sm">
+                  <div class="message-content">
-                    <p class="text-700">{{ message.author }}</p>
+                    <p class="message-author">{{ message.author }}</p>
-                    <p class="text-gray-600"v-html="message.linkedText()"></p>
+                    <p class="message-text"v-html="message.linkedText()"></p>
-                  </div>
                   </div>
               </div>
             </div>

webroot/js/app.js

@@ -98,7 +98,7 @@ function setupWebsocket() {
 
 setupApp()
 getStatus()
-setupWebsocket()
+// setupWebsocket()
 // setInterval(getStatus, 5000)
 
 // HLS Video setup

webroot/styles/layout.css

@@ -96,7 +96,27 @@ header h1 {
   margin-bottom: 0;
 }
 
-
+.message {
+  padding: .85em;
+  align-items: flex-start;
+}
+.message-avatar {
+  height: 2.5em;
+  width: 2.5em;
+  margin-right: .75em;
+  /* background-color: rgba(236, 236, 236, .5); */
+  background-color: rgba(0,0,0, .75);
+}
+.message-content {
+  font-size: .85em;
+}
+.message-author {
+  font-weight: 600;
+}
+.message-text {
+  color: #ccc;
+  font-weight: 100;
+}
 
 
 .no-chat .left-col {