Fixed modal header styling for onion path dialog.

stylesheets/_modal.scss

@@ -235,7 +235,6 @@
       border-radius: 50%;
       background-color: $session-color-white;
       transition: $session-transition-duration;
-      margin-top: 30px;
 
       &:hover {
         filter: brightness(90%);

stylesheets/_session.scss

@@ -476,6 +476,7 @@ label {
     }
     &__close > div {
       float: left;
+      margin: 0px;
     }
     &__icons > div {
       float: right;
@@ -756,7 +757,6 @@ label {
   background-color: rgba($session-color-black, 0.72);
   opacity: 0;
   transition: $session-transition-duration;
-  margin: 30px 0px;
 
   &:after {
     content: 'Edit';
@@ -1199,7 +1199,11 @@ input {
   }
 }
 
-// .session-onion-path-wrapper {
+
+.onion__description {
+  min-width: 100%;
+  width: 0;
+}
 
 .onion__node-list {
   display: flex;
@@ -1223,6 +1227,7 @@ input {
   }
 }
 
+
 .session-nickname-wrapper {
   position: absolute;
   height: 100%;

ts/components/EditProfileDialog.tsx

@@ -125,13 +125,6 @@ export class EditProfileDialog extends React.Component<Props, State> {
         : undefined;
 
     return (
-      // <SessionModal
-      //   title={i18n('editProfileModalTitle')}
-      //   onClose={this.closeDialog}
-      //   headerReverse={viewEdit || viewQR}
-      //   headerIconButtons={backButton}
-      //   theme={this.props.theme}
-      // >
       <div className="edit-profile-dialog">
 
         <SessionWrapperModal
@@ -177,7 +170,6 @@ export class EditProfileDialog extends React.Component<Props, State> {
 
             <div className="spacer-lg" />
           </div>
-          {/* </SessionModal> */}
         </SessionWrapperModal>
       </div>
     );

ts/components/OnionStatusDialog.tsx

@@ -50,18 +50,21 @@ const OnionPathModalInner = (props: any) => {
   ];
 
   return (
-    <div className="onion__node-list">
-      {nodes.map((snode: Snode | any, index: number) => {
-        return (
-          <OnionNodeStatusLight
-            glowDuration={glowDuration}
-            glowStartDelay={index}
-            label={snode.label}
-            snode={snode}
-          />
-        );
-      })}
-    </div>
+    <>
+      <p className="onion__description">{window.i18n('onionPathIndicatorDescription')}</p>
+      <div className="onion__node-list">
+        {nodes.map((snode: Snode | any, index: number) => {
+          return (
+            <OnionNodeStatusLight
+              glowDuration={glowDuration}
+              glowStartDelay={index}
+              label={snode.label}
+              snode={snode}
+            />
+          );
+        })}
+      </div>
+    </>
   );
 };
 

ts/components/session/ActionsPanel.tsx

@@ -261,6 +261,8 @@ export const ActionsPanel = () => {
   }, DAYS * 1);
 
   return (
+    <>
+      {modal ? modal : null}
     <div className="module-left-pane__sections-container">
       <Section
         setModal={setModal}
@@ -270,12 +272,12 @@ export const ActionsPanel = () => {
       <Section  type={SectionType.Message} />
       <Section  type={SectionType.Contact} />
       <Section  type={SectionType.Settings} />
-      {modal ? modal : null}
 
       <SessionToastContainer />
 
       <Section setModal={setModal} type={SectionType.PathIndicator} />
       <Section  type={SectionType.Moon} />
     </div>
+    </>
   );
 };

ts/components/session/SessionWrapperModal.tsx

@@ -30,6 +30,7 @@ interface Props {
 
 export type SessionWrapperModalType = {
   title?: string;
+  showHeader?: boolean;
   onConfirm?: () => void;
   onClose?: () => void;
   showClose?: boolean
@@ -47,6 +48,7 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
     title,
     onConfirm,
     onClose,
+    showHeader,
     showClose = false,
     confirmText,
     cancelText,
@@ -57,15 +59,14 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
   } = props;
 
   useEffect(() => {
-    window.addEventListener('keyup', upHandler);
+    window.addEventListener('keyup', keyUpHandler);
 
     return () => {
-      window.removeEventListener('keyup', upHandler);
+      window.removeEventListener('keyup', keyUpHandler);
     };
   }, []);
 
-  // TODO: warrick: typing
-  const upHandler = ({ key }: any) => {
+  const keyUpHandler = ({ key }: any) => {
     if (key === 'Escape') {
       if (props.onClose) {
         props.onClose();
@@ -75,24 +76,25 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
 
   return (
     <div className="loki-dialog modal">
-    {/* <div className="loki-dialog session-confirm-wrapper modal"> */}
       <div className="session-confirm-wrapper">
         <div className="session-modal">
-          <div className={classNames('session-modal__header', headerReverse && 'reverse')}>
-            <div className="session-modal__header__close">
-              {showExitIcon ? (
-                <SessionIconButton
-                  iconType={SessionIconType.Exit}
-                  iconSize={SessionIconSize.Small}
-                  onClick={props.onClose}
-                  theme={props.theme}
-                />
-              ) : null}
-            </div>
-            <div className="session-modal__header__title">{title}</div>
-            <div className="session-modal__header__icons">
-              {headerIconButtons
-                ? headerIconButtons.map((iconItem: any) => {
+
+          {showHeader ?
+            <div className={classNames('session-modal__header', headerReverse && 'reverse')}>
+              <div className="session-modal__header__close">
+                {showExitIcon ? (
+                  <SessionIconButton
+                    iconType={SessionIconType.Exit}
+                    iconSize={SessionIconSize.Small}
+                    onClick={props.onClose}
+                    theme={props.theme}
+                  />
+                ) : null}
+              </div>
+              <div className="session-modal__header__title">{title}</div>
+              <div className="session-modal__header__icons">
+                {headerIconButtons
+                  ? headerIconButtons.map((iconItem: any) => {
                     return (
                       <SessionIconButton
                         key={iconItem.iconType}
@@ -104,23 +106,29 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
                       />
                     );
                   })
-                : null}
+                  : null}
+              </div>
             </div>
-          </div>
+            : null}
+
           <div className="session-modal__body">
             <div className="session-modal__centered">
               {props.children}
               <div className="session-modal__button-group">
+
                 {onConfirm ? (
                   <SessionButton onClick={props.onConfirm}>
                     {confirmText || window.i18n('ok')}
                   </SessionButton>
                 ) : null}
+
+
                 {onClose && showClose ? (
                   <SessionButton onClick={props.onClose}>
                     {cancelText || window.i18n('close')}
                   </SessionButton>
                 ) : null}
+
               </div>
             </div>
           </div>

ts/state/ducks/onion.tsx

@@ -29,8 +29,10 @@ const onionSlice = createSlice({
   reducers: {
     updateOnionPaths(state, action: PayloadAction<SnodePath>) {
       let newPayload = { snodePath: action.payload };
-      // let isEqual = JSON.stringify(state, null, 2) == JSON.stringify(newPayload, null, 2);
-      // return isEqual ? state : newPayload;
+
+      let isEqual = JSON.stringify(state, null, 2) == JSON.stringify(newPayload, null, 2);
+      return isEqual ? state : newPayload;
+
       return newPayload;
     },
   },