fix(chat): less intrusive highlight and better margins

website/client/components/chat/chatCard.vue

@@ -211,7 +211,7 @@ export default {
 
       const escapedDisplayName = escapeRegExp(displayName);
       const escapedUsername = escapeRegExp(username);
-      const pattern = `@(${escapedUsername}|${escapedDisplayName})([^\w]|$)`;
+      const pattern = `@(${escapedUsername}|${escapedDisplayName})(\\b)`;
       const precedingChar = messageText.substring(mentioned - 1, mentioned);
       if (mentioned === 0 || precedingChar.trim() === '' || precedingChar === '@') {
         let regex = new RegExp(pattern, 'i');
@@ -304,7 +304,7 @@ export default {
       this.$emit('show-member-modal', memberId);
     },
     atHighlight (text) {
-      return text.replace(new RegExp(/(?!\b)@[\w-]+/g), match => {
+      return text.replace(new RegExp(`@(${this.user.auth.local.username}|${this.user.profile.name})(?:\\b)`, 'gi'), match => {
         return `<span class="at-highlight">${match}</span>`;
       });
     },

website/client/components/chat/chatMessages.vue

@@ -1,24 +1,21 @@
 <template lang="pug">
-.container
+.container-fluid
   .row
     .col-12
       copy-as-todo-modal(:group-type='groupType', :group-name='groupName', :group-id='groupId')
       report-flag-modal
-  div(v-for="(msg, index) in messages", v-if='chat && canViewFlag(msg)')
+  div(v-for="(msg, index) in messages", v-if='chat && canViewFlag(msg)', :class='{row: inbox}')
-    // @TODO: is there a different way to do these conditionals? This creates an infinite loop
+    .d-flex(v-if='user._id !== msg.uuid', :class='{"flex-grow-1": inbox}')
-    //.hr(v-if='displayDivider(msg)')
+      avatar.avatar-left(
-      .hr-middle(v-once) {{ msg.timestamp }}
-    .row(v-if='user._id !== msg.uuid')
-      div(:class='inbox ? "col-4" : "col-2"')
-        avatar(
         v-if='msg.userStyles || (cachedProfileData[msg.uuid] && !cachedProfileData[msg.uuid].rejected)',
         :member="msg.userStyles || cachedProfileData[msg.uuid]",
         :avatarOnly="true",
         :overrideTopPadding='"14px"',
         :hideClassBadge='true',
         @click.native="showMemberModal(msg.uuid)",
+        :class='{"inbox-avatar-left": inbox}'
       )
-      .card(:class='inbox ? "col-8" : "col-10"')
+      .card(:class='{"col-10": inbox}')
         chat-card(
           :msg='msg',
           :inbox='inbox',
@@ -26,8 +23,8 @@
           @message-liked='messageLiked',
           @message-removed='messageRemoved',
           @show-member-modal='showMemberModal')
-    .row(v-if='user._id === msg.uuid')
+    .d-flex(v-if='user._id === msg.uuid', :class='{"flex-grow-1": inbox}')
-      .card(:class='inbox ? "col-8" : "col-10"')
+      .card(:class='{"col-10": inbox}')
         chat-card(
           :msg='msg',
           :inbox='inbox',
@@ -35,7 +32,6 @@
           @message-liked='messageLiked',
           @message-removed='messageRemoved',
           @show-member-modal='showMemberModal')
-      div(:class='inbox ? "col-4" : "col-2"')
       avatar(
         v-if='msg.userStyles || (cachedProfileData[msg.uuid] && !cachedProfileData[msg.uuid].rejected)',
         :member="msg.userStyles || cachedProfileData[msg.uuid]",
@@ -43,6 +39,7 @@
         :hideClassBadge='true',
         :overrideTopPadding='"14px"',
         @click.native="showMemberModal(msg.uuid)",
+        :class='{"inbox-avatar-right": inbox}'
       )
 </template>
 
@@ -50,7 +47,21 @@
   @import '~client/assets/scss/colors.scss';
 
   .avatar {
-    margin-left: -1.75rem;
+    width: 15%;
+  }
+
+  .avatar-left {
+    margin-left: -1.5rem;
+    margin-right: 2rem;
+  }
+
+  .inbox-avatar-left {
+    margin-left: -1rem;
+    margin-right: 2.5rem;
+  }
+
+  .inbox-avatar-right {
+    margin-left: -3.5rem;
   }
 
   .hr {
@@ -79,6 +90,7 @@
     border: 0px;
     margin-bottom: .5em;
     padding: 0rem;
+    width: 85%;
   }
 </style>