Add button to dialog and css updates

_locales/en/messages.json

@@ -1833,5 +1833,8 @@
   },
   "onionPathIndicatorDescription": {
     "message": "Session hides your IP by bouncing your messages through several Service Nodes in Session's decentralized network. These are the countries your connection is currently being bounced through:"
+  },
+  "learnMore": {
+    "message" : "Learn More"
   }
 }

stylesheets/_modal.scss

@@ -305,3 +305,28 @@
     }
   }
 }
+
+.onion-status-dialog {
+  .session-modal__header__title {
+    font-size: $session-font-lg;
+  }
+
+  .session-modal {
+    width: $session-modal-size-md;
+
+    &__header {
+      height: 68.45px;
+    }
+  }
+
+  .session-modal__body {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    p {
+      text-align: center;
+      margin-top: 0;
+      line-height: 1.25em;
+    }
+  }
+}

ts/components/OnionStatusDialog.tsx

@@ -13,8 +13,8 @@ import { ToastUtils, UserUtils } from '../session/utils';
 import { DefaultTheme } from 'styled-components';
 import { MAX_USERNAME_LENGTH } from './session/registration/RegistrationTabs';
 import { SessionSpinner } from './session/SessionSpinner';
-
-
+import electron from 'electron';
+const {shell} = electron;
 interface State {
   profileName: string;
   setProfileName: string;
@@ -32,20 +32,29 @@ interface Props {
 
 
 export const OnionStatusDialog = (props: Props) => {
-    const { theme, onClose} = props;
-  
-    return (
-      <SessionModal
-        title={window.i18n('onionPathIndicatorTitle')}
-        theme={theme}
-        onClose={onClose}
-      >
-        <div className="spacer-md">
-
-        {window.i18n('onionPathIndicatorDescription')}
-        </div>
-      </SessionModal>
-    );
+  const { theme, onClose } = props;
+
+  const openFAQPage = () => {
+    console.log("Opening FAQ Page")
+    shell.openExternal('https://getsession.org/faq/#onion-routing');
+  }
+  return (
+    <SessionModal
+      title={window.i18n('onionPathIndicatorTitle')}
+      theme={theme}
+      onClose={onClose}
+    >
+      <div className="spacer-sm" />
+      <p>{window.i18n('onionPathIndicatorDescription')}</p>
+
+      <SessionButton
+        text={window.i18n('learnMore')}
+        buttonType={SessionButtonType.BrandOutline}
+        buttonColor={SessionButtonColor.Green}
+        onClick={openFAQPage}
+      />
+    </SessionModal>
+  );
 }
 
 // export class OnionStatusDialog extends React.Component<Props, State> {