From a7f2072eb7c2fa65d858e1d4b369480be2e8dcf4 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Wed, 15 Jan 2020 16:33:45 +1100
Subject: [PATCH] update invite friend dialog with session ui

---
 stylesheets/_session.scss                     | 34 +++++++++++++++++++
 .../conversation/InviteFriendsDialog.tsx      |  8 +++++
 ts/components/conversation/MemberList.tsx     |  5 +--
 3 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 4bff6e90e..02a25d1a9 100644
--- a/stylesheets/_session.scss
+++ b/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;
+}
diff --git a/ts/components/conversation/InviteFriendsDialog.tsx b/ts/components/conversation/InviteFriendsDialog.tsx
index 2a1fc9c16..ddf3d6e1e 100644
--- a/ts/components/conversation/InviteFriendsDialog.tsx
+++ b/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
diff --git a/ts/components/conversation/MemberList.tsx b/ts/components/conversation/MemberList.tsx
index 36b6aa8b3..80601b04a 100644
--- a/ts/components/conversation/MemberList.tsx
+++ b/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>
     );