add the accept/decline buttons on friend requests in conversationslist

_locales/en/messages.json

@@ -2427,5 +2427,11 @@
   },
   "yourPublicKey": {
     "message": "Your Public Key"
+  },
+  "accept": {
+    "message": "Accept"
+  },
+  "decline": {
+    "message": "Decline"
   }
 }

stylesheets/_session_theme_dark_left_pane.scss

@@ -284,6 +284,28 @@ $session-compose-margin: 20px;
   &-content {
     display: flex;
     flex-direction: column;
+    .module-conversation-list-item {
+      &--has-friend-request {
+        border: 1px solid $session-shade-8 !important;
+        
+        .module-conversation__user__profile-number,
+        .module-conversation__user__profile-name {
+          font-size: 13px !important;
+        }
+      }
+
+      &__buttons {
+        display: flex;
+
+        .session-button {
+          font-size: 11px;
+          padding: 6px;
+          height: auto;
+          margin: 0px;
+          line-height: 14px;      
+        }
+      }
+    }
   }
 
   &-bottom-buttons {
@@ -298,6 +320,8 @@ $session-compose-margin: 20px;
       line-height: 50px;
     }
   }
+
+  
 }
 
 .panel-text-divider {

ts/components/ConversationListItem.tsx

@@ -11,6 +11,7 @@ import { ContactName } from './conversation/ContactName';
 import { TypingAnimation } from './conversation/TypingAnimation';
 
 import { Colors, LocalizerType } from '../types/Util';
+import { SessionButton, SessionButtonColor } from './session/SessionButton';
 
 export type PropsData = {
   id: string;
@@ -72,9 +73,15 @@ export class ConversationListItem extends React.PureComponent<Props> {
       phoneNumber,
       profileName,
       isOnline,
+      showFriendRequestIndicator,
     } = this.props;
 
-    const borderColor = isOnline ? Colors.ONLINE : Colors.OFFLINE;
+
+    let borderColor = undefined;
+    if (!showFriendRequestIndicator) {
+      borderColor = isOnline ? Colors.ONLINE : Colors.OFFLINE;
+    }
+    const iconSize = showFriendRequestIndicator ? 28 : 48;
 
     return (
       <div className="module-conversation-list-item__avatar-container">
@@ -87,7 +94,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
           name={name}
           phoneNumber={phoneNumber}
           profileName={profileName}
-          size={48}
+          size={iconSize}
           borderColor={borderColor}
         />
       </div>
@@ -114,7 +121,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
   }
 
   public renderHeader() {
-    const { unreadCount, i18n, isMe, lastUpdated, isFriendItem } = this.props;
+    const { unreadCount, i18n, isMe, lastUpdated, isFriendItem, showFriendRequestIndicator } = this.props;
 
     return (
       <div className="module-conversation-list-item__header">
@@ -128,7 +135,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
         >
           {isMe ? i18n('noteToSelf') : this.renderUser()}
         </div>
-        {this.renderUnread()}
+        {showFriendRequestIndicator || this.renderUnread()}
         {!isFriendItem && (
           <div
             className={classNames(
@@ -138,12 +145,13 @@ export class ConversationListItem extends React.PureComponent<Props> {
                 : null
             )}
           >
-            <Timestamp
+            {showFriendRequestIndicator || (<Timestamp
               timestamp={lastUpdated}
               extended={false}
               module="module-conversation-list-item__header__timestamp"
               i18n={i18n}
-            />
+            />)
+            }
           </div>
         )}
       </div>
@@ -209,6 +217,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
       unreadCount,
       i18n,
       isFriendItem,
+      showFriendRequestIndicator,
     } = this.props;
 
     if (isFriendItem) {
@@ -226,6 +235,10 @@ export class ConversationListItem extends React.PureComponent<Props> {
       text = text.replace(/<[^>]*>?/gm, '');
     }
 
+    if (showFriendRequestIndicator) {
+      text = text.replace('Friend Request: ', '');
+    }
+
     if (isEmpty(text)) {
       return null;
     }
@@ -265,6 +278,16 @@ export class ConversationListItem extends React.PureComponent<Props> {
     );
   }
 
+  public renderFriendRequestButtons() {
+
+    return (
+      <div className="module-conversation-list-item__buttons">
+        <SessionButton text={window.i18n('decline')} buttonColor={SessionButtonColor.None}/>
+        <SessionButton text={window.i18n('accept')} />
+      </div>
+    );
+  }
+
   public render() {
     const {
       phoneNumber,
@@ -278,6 +301,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
       mentionedUs,
     } = this.props;
 
+
     const triggerId = `${phoneNumber}-ctxmenu-${Date.now()}`;
 
     return (
@@ -311,6 +335,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
               {this.renderHeader()}
               {this.renderMessage()}
             </div>
+            {showFriendRequestIndicator && this.renderFriendRequestButtons()}
           </div>
         </ContextMenuTrigger>
         <Portal>{this.renderContextMenu(triggerId)}</Portal>

ts/components/session/SessionButton.tsx

@@ -19,6 +19,7 @@ export enum SessionButtonColor {
   Success = 'success',
   Danger = 'danger',
   Warning = 'warning',
+  None = '',
 }
 
 interface Props {

ts/types/Util.ts

@@ -24,5 +24,5 @@ export type ColorType =
 export enum Colors {
   OFFLINE = '#3d3e44',
   OFFLINE_LIGHT = '#cccece',
-  ONLINE = '#1c8260',
+  ONLINE = '#00f782',
 }