WIP making changes to modal.

package.json

@@ -121,6 +121,7 @@
     "to-arraybuffer": "1.0.1",
     "typings-for-css-modules-loader": "^1.7.0",
     "underscore": "1.9.0",
+    "use-hooks": "^2.0.0-rc.5",
     "uuid": "3.3.2"
   },
   "devDependencies": {

ts/components/OnionStatusDialog.tsx

@@ -187,6 +187,12 @@ export const StatusLight = (props: any) => {
   const [showModal, toggleShowModal] = useState(false);
   const { isSelected, color } = props;
   const theme = useSelector(getTheme);
+
+  const openFAQPage = () => {
+    console.log('Opening FAQ Page');
+    shell.openExternal('https://getsession.org/faq/#onion-routing');
+  };
+
   const onClick = () => {
     toggleShowModal(!showModal);
   };
@@ -194,7 +200,7 @@ export const StatusLight = (props: any) => {
   return (
     <>
       <SessionIconButton
-        iconSize={SessionIconSize.Small}
+        iconSize={SessionIconSize.Medium}
         iconType={SessionIconType.Circle}
         iconColor={color}
         theme={theme}
@@ -203,7 +209,7 @@ export const StatusLight = (props: any) => {
       />
 
       {showModal ? (
-        <SessionWrapperModal onclick={onClick} showModal={showModal}>
+        <SessionWrapperModal title={"Onion Path"} onclick={onClick} showModal={showModal}>
           <OnionPathModalInner></OnionPathModalInner>
         </SessionWrapperModal>
       ) : null}

ts/components/session/ActionsPanel.tsx

@@ -39,6 +39,7 @@ import { Constants } from '../../session';
 import { StatusLight } from '../OnionStatusDialog';
 import { StateType } from '../../state/reducer';
 import _ from 'lodash';
+import { useNetwork } from '../../hooks/useNetwork';
 
 // tslint:disable-next-line: no-import-side-effect no-submodule-imports
 
@@ -102,7 +103,6 @@ const Section = (props: { type: SectionType; avatarPath?: string; hasOnionPath?:
   if (type === SectionType.PathIndicator) {
     // Set icon color based on result
     iconColor = hasOnionPath ? Constants.UI.COLORS.GREEN : Constants.UI.COLORS.DANGER;
-    console.log('Status Indicator Color', iconColor);
   }
 
   const unreadToShow = type === SectionType.Message ? unreadMessageCount : undefined;
@@ -137,7 +137,8 @@ const Section = (props: { type: SectionType; avatarPath?: string; hasOnionPath?:
     const onionState = useSelector((state: StateType) => state.onionPaths);
 
     let statusColor = Constants.UI.COLORS.DANGER;
-    if (!(onionState && onionState.snodePath)) {
+    const isOnline = useNetwork();
+    if (!(onionState && onionState.snodePath) || !isOnline) {
       return <StatusLight isSelected={isSelected} color={Constants.UI.COLORS.DANGER}></StatusLight>;
     } else {
 
@@ -293,7 +294,7 @@ export const ActionsPanel = () => {
 
     //   dispatch(updateOnionPaths(testNode));
 
-    console.log('Is Onion Path found -', hasOnionPath);
+    // console.log('Is Onion Path found -', hasOnionPath);
     setHasOnionPath(hasOnionPath);
   };
 

ts/components/session/SessionWrapperModal.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import classNames from 'classnames';
 
 import { SessionIconButton, SessionIconSize, SessionIconType } from './icon/';
 import { SessionButton, SessionButtonColor, SessionButtonType } from './SessionButton';
 import { DefaultTheme } from 'styled-components';
 
+import { useKeyPress } from "use-hooks";
+
 interface Props {
   title: string;
   onClose: any;
@@ -31,7 +33,23 @@ interface State {
 }
 
 export const SessionWrapperModal = (props: any) => {
-  const { onclick, showModal } = props;
+  const { onclick, showModal, title, onConfirm  } = props;
+
+  useEffect(() => {
+    window.addEventListener('keyup', upHandler);
+
+    return () => {
+      window.removeEventListener('keyup', upHandler);
+    }
+  }, [])
+
+  // TODO: warrick: typing
+  const upHandler = ({key}: any ) => {
+    if (key === 'Escape') {
+      props.onclick();
+    }
+  }
+
 
   return (
     <div className="loki-dialog session-confirm-wrapper modal">
@@ -39,7 +57,8 @@ export const SessionWrapperModal = (props: any) => {
         <div className="session-modal">
           <div className="session-modal__header">
             <div className="session-modal__header__title">
-              Onion Nodes / Generic Title
+              {/* Onion Nodes / Generic Title {title} */}
+              {title}
             </div>
           </div>
           <div className="session-modal__body">

ts/state/ducks/onion.tsx

@@ -28,7 +28,6 @@ const onionSlice = createSlice({
   reducers: {
     // updateOnionPaths(state, action: PayloadAction<OnionUpdate>) {
     updateOnionPaths(state, action: PayloadAction<SnodePath>) {
-      console.log('@@@@ dispatching:: ', action);
       return {
         snodePath: action.payload
       }

yarn.lock

@@ -695,6 +695,15 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/react@^16.8.3":
+  version "16.14.7"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.7.tgz#b62bd8cc4675d6fe3976126cdd208deda267f1fb"
+  integrity sha512-JhbikeQ1i18ut9Sro3j/xvhN073zJA9sqGqbwJByhOfLPXxEJdqjal9piZd9tmVEC+LP6RN2dLvWx9Hbr0reTw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/redux-logger@3.0.7":
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/@types/redux-logger/-/redux-logger-3.0.7.tgz#163f6f6865c69c21d56f9356dc8d741718ec0db0"
@@ -715,6 +724,11 @@
     "@types/glob" "*"
     "@types/node" "*"
 
+"@types/scheduler@*":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275"
+  integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==
+
 "@types/semver@5.5.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-5.5.0.tgz#146c2a29ee7d3bae4bf2fcb274636e264c813c45"
@@ -11940,6 +11954,13 @@ url@^0.11.0, url@~0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-hooks@^2.0.0-rc.5:
+  version "2.0.0-rc.5"
+  resolved "https://registry.yarnpkg.com/use-hooks/-/use-hooks-2.0.0-rc.5.tgz#05bdfb89cf088ef49961858b529d090a15f48680"
+  integrity sha512-85OzZPao3Rk6GFJqaeTHRj5MluTFhzDxUikwytiwJYGR4+2tEeH86Ym1DMDM6NzJ3bwueaX7kc+rlF/5J074TA==
+  dependencies:
+    "@types/react" "^16.8.3"
+
 use-strict@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/use-strict/-/use-strict-1.0.1.tgz#0bb80d94f49a4a05192b84a8c7d34e95f1a7e3a0"