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;
+}