added profile images and colors to the chat messages

app/assets/stylesheets/components/_hand.scss

@@ -2,7 +2,7 @@
   position: absolute;
   bottom: 20px;
   z-index: 10000000000;
-  left: 48%;
+  left: 10%;
   font-size: 26px;
   cursor: pointer;
 }

app/assets/stylesheets/pages/_home.scss

@@ -6,6 +6,14 @@ video {
 
 #remote-video-container {
   float: left;
+  i {
+    text-align: center;
+    background-color: $primary;
+    border-radius: 50%;
+    padding: 15px;
+    z-index: 999999;
+    color: white;
+  }
 }
 
 #local-video {

app/assets/stylesheets/pages/_messages.scss

@@ -1,5 +1,5 @@
 .messages-container-container {
-  background-color: $card-background;
+  background-color: $light-gray;
   width: 100%;
   height: 100vh;
   position: relative;
@@ -13,9 +13,6 @@
   overflow: scroll;
   height: 95%;
   padding: 10px;
-  .message {
-    color: white;
-  }
 }
 
 select:not([multiple]) {
@@ -31,3 +28,38 @@ select:not([multiple]) {
 #language-1 {
     border-radius: 0;
 }
+
+.avatar-sm {
+  width: 35px;
+  height: 35px;
+}
+
+.messageDiv {
+  display: flex;
+  align-items: center;
+  padding-top: 10px;
+  padding-bottom: 10px;
+
+  p {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-left: 8px;
+    padding-right: 8px;
+    background-color: #d4d5d6;
+    color: $navbar-background;
+    border-radius: 2px;
+  }
+
+  &.right {
+    flex-direction: row-reverse;
+    p {
+      background-color: $primary;
+      color: white !important;
+    }
+  }
+
+}
+
+.margin-left {
+  margin-left: 10px;
+}

app/controllers/pages_controller.rb

@@ -39,7 +39,6 @@ class PagesController < ApplicationController
     chatroom = 'chat_room_' + params[:chat_room_id]
     puts params
     user_info = {}
-    photo_url = current_user.photo.url || "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"
 
     if current_user.first_name.nil? || current_user.last_name.nil?
       user_info[:name] = current_user.email
@@ -83,7 +82,8 @@ class PagesController < ApplicationController
 
     ActionCable.server.broadcast "chat_room_#{params[:chat_room_id]}", {
       translated_message: translated_message,
-      userId: userId
+      userId: userId,
+      photo_url: params[:photo_url]
     }
   end
 
@@ -93,6 +93,7 @@ class PagesController < ApplicationController
     chatroom = 'chat_room_' + params[:chat_room_id]
     puts params
     user_info = {}
+    photo_url = current_user.photo.url || "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"
 
     if current_user.first_name.nil? || current_user.last_name.nil?
       user_info[:name] = current_user.email
@@ -105,7 +106,8 @@ class PagesController < ApplicationController
         message: params[:message],
         user_info: user_info,
         time_stamp: Time.now.strftime("%H:%M"),
-        userId: current_user.id
+        userId: current_user.id,
+        photo_url: photo_url
         }
       })
     head :ok

app/javascript/packs/chatrooms.js

@@ -25,22 +25,34 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
         const message = `${chatMessage["message"]}`
         const messagesContainer = document.getElementById('messages-container')
 
-
+        // Div Settings
         const messageDiv = document.createElement("div")
+        messageDiv.classList.add("messageDiv")
+        messageDiv.classList.add("right")
+
+        // Photo Settings
         const photo = document.createElement("img")
         photo.src = chatMessage["photo_url"]
+        photo.classList.add("img-circle")
+        photo.classList.add("avatar-sm")
+        photo.classList.add("margin-left")
 
-        // messageDiv.appendChild(photo)
+        // Text Settings
-
         const messageElement = document.createElement("p")
         messageElement.classList.add("message")
+        messageElement.classList.add("no-margin")
         messageElement.innerText = message
-        messagesContainer.appendChild(messageElement)
+
+        // Add message and photo to div
+        messageDiv.appendChild(photo)
+        messageDiv.appendChild(messageElement)
+
+        // Add message to container
+        messagesContainer.appendChild(messageDiv)
 
       } else if (data["chat_message"] && data["chat_message"]["userId"] != userId) {
         const chatMessage = data["chat_message"]
         const target = document.getElementById('language-1').value
-
         const message = `${chatMessage["message"]}`
 
         fetch(`/chat_rooms/${chatroomId}/translate_message` , {
@@ -48,23 +60,33 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
           body: JSON.stringify({
             message: message,
             target: target,
-            userId: userId
+            userId: userId,
+            photo_url: chatMessage["photo_url"]
           }),
           headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
         })
-      } else if (data["translation"] && data["userId"] == userId) {
-        if (data["input"] == 1) {
-          document.getElementById('language-2-input').value = data["translation"].text
-        } else {
-          document.getElementById('language-1-input').value = data["translation"].text
-        }
       } else if (data["translated_message"] && data["userId"] == userId) {
           const messagesContainer = document.getElementById('messages-container')
+
+          const messageDiv = document.createElement("div")
+          messageDiv.classList.add("messageDiv")
+
+          const photo = document.createElement("img")
+          photo.src = data["photo_url"]
+          photo.classList.add("img-circle")
+          photo.classList.add("avatar-sm")
+          photo.classList.add("margin-right")
+
           const messageElement = document.createElement("p")
           messageElement.classList.add("message")
+          messageElement.classList.add("message")
+          messageElement.classList.add("no-margin")
           messageElement.innerText = data["translated_message"]
-          messagesContainer.appendChild(messageElement)
+
-          scrollLastMessageIntoView();
+          messageDiv.appendChild(photo)
+          messageDiv.appendChild(messageElement)
+
+          messagesContainer.appendChild(messageDiv)
       } else {
         // console.log(data)
       }

app/views/chat_rooms/show.html.erb

@@ -14,6 +14,7 @@
         </div>
           <video id="remote-video" autoplay></video>
           <i class="far fa-hand-paper hand"></i>
+          <!-- <i class="far fa-phone-slash hand"></i> -->
       </div>
     </div>
     <div class="col-xs-12 col-sm-6 col-lg-4 no-padding">