From 07cbf4526539f77d62c20986363dacb54952aa5e Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabrecat@gmail.com>
Date: Wed, 14 Nov 2018 16:31:35 -0600
Subject: [PATCH] fix(chat): less intrusive highlight and better margins

---
 website/client/components/chat/chatCard.vue   |  4 +-
 .../client/components/chat/chatMessages.vue   | 68 +++++++++++--------
 2 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/website/client/components/chat/chatCard.vue b/website/client/components/chat/chatCard.vue
index f992148b26..a7984c222f 100644
--- a/website/client/components/chat/chatCard.vue
+++ b/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');
@@ -294,7 +294,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>`;
       });
     },
diff --git a/website/client/components/chat/chatMessages.vue b/website/client/components/chat/chatMessages.vue
index b9fe937aa9..65a487695b 100644
--- a/website/client/components/chat/chatMessages.vue
+++ b/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)')
-    // @TODO: is there a different way to do these conditionals? This creates an infinite loop
-    //.hr(v-if='displayDivider(msg)')
-      .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)",
-        )
-      .card(:class='inbox ? "col-8" : "col-10"')
+  div(v-for="(msg, index) in messages", v-if='chat && canViewFlag(msg)', :class='{row: inbox}')
+    .d-flex(v-if='user._id !== msg.uuid', :class='{"flex-grow-1": inbox}')
+      avatar.avatar-left(
+        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='{"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')
-      .card(:class='inbox ? "col-8" : "col-10"')
+    .d-flex(v-if='user._id === msg.uuid', :class='{"flex-grow-1": inbox}')
+      .card(:class='{"col-10": inbox}')
         chat-card(
           :msg='msg',
           :inbox='inbox',
@@ -35,22 +32,36 @@
           @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]",
-          :avatarOnly="true",
-          :hideClassBadge='true',
-          :overrideTopPadding='"14px"',
-          @click.native="showMemberModal(msg.uuid)",
-        )
+      avatar(
+        v-if='msg.userStyles || (cachedProfileData[msg.uuid] && !cachedProfileData[msg.uuid].rejected)',
+        :member="msg.userStyles || cachedProfileData[msg.uuid]",
+        :avatarOnly="true",
+        :hideClassBadge='true',
+        :overrideTopPadding='"14px"',
+        @click.native="showMemberModal(msg.uuid)",
+        :class='{"inbox-avatar-right": inbox}'
+      )
 </template>
 
 <style lang="scss" scoped>
   @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>