render GroupNotification messages

stylesheets/_modules.scss

@@ -937,6 +937,10 @@
   .module-contact-name__profile-name {
     text-align: center;
   }
+
+  .module-message__author__profile-name {
+    margin-inline-end: $session-margin-xs;
+  }
 }
 
 .module-notification--with-click-handler {

stylesheets/_session.scss

@@ -766,8 +766,6 @@ label {
     }
   }
 
-
-
   .react-contexify__item:not(.react-contexify__item--disabled):hover
     > .react-contexify__item__content {
     @include themify($themes) {

ts/components/conversation/GroupNotification.tsx

@@ -21,7 +21,6 @@ interface Change {
 
 interface Props {
   changes: Array<Change>;
-  i18n: LocalizerType;
 }
 
 // This class is used to display group updates in the conversation view.
@@ -29,7 +28,7 @@ interface Props {
 export class GroupNotification extends React.Component<Props> {
   public renderChange(change: Change) {
     const { isMe, contacts, type, newName } = change;
-    const { i18n } = this.props;
+    const { i18n } = window;
 
     const people = compact(
       flatten(

ts/components/session/conversation/SessionConversationMessagesList.tsx

@@ -10,6 +10,7 @@ import _ from 'lodash';
 import { ConversationModel } from '../../../../js/models/conversations';
 import { contextMenu } from 'react-contexify';
 import { AttachmentType } from '../../../types/Attachment';
+import { GroupNotification } from '../../conversation/GroupNotification';
 
 interface State {
   isScrolledToBottom: boolean;
@@ -119,25 +120,25 @@ export class SessionConversationMessagesList extends React.Component<
           const attachmentProps = message.propsForAttachment;
           const groupNotificationProps = message.propsForGroupNotification;
 
-          let item;
+          if (groupNotificationProps) {
+            return <GroupNotification {...groupNotificationProps} />;
+          }
+
+          if (resetSessionProps) {
+            return <ResetSessionNotification {...resetSessionProps} />;
+          }
+
+          if (timerProps) {
+            return <TimerNotification {...timerProps} />;
+          }
+
           // firstMessageOfSeries tells us to render the avatar only for the first message
           // in a series of messages from the same user
-          item = messageProps
-            ? this.renderMessage(
-                messageProps,
-                message.firstMessageOfSeries,
-                multiSelectMode
-              )
-            : item;
-
-          item = timerProps ? <TimerNotification {...timerProps} /> : item;
-          item = resetSessionProps ? (
-            <ResetSessionNotification {...resetSessionProps} />
-          ) : (
-            item
+          return this.renderMessage(
+            messageProps,
+            message.firstMessageOfSeries,
+            multiSelectMode
           );
-
-          return item;
         })}
       </>
     );

ts/state/ducks/conversations.ts

@@ -177,7 +177,10 @@ function removeAllConversations(): RemoveAllConversationsActionType {
   };
 }
 
-function loadMoreMessages(id: string, currentMessageCount: number): LoadMoreMessagesActionType {
+function loadMoreMessages(
+  id: string,
+  currentMessageCount: number
+): LoadMoreMessagesActionType {
   return {
     type: 'LOAD_MORE_MESSAGES_ACTION_TYPE',
     payload: {
@@ -227,7 +230,6 @@ function openConversationExternal(
   };
 }
 
-
 // Reducer
 
 function getEmptyState(): ConversationsStateType {