From 72d31bf1583fdd5cc1126086281e97210fbda28d Mon Sep 17 00:00:00 2001
From: Warrick Corfe-Tan <warrickct@gmail.com>
Date: Wed, 2 Jun 2021 19:58:33 +1000
Subject: [PATCH] Modal header additions. Close and back button.

---
 ts/components/EditProfileDialog.tsx           | 8 +++++++-
 ts/components/OnionStatusDialog.tsx           | 1 +
 ts/components/session/SessionWrapperModal.tsx | 4 +++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/ts/components/EditProfileDialog.tsx b/ts/components/EditProfileDialog.tsx
index eeeb2b100..fd4f7dc33 100644
--- a/ts/components/EditProfileDialog.tsx
+++ b/ts/components/EditProfileDialog.tsx
@@ -134,6 +134,11 @@ export class EditProfileDialog extends React.Component<Props, State> {
       <div className="edit-profile-dialog">
 
         <SessionWrapperModal
+                title={i18n('editProfileModalTitle')}
+        onClose={this.closeDialog}
+        headerIconButtons={backButton}
+        showExitIcon={true}
+        theme={this.props.theme}
         >
           <div className="spacer-md" />
 
@@ -219,12 +224,13 @@ export class EditProfileDialog extends React.Component<Props, State> {
   }
 
   private renderDefaultView() {
+    const name = this.state.setProfileName ? this.state.setProfileName : this.state.profileName;
     return (
       <>
         {this.renderProfileHeader()}
 
         <div className="profile-name-uneditable">
-          <p>{this.state.setProfileName}</p>
+          <p>{name}</p>
           <SessionIconButton
             iconType={SessionIconType.Pencil}
             iconSize={SessionIconSize.Medium}
diff --git a/ts/components/OnionStatusDialog.tsx b/ts/components/OnionStatusDialog.tsx
index 4bb4ec19e..d74cd7714 100644
--- a/ts/components/OnionStatusDialog.tsx
+++ b/ts/components/OnionStatusDialog.tsx
@@ -135,6 +135,7 @@ export const OnionPathModal = (props: OnionPathModalType) => {
       cancelText={props.cancelText || window.i18n('cancel')}
       onConfirm={onConfirm}
       onClose={props.onClose}
+      showExitIcon={true}
     >
       <OnionPathModalInner {...props}></OnionPathModalInner>
     </SessionWrapperModal>
diff --git a/ts/components/session/SessionWrapperModal.tsx b/ts/components/session/SessionWrapperModal.tsx
index 623f8c592..4772f221a 100644
--- a/ts/components/session/SessionWrapperModal.tsx
+++ b/ts/components/session/SessionWrapperModal.tsx
@@ -39,6 +39,7 @@ export type SessionWrapperModalType = {
   theme?: any;
   headerIconButtons?: any[];
   children: any;
+  headerReverse?: boolean;
 };
 
 export const SessionWrapperModal = (props: SessionWrapperModalType) => {
@@ -52,6 +53,7 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
     showExitIcon,
     theme,
     headerIconButtons,
+    headerReverse
   } = props;
 
   useEffect(() => {
@@ -75,7 +77,7 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
     <div className="loki-dialog session-confirm-wrapper modal">
       <div className="session-confirm-wrapper">
         <div className="session-modal">
-          <div className="session-modal__header">
+          <div className={classNames('session-modal__header', headerReverse && 'reverse')}>
             <div className="session-modal__header__close">
               {showExitIcon ? (
                 <SessionIconButton