Adjust location of timestamps

app/assets/stylesheets/chat.scss

@@ -408,20 +408,29 @@
     font-family: $monospace;
   }
 }
+.chatmessage__bodytext{
+  margin: 3px 1px 4px;
+}
 
 .chatmessage__timestamp {
   font-size: 11px;
-  color: lightgray;
-  min-width: 95px;
-  padding-top: 4px;
+  color: darken($light-medium-gray, 6%);
+  min-width: 85px;
+  text-align:right;
+  padding-left: 4px;
+  vertical-align: 1px;
 }
 
 .chatmessagebody__profileimage {
-  height: 23px;
-  width: 23px;
+  height: 25px;
+  width: 25px;
   margin-right: 6px;
   border-radius: 20px;
-  vertical-align: -5px;
+  vertical-align: -3px;
+  @media screen and ( min-width: 400px ){
+    height: 31px;
+    width: 31px;
+  }
 }
 
 .chatmessagebody__username {

app/controllers/messages_controller.rb

@@ -47,7 +47,7 @@ class MessagesController < ApplicationController
       username: new_message.user.username,
       profile_image_url: ProfileImage.new(new_message.user).get(90),
       message: new_message.message_html,
-      timestamp: new_message.created_at,
+      timestamp: Time.now,
       color: new_message.preferred_user_color,
       reception_method: "pushed"
     }.to_json

app/javascript/chat/message.jsx

@@ -31,7 +31,7 @@ const Message = ({
 
   return (
     <div className="chatmessage">
-      <div className="chatmessage__body" onClick={onContentTrigger}>
+      <div className="chatmessage__profilepic">
         <a 
           href={`/${user}`}
           target="_blank"
@@ -46,6 +46,8 @@ const Message = ({
             onClick={onContentTrigger}
           />
         </a>
+      </div>
+      <div className="chatmessage__body" onClick={onContentTrigger}>
         <span className="chatmessagebody__username" style={spanStyle}>
           <a
             className="chatmessagebody__username--link"
@@ -57,16 +59,17 @@ const Message = ({
             {user}
           </a>
         </span>
-        <span className="chatmessagebody__divider">: </span>
-        {messageArea}
+        {timestamp ? (
+          <span className="chatmessage__timestamp">
+            {`${adjustTimestamp(timestamp)}`}
+          </span>
+        ) : (
+          <span />
+        )}
+        <div className="chatmessage__bodytext">
+          {messageArea}
+        </div>
       </div>
-      {timestamp ? (
-        <span className="chatmessage__timestamp">
-          {`${adjustTimestamp(timestamp)}`}
-        </span>
-      ) : (
-        <span />
-      )}
     </div>
   );
 };