Move quick reactions and sender

Work on issue #122.

src/assets/css/chat.scss

@@ -215,7 +215,7 @@ $admin-fg: white;
     }
     position: relative;
     .bubble {
-        background-color: #eeeeee;
+        background-color: #ededed;
         border-radius: 0px 10px 10px 10px;
         [dir="rtl"] & {
             border-radius: 10px 0px 10px 0px;
@@ -223,7 +223,7 @@ $admin-fg: white;
         padding: 8px;
         border-width: 1px !important;
         border-style: solid !important;
-        border-color: #eeeeee !important;
+        border-color: #ededed !important;
         display: inline-block;
         position: relative;
         max-width: 70%;
@@ -554,19 +554,19 @@ $admin-fg: white;
 
 .quick-reaction-container {
     display: inline-block;
-    position: absolute;
+    position: relative;
-    top: -12px;
+    vertical-align: bottom;
-    left: 50px;
+    transform: translateX(-20px) translateX(-100%);
+    top: 18px;
     z-index: 2;
-    background-color: #000000;
+    background-color: #f7f7f7;
-    border: 2px solid white;
+    border: 1px solid rgba(white, 0.9);
     border-radius: 13px;
     height: 26px;
     width: max-content;
     padding: 0px 6px;
     .messageOut & {
-        left: unset;
+        transform: translateX(20px) translateX(100%);
-        right: 50px;
     }
     .quick-reaction {
         position: relative;
@@ -575,7 +575,7 @@ $admin-fg: white;
         padding: 1px;
         font-size: 10px;
         &:hover {
-            border: 1px solid #888888;
+            //border: 1px solid #888888;
             background-color: #e2e2e2;
         }
         .quick-reaction-count {
@@ -584,7 +584,7 @@ $admin-fg: white;
         }
     }
     .sent .quick-reaction-count {
-        color: white;
+        color: black;
         font-weight: 700;
         // background-color: palegreen;
     }

src/components/messages/MessageIncoming.vue

@@ -1,13 +1,18 @@
 <template>
   <!-- BASE CLASS FOR INCOMING MESSAGE -->
   <div :class="messageClasses">
+    <div v-if="showSenderAndTime" class="senderAndTime">
+      <div class="sender">{{ messageEventDisplayName(event) }}</div>
+      <div class="time">
+        {{ formatTime(event.event.origin_server_ts) }}
+      </div>
+    </div>
     <v-avatar class="avatar" ref="avatar" size="32" color="#ededed" @click.stop="otherAvatarClicked($refs.avatar.$el)">
       <img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" />
       <span v-else class="white--text headline">{{
         messageEventDisplayName(event).substring(0, 1).toUpperCase()
       }}</span>
     </v-avatar>
-    <QuickReactions :event="event" :reactions="reactions" />
     <!-- SLOT FOR CONTENT -->
     <slot></slot>
     <div class="op-button" ref="opbutton">
@@ -15,12 +20,7 @@
         ><v-icon>more_vert</v-icon></v-btn
       >
     </div>
-    <div v-if="showSenderAndTime" class="senderAndTime">
+    <QuickReactions :event="event" :reactions="reactions" />
-      <div class="sender">{{ messageEventDisplayName(event) }}</div>
-      <div class="time">
-        {{ formatTime(event.event.origin_server_ts) }}
-      </div>
-    </div>
   </div>
 </template>
 

src/components/messages/MessageOutgoing.vue

@@ -1,12 +1,19 @@
 <template>
   <!-- BASE CLASS FOR OUTGOING MESSAGE -->
   <div class="messageOut">
+    <div class="senderAndTime">
+      <div class="time">
+        {{ formatTime(event.event.origin_server_ts) }}
+      </div>
+      <div class="status">{{ event.status }}</div>
+    </div>
+
+    <QuickReactions :event="event" :reactions="reactions" />
     <div class="op-button" ref="opbutton">
       <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
         ><v-icon>more_vert</v-icon></v-btn
       >
     </div>
-    <QuickReactions :event="event" :reactions="reactions" />
     <!-- SLOT FOR CONTENT -->
     <slot></slot>
     <v-avatar
@@ -18,13 +25,6 @@
       <img v-if="userAvatar" :src="userAvatar" />
       <span v-else class="white--text headline">{{ userAvatarLetter }}</span>
     </v-avatar>
-    <!-- <div class="sender">{{ $t('message.you') }}</div> -->
-    <div class="senderAndTime">
-      <div class="time">
-        {{ formatTime(event.event.origin_server_ts) }}
-      </div>
-      <div class="status">{{ event.status }}</div>
-    </div>
   </div>
 </template>