Fix select colors for sent messages and link text not selectable (#1924)

* do not update sent_at for synced messages

* reply to message context menu only visible if msg sent

* Allow scrolling in mentioning people in composition box

Relates #1849

* fix selection colors for sent messages and make link selectable

Relates #1922

main.js

@@ -535,7 +535,7 @@ function showAbout() {
     resizable: false,
     title: locale.messages.about,
     autoHideMenuBar: true,
-    backgroundColor: '#2090EA',
+    backgroundColor: '#ffffff',
     show: false,
     webPreferences: {
       nodeIntegration: false,

stylesheets/_global.scss

@@ -100,7 +100,8 @@ button.grey {
 }
 
 a {
-  color: $blue;
+  cursor: auto;
+  user-select: text;
 }
 
 .file-input {

stylesheets/_modules.scss

@@ -1628,12 +1628,6 @@
   background-color: rgba(var(--color-sent-message-text), 0.2);
 }
 
-// Module: Highlighted Message Body
-
-.module-message-body__highlight {
-  font-weight: bold;
-}
-
 // Module: Search Results
 
 .module-search-results {

stylesheets/_session.scss

@@ -36,13 +36,13 @@ textarea {
   input,
   textarea {
     user-select: text;
-
-    &::selection {
-      background: var(--color-text-highlight);
-    }
   }
 }
 
+::selection {
+  background: var(--color-text-highlight);
+}
+
 .shadowed {
   opacity: $session-shadow-opacity;
 }

ts/components/MessageBodyHighlight.tsx

@@ -1,88 +0,0 @@
-import React from 'react';
-
-import { MessageBody } from './conversation/MessageBody';
-import { Emojify } from './conversation/Emojify';
-import { AddNewLines } from './conversation/AddNewLines';
-
-import { SizeClassType } from '../util/emoji';
-
-import { RenderTextCallbackType } from '../types/Util';
-
-type Props = {
-  text: string;
-};
-
-const renderNewLines: RenderTextCallbackType = ({ text, key }) => (
-  <AddNewLines key={key} text={text} />
-);
-
-const renderEmoji = ({
-  text,
-  key,
-  sizeClass,
-  renderNonEmoji,
-}: {
-  text: string;
-  key: number;
-  sizeClass?: SizeClassType;
-  renderNonEmoji: RenderTextCallbackType;
-}) => <Emojify key={key} text={text} sizeClass={sizeClass} renderNonEmoji={renderNonEmoji} />;
-
-export const MessageBodyHighlight = (props: Props) => {
-  const { text } = props;
-  const results: Array<any> = [];
-  const FIND_BEGIN_END = /<<left>>(.+?)<<right>>/g;
-
-  let match = FIND_BEGIN_END.exec(text);
-  let last = 0;
-  let count = 1;
-
-  if (!match) {
-    return <MessageBody disableJumbomoji={true} disableLinks={true} text={text} />;
-  }
-
-  const sizeClass = '';
-
-  while (match) {
-    if (last < match.index) {
-      const beforeText = text.slice(last, match.index);
-      results.push(
-        renderEmoji({
-          text: beforeText,
-          sizeClass,
-          key: count++,
-          renderNonEmoji: renderNewLines,
-        })
-      );
-    }
-
-    const [, toHighlight] = match;
-    results.push(
-      <span className="module-message-body__highlight" key={count++}>
-        {renderEmoji({
-          text: toHighlight,
-          sizeClass,
-          key: count++,
-          renderNonEmoji: renderNewLines,
-        })}
-      </span>
-    );
-
-    // @ts-ignore
-    last = FIND_BEGIN_END.lastIndex;
-    match = FIND_BEGIN_END.exec(text);
-  }
-
-  if (last < text.length) {
-    results.push(
-      renderEmoji({
-        text: text.slice(last),
-        sizeClass,
-        key: count++,
-        renderNonEmoji: renderNewLines,
-      })
-    );
-  }
-
-  return results;
-};

ts/state/ducks/SessionTheme.tsx

@@ -50,7 +50,7 @@ const darkConversationItemSelected = '#404040';
 const darkConversationItemHasUnread = '#2c2c2c';
 const darkConversationList = '#1b1b1b';
 
-const darkTextHighlight = accentDarkTheme;
+const darkTextHighlight = `${white}88`;
 const darkForegroundPrimary = white;
 const darkBackgroundPrimary = '#474646';
 const darkButtonGreen = accentDarkTheme;
@@ -179,7 +179,7 @@ const lightConversationItemSelected = '#f0f0f0';
 const lightConversationItemHasUnread = '#fcfcfc';
 const lightConversationList = '#f9f9f9';
 
-const lightTextHighlight = accentLightTheme;
+const lightTextHighlight = `${black}88`;
 const lightForegroundPrimary = white;
 const lightBackgroundPrimary = '#272726';
 const lightButtonGreen = '#272726';