Handle the case where the user is sending a friend request.

Fix up styling for outgoing message.

_locales/en/messages.json

@@ -1578,7 +1578,7 @@
       }
     }
   },
-  "friendRequestPending": {
+  "incomingFriendRequestPending": {
     "message": "$name$ sent you a friend request",
     "description":
       "Shown in the conversation history when the user recieves a friend request",
@@ -1589,7 +1589,7 @@
       }
     }
   },
-  "friendRequestAccepted": {
+  "incomingFriendRequestAccepted": {
     "message": "You accepted $name$'s friend request",
     "description":
       "Shown in the conversation history when the user accepts a friend request",
@@ -1600,7 +1600,7 @@
       }
     }
   },
-  "friendRequestDeclined": {
+  "incomingFriendRequestDeclined": {
     "message": "You declined $name$'s friend request",
     "description":
       "Shown in the conversation history when the user declines a friend request",
@@ -1610,5 +1610,38 @@
         "example": "Bob"
       }
     }
+  },
+  "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"
+      }
+    }
+  },
+  "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"
+      }
+    }
+  },
+  "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"
+      }
+    }
   }
 }

stylesheets/_modules.scss

@@ -1027,10 +1027,14 @@
 .module-friend-request__buttonContainer {
   margin-top: 8px;
   justify-content: space-around;
-  border-top: 1px solid $color-white-07;
+  border-top: 1px solid $color-gray-90;
   padding-top: 4px;
 }
 
+.module-friend-request__buttonContainer--incoming {
+  border-top: 1px solid $color-white-07;
+}
+
 .module-friend-request__buttonContainer button {
   flex: 0.5;
   padding: 8px;
@@ -1038,16 +1042,28 @@
   border: 0;
   overflow: hidden;
   outline:none;
+  color: $color-gray-90;
+}
+
+.module-friend-request__buttonContainer--incoming button {
   color: $color-white;
 }
 
 .module-friend-request__buttonContainer button:first-of-type {
+  border-right: 1px solid $color-gray-90;
+}
+
+.module-friend-request__buttonContainer--incoming button:first-of-type {
   border-right: 1px solid $color-white-07;
 }
 
 .module-friend-request__text {
   padding-top: 6px;
   padding-bottom: 4px;
+  color: $color-gray-60;
+}
+
+.module-friend-request__text--incoming {
   color: $color-white-08;
 }
 

ts/components/conversation/FriendRequest.tsx

@@ -25,22 +25,22 @@ interface Props {
 
 export class FriendRequest extends React.Component<Props> {
   public getStringId() {
-    const { status } = this.props;
+    const { type, status } = this.props;
 
     switch (status) {
       case 'pending':
-        return 'friendRequestPending';
+        return `${type}FriendRequestPending`;
       case 'accepted':
-        return 'friendRequestAccepted';
+        return `${type}FriendRequestAccepted`;
       case 'declined':
-        return 'friendRequestDeclined';
+        return `${type}FriendRequestDeclined`;
       default:
         throw new Error(`Invalid friend request status: ${status}`);
     }
   }
 
   public renderText() {
-    const { text, i18n } = this.props;
+    const { type, text, i18n } = this.props;
 
     if (!text) {
       return null;
@@ -49,7 +49,7 @@ export class FriendRequest extends React.Component<Props> {
     return (
       <div
         dir="auto"
-        className='module-message__text module-friend-request__text'
+        className={`module-message__text module-friend-request__text module-friend-request__text--${type}`}
       >
         <MessageBody text={text || ''} i18n={i18n} />
       </div>
@@ -84,9 +84,9 @@ export class FriendRequest extends React.Component<Props> {
   }
 
   public renderButtons() {
-      const { onAccept, onDecline } = this.props;
+      const { type, onAccept, onDecline } = this.props;
       return (
-          <div className="module-message__metadata module-friend-request__buttonContainer">
+          <div className={`module-message__metadata module-friend-request__buttonContainer module-friend-request__buttonContainer--${type}`}>
             <button onClick={onAccept}>Accept</button>
             <button onClick={onDecline}>Decline</button>
           </div>
@@ -96,12 +96,14 @@ export class FriendRequest extends React.Component<Props> {
   public render() {
     const { type, status} = this.props;
 
+    const shouldRenderButtons = (status === 'pending' && type === 'incoming');
+
     return (
       <div className={`module-message module-message--${type}`}>
         <div className={`module-message__container module-message__container--${type}`}>
             <div className={`module-message__text module-message__text--${type}`}>
                 {this.renderContents()}
-                {(status === 'pending') && this.renderButtons()}
+                {shouldRenderButtons && this.renderButtons()}
             </div>
         </div>
       </div>