render Session Verification Messages

js/models/conversations.js

@@ -52,20 +52,6 @@
     request_received: 2,
   });
 
-  const COLORS = [
-    'red',
-    'deep_orange',
-    'brown',
-    'pink',
-    'purple',
-    'indigo',
-    'blue',
-    'teal',
-    'green',
-    'light_green',
-    'blue_grey',
-  ];
-
   Whisper.Conversation = Backbone.Model.extend({
     storeName: 'conversations',
     defaults() {
@@ -2609,6 +2595,4 @@
       this.reset([]);
     },
   });
-
-  Whisper.Conversation.COLORS = COLORS.concat(['grey', 'default']).join(' ');
 })();

js/models/messages.d.ts

@@ -60,5 +60,6 @@ export interface MessageModel extends Backbone.Model<MessageAttributes> {
   propsForResetSessionNotification?: any;
   propsForGroupInvitation?: any;
   propsForGroupNotification?: any;
+  propsForVerificationNotification?: any;
   firstMessageOfSeries: boolean;
 }

stylesheets/_session.scss

@@ -1507,7 +1507,10 @@ input {
   align-items: center;
   padding-top: $session-margin-lg;
   text-align: center;
-
+  @include themify($themes) {
+    background: themed('inboxBackground');
+    color: themed('textColor');
+  }
   &__header {
     word-break: break-all;
 
@@ -1525,6 +1528,7 @@ input {
     font-family: $session-font-mono;
     margin: 30px 0;
     width: 250px;
+    color: white;
   }
 
   &__is-verified {

ts/components/conversation/VerificationNotification.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 
 import { ContactName } from './ContactName';
 import { Intl } from '../Intl';
-import { LocalizerType } from '../../types/Util';
 
 import { missingCaseError } from '../../util/missingCaseError';
 
@@ -13,16 +12,15 @@ interface Contact {
   name?: string;
 }
 
-interface Props {
+type Props = {
   type: 'markVerified' | 'markNotVerified';
   isLocal: boolean;
   contact: Contact;
-  i18n: LocalizerType;
-}
+};
 
-export class VerificationNotification extends React.Component<Props> {
-  public getStringId() {
-    const { isLocal, type } = this.props;
+export const VerificationNotification = (props: Props) => {
+  const getStringId = () => {
+    const { isLocal, type } = props;
 
     switch (type) {
       case 'markVerified':
@@ -36,11 +34,12 @@ export class VerificationNotification extends React.Component<Props> {
       default:
         throw missingCaseError(type);
     }
-  }
+  };
 
-  public renderContents() {
-    const { contact, i18n } = this.props;
-    const id = this.getStringId();
+  const renderContents = () => {
+    const { contact } = props;
+    const { i18n } = window;
+    const id = getStringId();
 
     return (
       <Intl
@@ -59,18 +58,16 @@ export class VerificationNotification extends React.Component<Props> {
         i18n={i18n}
       />
     );
-  }
+  };
 
-  public render() {
-    const { type } = this.props;
-    const suffix =
-      type === 'markVerified' ? 'mark-verified' : 'mark-not-verified';
+  const { type } = props;
+  const suffix =
+    type === 'markVerified' ? 'mark-verified' : 'mark-not-verified';
 
-    return (
-      <div className="module-verification-notification">
-        <div className={`module-verification-notification__icon--${suffix}`} />
-        {this.renderContents()}
-      </div>
-    );
-  }
-}
+  return (
+    <div className="module-verification-notification">
+      <div className={`module-verification-notification__icon--${suffix}`} />
+      {renderContents()}
+    </div>
+  );
+};

ts/components/session/conversation/SessionConversation.tsx

@@ -130,10 +130,10 @@ export class SessionConversation extends React.Component<Props, State> {
     this.onClickAttachment = this.onClickAttachment.bind(this);
     this.downloadAttachment = this.downloadAttachment.bind(this);
     this.refreshMessages = this.refreshMessages.bind(this);
-    this.getMessages = _.throttle(
-      this.getMessages.bind(this),
-      1000 // one second
-    );
+    // this.getMessages = _.throttle(
+    //   this.getMessages.bind(this),
+    //   1000 // one second
+    // );
 
     // Keyboard navigation
     this.onKeyDown = this.onKeyDown.bind(this);
@@ -219,6 +219,7 @@ export class SessionConversation extends React.Component<Props, State> {
       selectedMessages,
       isDraggingFile,
       stagedAttachments,
+      initialFetchComplete,
     } = this.state;
     const selectionMode = !!selectedMessages.length;
 
@@ -273,7 +274,11 @@ export class SessionConversation extends React.Component<Props, State> {
           {lightBoxOptions?.media && this.renderLightBox(lightBoxOptions)}
 
           <div className="conversation-messages">
-            <SessionConversationMessagesList {...this.getMessagesListProps()} />
+            {initialFetchComplete && (
+              <SessionConversationMessagesList
+                {...this.getMessagesListProps()}
+              />
+            )}
 
             {showRecordingView && (
               <div className="conversation-messages__blocking-overlay" />

ts/components/session/conversation/SessionConversationMessagesList.tsx

@@ -14,6 +14,7 @@ import { GroupInvitation } from '../../conversation/GroupInvitation';
 import { ConversationType } from '../../../state/ducks/conversations';
 import { MessageModel } from '../../../../js/models/messages';
 import { SessionLastSeenIndicator } from './SessionLastSeedIndicator';
+import { VerificationNotification } from '../../conversation/VerificationNotification';
 
 interface State {
   isScrolledToBottom: boolean;
@@ -126,6 +127,8 @@ export class SessionConversationMessagesList extends React.Component<
 
           const timerProps = message.propsForTimerNotification;
           const resetSessionProps = message.propsForResetSessionNotification;
+          const verificationSessionProps =
+            message.propsForVerificationNotification;
           const propsForGroupInvitation = message.propsForGroupInvitation;
 
           const groupNotificationProps = message.propsForGroupNotification;
@@ -139,6 +142,7 @@ export class SessionConversationMessagesList extends React.Component<
           ) {
             unreadIndicator = <SessionLastSeenIndicator count={unreadCount} />;
           }
+
           currentMessageIndex = currentMessageIndex + 1;
 
           if (groupNotificationProps) {
@@ -159,6 +163,15 @@ export class SessionConversationMessagesList extends React.Component<
             );
           }
 
+          if (verificationSessionProps) {
+            return (
+              <>
+                {unreadIndicator}
+                <VerificationNotification {...verificationSessionProps} />
+              </>
+            );
+          }
+
           if (resetSessionProps) {
             return (
               <>
@@ -186,7 +199,7 @@ export class SessionConversationMessagesList extends React.Component<
                 messageProps,
                 message.firstMessageOfSeries,
                 multiSelectMode
-              )}{' '}
+              )}
             </>
           );
         })}