From 89c18b7c4cf8386bf564dcc20a03c498ba4b6283 Mon Sep 17 00:00:00 2001
From: Jamie Kerner <eugenia.kerner@gmail.com>
Date: Thu, 14 Mar 2019 18:25:46 +0100
Subject: [PATCH] Changed img to username, set user list to left again,
 adjusted stylings

---
 public_html/css/style.css | 68 ++++++++++++++++++++++++++++-----------
 public_html/index.html    |  6 ++--
 2 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/public_html/css/style.css b/public_html/css/style.css
index b72ebbb..5bcca87 100644
--- a/public_html/css/style.css
+++ b/public_html/css/style.css
@@ -1,3 +1,8 @@
+body {
+    font-family: Roboto,sans-serif;
+    font-size: 1rem;
+}
+
 img {
     max-width: 100%;
 }
@@ -20,6 +25,16 @@ img {
     overflow: hidden;
 }
 
+@media (min-width: 768px) {
+    .messaging_heading {
+        display: none;
+    }
+
+    #sidebarCollapse {
+        display: none;
+    }
+}
+
 .inbox_msg {
     border: 1px solid #c4c4c4;
     clear: both;
@@ -45,10 +60,11 @@ img {
 @media (min-width: 768px) {
     #sidebar {
         border-left: 1px solid #c4c4c4;
-        /*float: right;*/
-        /*position: relative;*/
+        float: left;
         overflow: hidden;
-        /*width: 40%;*/
+        position: relative;
+        transform: none;
+        width: 40%;
     }
 }
 
@@ -86,15 +102,22 @@ img {
     width: 60%;
 }
 
+.search_bar .stylish-input-group {
+    position: relative;
+}
+
 .search_bar input {
     background: none;
     border-bottom: 1px solid #cdcdcd;
+    font-size: 1rem;
+    height: 25px;
+    padding: 2px 30px 4px 6px;
     width: 80%;
-    padding: 2px 0 4px 6px;
 }
 
-.search_bar .input-group-addon { 
-    margin: 0 0 0 -30px;
+.search_bar .input-group-addon {
+    position: absolute;
+    right: 28px;
 }
 
 .search_bar .input-group-addon button {
@@ -103,12 +126,17 @@ img {
     color: #707070;
     font-size: 18px;
     padding: 0;
+    position: absolute;
+}
+
+.search_bar .input-group-addon button svg {
+    padding-top: 5px;
 }
 
 .chat_ib {
     float: left;
     padding: 0 0 0 15px;
-    width: 88%;
+    width: 75%;
 }
 
 .chat_ib h5 { 
@@ -145,7 +173,7 @@ img {
 }
 
 .inbox_chat { 
-    height: 550px; 
+    height: 540px;
     overflow-y: scroll;
 }
 
@@ -153,14 +181,15 @@ img {
     background: #ebebeb;
 }
 
-.incoming_msg_img {
-    display: inline-block;
-    width: 6%;
+h5.incoming_msg_user {
+    color: #464646;
+    font-size: 15px;
+    margin: 0 0 8px 30px;
 }
 
 .received_msg {
     display: inline-block;
-    padding: 0 0 0 10px;
+    padding-left: 30px;
     vertical-align: top;
     width: 92%;
 }
@@ -180,15 +209,13 @@ img {
 }
 
 .messages {
-    padding: 30px 15px 0 25px;
+    padding: 30px;
     width: 100%;
 }
 
 @media (min-width: 768px) {
     .messages {
-        /*float: left;*/
-        padding: 30px 15px 0 25px;
-        /*width: 60%;*/
+        width: auto;
     }
 }
 
@@ -199,6 +226,7 @@ img {
     margin: 8px 0 0;
 }
 
+/*Messages*/
 .sent_msg {
     float: right;
     width: 46%;
@@ -210,7 +238,7 @@ img {
     font-size: 14px;
     margin: 0; color:#fff;
     padding: 5px 10px 5px 12px;
-    width: 100%;
+    /*width: 100%;*/
 }
 
 .outgoing_msg {
@@ -224,12 +252,15 @@ img {
     color: #4c4c4c;
     font-size: 15px;
     min-height: 48px;
+    padding-left: 30px;
     width: 100%;
 }
 
 .type_msg {
     border-top: 1px solid #c4c4c4;
+    float: left;
     position: relative;
+    width: 60%;
 }
 
 .msg_send_btn {
@@ -242,12 +273,13 @@ img {
     height: 33px;
     position: absolute;
     right: 0;
-    top: 11px;
+    top: 8px;
     width: 33px;
 }
 
 .msg_send_btn svg {
     fill: #ffffff;
+    padding-top: 4px;
 }
 
 .msg_history {
diff --git a/public_html/index.html b/public_html/index.html
index acbd0bd..19eb7f6 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -118,7 +118,7 @@
 			<div class="messages">
 				<div class="msg_history">
 					<div class="incoming_msg">
-						<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
+						<h5 class="incoming_msg_user">Sunil Rajput</h5>
 						<div class="received_msg">
 							<div class="received_withd_msg">
 								<p>Test which is a new approach to have all
@@ -134,7 +134,7 @@
 							<span class="time_date"> 11:01 AM    |    June 9</span> </div>
 					</div>
 					<div class="incoming_msg">
-						<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
+						<h5 class="incoming_msg_user">Sunil Rajput</h5>
 						<div class="received_msg">
 							<div class="received_withd_msg">
 								<p>Test, which is a new approach to have</p>
@@ -148,7 +148,7 @@
 							<span class="time_date"> 11:01 AM    |    Today</span> </div>
 					</div>
 					<div class="incoming_msg">
-						<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
+						<h5 class="incoming_msg_user">Sunil Rajput</h5>
 						<div class="received_msg">
 							<div class="received_withd_msg">
 								<p>We work directly with our designers and suppliers,