update invite friend dialog with session ui

stylesheets/_session.scss

@@ -1081,3 +1081,37 @@ label {
 input {
   user-select: text;
 }
+
+.dark-theme .invite-friends-dialog .member-item {
+  height: 64px;
+  background-color: $session-shade-4;
+  border: $session-separator-element-border;
+  display: flex;
+  transition: $session-transition-duration;
+
+  .module-avatar,
+  .name-part {  
+    margin: auto $session-margin-md;
+  }
+
+  .check-mark{
+    margin: auto $session-margin-xs;
+  }
+
+  .name-part {
+    flex-grow: 1;
+  }
+
+}
+
+.dark-theme .modal .content{
+  background-color: $session-shade-4;
+}
+
+.loki-dialog button {
+  border:none;
+}
+
+.friend-selection-list {
+  width: 40vh;
+}

ts/components/conversation/InviteFriendsDialog.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Contact, MemberList } from './MemberList';
+import { SessionIconButton, SessionIconType, SessionIconSize } from '../session/icon';
 
 interface Props {
   friendList: Array<any>;
@@ -63,6 +64,13 @@ export class InviteFriendsDialog extends React.Component<Props, State> {
 
     return (
       <div className="content">
+        <div className="session-modal__header__close">
+        <SessionIconButton
+          iconType={SessionIconType.Exit}
+          iconSize={SessionIconSize.Small}
+          onClick={this.closeDialog}
+        />
+              </div>
         <p className="titleText">{titleText}</p>
         <div className="friend-selection-list">
           <MemberList

ts/components/conversation/MemberList.tsx

@@ -68,6 +68,8 @@ class MemberItem extends React.Component<MemberItemProps> {
 
     const mark = markType === 'kicked' ? '✘' : '✔';
 
+    const nameAndPubKey = `${name} ${window.shortenPubkey(pubkey)}`;
+
     return (
       <div
         role="button"
@@ -78,8 +80,7 @@ class MemberItem extends React.Component<MemberItemProps> {
         onClick={this.handleClick}
       >
         {this.renderAvatar()}
-        <span className="name-part">{name}</span>
-        <span className="pubkey-part">{pubkey}</span>
+        <span className="name-part">{nameAndPubKey}</span>
         <span className={classNames(markClasses)}>{mark}</span>
       </div>
     );