Fix up friend request message layout

_locales/en/messages.json

@@ -1579,69 +1579,19 @@
     }
   },
   "incomingFriendRequestPending": {
-    "message": "$name$ sent you a friend request",
-    "description":
-      "Shown in the conversation history when the user recieves a friend request",
-    "placeholders": {
-      "name": {
-        "content": "$1",
-        "example": "Bob"
-      }
-    }
-  },
-  "incomingFriendRequestAccepted": {
-    "message": "You accepted $name$'s friend request",
-    "description":
-      "Shown in the conversation history when the user accepts a friend request",
-    "placeholders": {
-      "name": {
-        "content": "$1",
-        "example": "Bob"
-      }
-    }
-  },
-  "incomingFriendRequestDeclined": {
-    "message": "You declined $name$'s friend request",
-    "description":
-      "Shown in the conversation history when the user declines a friend request",
-    "placeholders": {
-      "name": {
-        "content": "$1",
-        "example": "Bob"
-      }
-    }
+    "message": "Friend request received",
+    "description": "Shown in the conversation history when the user recieves a friend request"
   },
   "outgoingFriendRequestPending": {
-    "message": "You sent $name$ a friend request",
-    "description":
-      "Shown in the conversation history when the user sends a friend request",
-    "placeholders": {
-      "name": {
-        "content": "$1",
-        "example": "Bob"
-      }
-    }
+    "message": "Friend request sent",
+    "description": "Shown in the conversation history when the user sends a friend request"
   },
-  "outgoingFriendRequestAccepted": {
-    "message": "$name$ accepted your friend request",
-    "description":
-      "Shown in the conversation history when the users friend request is accepted",
-    "placeholders": {
-      "name": {
-        "content": "$1",
-        "example": "Bob"
-      }
-    }
+  "friendRequestAccepted": {
+    "message": "Friend request accepted",
+    "description": "Shown in the conversation history when the user accepts a friend request"
   },
-  "outgoingFriendRequestDeclined": {
-    "message": "$name$ declined your friend request",
-    "description":
-      "Shown in the conversation history when the users friend request is declined",
-    "placeholders": {
-      "name": {
-        "content": "$1",
-        "example": "Bob"
-      }
-    }
+  "friendRequestDeclined": {
+    "message": "Friend request declined",
+    "description": "Shown in the conversation history when the user declines a friend request"
   }
 }

stylesheets/_modules.scss

@@ -1065,13 +1065,13 @@
   border-right: 0;
 }
 
-.module-friend-request__text {
-  padding-top: 6px;
+.module-friend-request__title {
   padding-bottom: 4px;
   color: $color-gray-60;
+  text-align: center;
 }
 
-.module-friend-request__text--incoming {
+.module-friend-request__title--incoming {
   color: $color-white-08;
 }
 
@@ -2242,6 +2242,14 @@
     max-width: 374px;
   }
 
+  .module-message-friend-request {
+    width: 374px;
+  }
+
+  .module-message-friend-request__container {
+    flex: 1,
+  }
+
   // Spec: container < 438px
   .module-message--incoming {
     margin-left: 0;
@@ -2275,6 +2283,14 @@
     max-width: 66%;
   }
 
+  .module-message-friend-request {
+    width: 66%;
+  }
+
+  .module-message-friend-request__container {
+    flex: 1,
+  }
+
   .module-message--incoming {
     margin-left: 0;
     margin-right: auto;

ts/components/conversation/FriendRequest.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 // import classNames from 'classnames';
 
-import { ContactName } from './ContactName';
-import { Intl } from '../Intl';
 import { Localizer } from '../../types/Util';
 import { MessageBody } from './MessageBody';
 
@@ -26,59 +24,32 @@ interface Props {
 
 export class FriendRequest extends React.Component<Props> {
   public getStringId() {
-    const { type, status } = this.props;
+    const { status, type } = this.props;
 
     switch (status) {
       case 'pending':
         return `${type}FriendRequestPending`;
       case 'accepted':
-        return `${type}FriendRequestAccepted`;
+        return `friendRequestAccepted`;
       case 'declined':
-        return `${type}FriendRequestDeclined`;
+        return `friendRequestDeclined`;
       default:
         throw new Error(`Invalid friend request status: ${status}`);
     }
   }
 
-  public renderText() {
-    const { type, text, i18n } = this.props;
-
-    if (!text) {
-      return null;
-    }
-
-    return (
-      <div
-        dir="auto"
-        className={`module-message__text module-friend-request__text module-friend-request__text--${type}`}
-      >
-        <MessageBody text={text || ''} i18n={i18n} />
-      </div>
-    );
-  }
-
-
   public renderContents() {
-    const { source, i18n } = this.props;
+    const { type, i18n, text } = this.props;
     const id = this.getStringId();
 
     return (
       <div>
-        <Intl
-            id={id}
-            components={[
-            <ContactName
-                i18n={i18n}
-                key="external-1"
-                name={source.name}
-                profileName={source.profileName}
-                phoneNumber={source.phoneNumber}
-                module="module-friend-request__contact"
-            />,
-            ]}
-            i18n={i18n}
-        />
-        {this.renderText()}
+        <div className={`module-friend-request__title module-friend-request__title--${type}`}>{i18n(id)}</div>
+        {!!text &&
+          <div dir="auto">
+            <MessageBody text={text || ''} i18n={i18n} />
+          </div>
+        }
       </div>
       
     );
@@ -110,8 +81,8 @@ export class FriendRequest extends React.Component<Props> {
     const { type} = this.props;
 
     return (
-      <div className={`module-message module-message--${type}`}>
-        <div className={`module-message__container module-message__container--${type}`}>
+      <div className={`module-message module-message--${type} module-message-friend-request`}>
+        <div className={`module-message__container module-message__container--${type} module-message-friend-request__container`}>
             <div className={`module-message__text module-message__text--${type}`}>
                 {this.renderContents()}
                 {this.renderButtons()}