From 9cfb39bb97421c411620e1bbaa078ad925484664 Mon Sep 17 00:00:00 2001
From: Lucas Phang <lucasphang98@gmail.com>
Date: Thu, 13 May 2021 15:04:10 +1000
Subject: [PATCH] Add button to dialog and css updates

---
 _locales/en/messages.json           |  3 +++
 stylesheets/_modal.scss             | 25 ++++++++++++++++++
 ts/components/OnionStatusDialog.tsx | 41 ++++++++++++++++++-----------
 3 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 924f8a0bd..9e34ec78b 100644
--- a/_locales/en/messages.json
+++ b/_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"
   }
 }
diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss
index a4419bac1..35b289547 100644
--- a/stylesheets/_modal.scss
+++ b/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;
+    }
+  }
+}
\ No newline at end of file
diff --git a/ts/components/OnionStatusDialog.tsx b/ts/components/OnionStatusDialog.tsx
index 3684e86d8..b4899a7de 100644
--- a/ts/components/OnionStatusDialog.tsx
+++ b/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> {