From df0ac72885f489e8c5fbdaed6723598635286146 Mon Sep 17 00:00:00 2001
From: pbca26 <pbca26@gmail.com>
Date: Wed, 27 Dec 2017 20:37:04 +0300
Subject: [PATCH] move settings -> support to a separate comp

---
 react/src/components/dashboard/about/about.js |  4 +-
 .../dashboard/main/dashboard.render.js        |  4 +
 .../src/components/dashboard/navbar/navbar.js |  4 +-
 .../dashboard/navbar/navbar.render.js         | 16 ++-
 .../dashboard/settings/settings.render.js     |  6 --
 .../settings/settings.supportPanel.js         | 81 ---------------
 .../components/dashboard/support/support.js   | 98 +++++++++++++++++++
 react/src/components/overrides.scss           | 13 +++
 8 files changed, 130 insertions(+), 96 deletions(-)
 delete mode 100644 react/src/components/dashboard/settings/settings.supportPanel.js
 create mode 100644 react/src/components/dashboard/support/support.js

diff --git a/react/src/components/dashboard/about/about.js b/react/src/components/dashboard/about/about.js
index c1e290a..52b0fa0 100755
--- a/react/src/components/dashboard/about/about.js
+++ b/react/src/components/dashboard/about/about.js
@@ -18,8 +18,8 @@ class About extends React.Component {
     });
 
     externalWindow.loadURL(url);
-    externalWindow.webContents.on('did-finish-load', function() {
-      setTimeout(function() {
+    externalWindow.webContents.on('did-finish-load', () => {
+      setTimeout(() => {
         externalWindow.show();
       }, 40);
     });
diff --git a/react/src/components/dashboard/main/dashboard.render.js b/react/src/components/dashboard/main/dashboard.render.js
index 8716c0c..26849a6 100644
--- a/react/src/components/dashboard/main/dashboard.render.js
+++ b/react/src/components/dashboard/main/dashboard.render.js
@@ -12,6 +12,7 @@ import Jumblr from '../jumblr/jumblr';
 import Settings from '../settings/settings';
 import ReceiveCoin from '../receiveCoin/receiveCoin';
 import About from '../about/about';
+import Support from '../support/support';
 import WalletsMain from '../walletsMain/walletsMain';
 import WalletsTxInfo from '../walletsTxInfo/walletsTxInfo';
 import CoindDownModal from '../coindDownModal/coindDownModal';
@@ -52,6 +53,9 @@ const DashboardRender = function() {
         { this.isSectionActive('about') &&
           <About />
         }
+        { this.isSectionActive('support') &&
+          <Support />
+        }
       </div>
     </div>
   );
diff --git a/react/src/components/dashboard/navbar/navbar.js b/react/src/components/dashboard/navbar/navbar.js
index 70c3696..a46b147 100755
--- a/react/src/components/dashboard/navbar/navbar.js
+++ b/react/src/components/dashboard/navbar/navbar.js
@@ -101,8 +101,8 @@ class Navbar extends React.Component {
 
   handleClickOutside(e) {
     if (e.srcElement.className !== 'dropdown-menu' &&
-        e.srcElement.alt !== 'iguana profile pic' &&
-        (e.srcElement.offsetParent && e.srcElement.offsetParent.className !== 'avatar avatar-online') &&
+        e.srcElement.title !== 'top menu' &&
+        (e.srcElement.offsetParent && e.srcElement.offsetParent.className !== 'navbar-avatar-inner') &&
         e.srcElement.className.indexOf('navbar-avatar') === -1 &&
         (e.path && e.path[4] && e.path[4].className.indexOf('dropdown-menu') === -1)) {
       this.setState({
diff --git a/react/src/components/dashboard/navbar/navbar.render.js b/react/src/components/dashboard/navbar/navbar.render.js
index 9db45a4..80b7e36 100644
--- a/react/src/components/dashboard/navbar/navbar.render.js
+++ b/react/src/components/dashboard/navbar/navbar.render.js
@@ -97,11 +97,10 @@ const NavbarRender = function() {
               className={ 'pointer dropdown' + (this.state.openDropMenu ? ' open' : '') }
               onClick={ this.openDropMenu }>
               <a className="navbar-avatar dropdown-toggle">
-                <span className="avatar avatar-online">
-                  <img
-                    src="assets/images/iguana_profile_02.jpg"
-                    alt="iguana" />
-                  <i></i>
+                <span className="navbar-avatar-inner">
+                  <i
+                    title="top menu"
+                    className="icon fa-bars"></i>
                 </span>
               </a>
               <ul className="dropdown-menu">
@@ -119,6 +118,13 @@ const NavbarRender = function() {
                     </a>
                   </li>
                 }
+                { !this.isSectionActive('support') &&
+                  <li>
+                    <a onClick={ () => this.dashboardChangeSection('support') }>
+                      <i className="icon fa-life-ring"></i> { translate('SETTINGS.SUPPORT') }
+                    </a>
+                  </li>
+                }
                 { this.isRenderSpvLockLogout() &&
                   <li>
                     <a onClick={ this.spvLock }>
diff --git a/react/src/components/dashboard/settings/settings.render.js b/react/src/components/dashboard/settings/settings.render.js
index 0efbb5e..c9f8d4a 100644
--- a/react/src/components/dashboard/settings/settings.render.js
+++ b/react/src/components/dashboard/settings/settings.render.js
@@ -12,7 +12,6 @@ import DebugLogPanel from './settings.debugLogPanel';
 // import FiatCurrencyPanel from './settings.fiatCurrencyPanel';
 import ExportKeysPanel from './settings.exportKeysPanel';
 // import ImportKeysPanel from './settings.importKeysPanel';
-import SupportPanel from './settings.supportPanel';
 import SPVServersPanel from './settings.spvServersPanel';
 import DaemonStdoutPanel from './settings.daemonStdoutPanel';
 import NativeWalletDatKeysPanel from './settings.nativeWalletDatKeysPanel';
@@ -148,11 +147,6 @@ export const SettingsRender = function() {
                   <AppUpdatePanel />
                 </PanelSection>
               }
-              <PanelSection
-                title={ translate('SETTINGS.SUPPORT') }
-                icon="icon fa fa-life-ring">
-                <SupportPanel />
-              </PanelSection>
             </Panel>
           </div>
         </div>
diff --git a/react/src/components/dashboard/settings/settings.supportPanel.js b/react/src/components/dashboard/settings/settings.supportPanel.js
deleted file mode 100644
index 7b16973..0000000
--- a/react/src/components/dashboard/settings/settings.supportPanel.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from 'react';
-import { translate } from '../../../translate/translate';
-
-class SupportPanel extends React.Component {
-  constructor() {
-    super();
-  }
-
-  openExternalWindow(url) {
-    const remote = window.require('electron').remote;
-    const BrowserWindow = remote.BrowserWindow;
-    const externalWindow = new BrowserWindow({
-      width: 1280,
-      height: 800,
-      title: `${translate('INDEX.LOADING')}...`,
-      icon: remote.getCurrentWindow().iguanaIcon,
-    });
-
-    externalWindow.loadURL(url);
-    externalWindow.webContents.on('did-finish-load', () => {
-      setTimeout(() => {
-        externalWindow.show();
-      }, 40);
-    });
-  }
-
-  render() {
-    return (
-      <div className="row">
-        <div className="col-sm-12 no-padding-left">
-          <div className="support-box-wrapper">
-            <div
-              className="support-box"
-              onClick={ () => this.openExternalWindow('http://support.supernet.org') }>
-              <img
-                src="assets/images/cryptologo/supernet.png"
-                alt={ translate('SETTINGS.SUPPORT_TICKETS') } />
-              <div className="support-box-title">{ translate('SETTINGS.SUPPORT_TICKETS') }</div>
-              <div className="support-box-link">support.supernet.org</div>
-            </div>
-          </div>
-          <div className="support-box-wrapper">
-            <div
-              className="support-box"
-              onClick={ () => this.openExternalWindow('https://sprnt.slack.com') }>
-              <img
-                src="assets/images/support/slack-icon.png"
-                alt="Slack" />
-              <div className="support-box-title">Slack</div>
-              <div className="support-box-link">sprnt.slack.com</div>
-            </div>
-          </div>
-          <div className="support-box-wrapper">
-            <div
-              className="support-box"
-              onClick={ () => this.openExternalWindow('http://slackinvite.supernet.org/') }>
-              <img
-                src="assets/images/support/slack-invite-icon.png"
-                alt={ translate('SETTINGS.GET_SLACK_INVITE') } />
-              <div className="support-box-title">{ translate('SETTINGS.GET_SLACK_INVITE') }</div>
-              <div className="support-box-link">slackinvite.supernet.org</div>
-            </div>
-          </div>
-          <div className="support-box-wrapper">
-            <div
-              className="support-box"
-              onClick={ () => this.openExternalWindow('https://github.com/KomodoPlatform/Agama') }>
-              <img
-                src="assets/images/support/github-icon.png"
-                alt="Github" />
-              <div className="support-box-title">Github</div>
-              <div className="support-box-link">github.com/KomodoPlatform/Agama</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  };
-}
-
-export default SupportPanel;
\ No newline at end of file
diff --git a/react/src/components/dashboard/support/support.js b/react/src/components/dashboard/support/support.js
new file mode 100644
index 0000000..1c2138f
--- /dev/null
+++ b/react/src/components/dashboard/support/support.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import { translate } from '../../../translate/translate';
+
+class Support extends React.Component {
+  constructor() {
+    super();
+  }
+
+  openExternalWindow(url) {
+    const remote = window.require('electron').remote;
+    const BrowserWindow = remote.BrowserWindow;
+
+    const externalWindow = new BrowserWindow({
+      width: 1280,
+      height: 800,
+      title: `${translate('INDEX.LOADING')}...`,
+      icon: remote.getCurrentWindow().iguanaIcon,
+    });
+
+    externalWindow.loadURL(url);
+    externalWindow.webContents.on('did-finish-load', () => {
+      setTimeout(() => {
+        externalWindow.show();
+      }, 40);
+    });
+  }
+
+  render() {
+    return (
+      <div className="page margin-left-0">
+        <div className="page-content">
+          <h2>{ translate('SETTINGS.SUPPORT') }</h2>
+
+          <div className="row">
+            <div className="col-sm-12 no-padding-left">
+              <div className="support-box-wrapper">
+                <div
+                  className="support-box"
+                  onClick={ () => this.openExternalWindow('http://support.supernet.org') }>
+                  <img
+                    src="assets/images/cryptologo/supernet.png"
+                    alt={ translate('SETTINGS.SUPPORT_TICKETS') } />
+                  <div className="support-box-title">{ translate('SETTINGS.SUPPORT_TICKETS') }</div>
+                  <div className="support-box-link">support.supernet.org</div>
+                </div>
+              </div>
+              <div className="support-box-wrapper">
+                <div
+                  className="support-box"
+                  onClick={ () => this.openExternalWindow('https://sprnt.slack.com') }>
+                  <img
+                    src="assets/images/support/slack-icon.png"
+                    alt="Slack" />
+                  <div className="support-box-title">Slack</div>
+                  <div className="support-box-link">sprnt.slack.com</div>
+                </div>
+              </div>
+              <div className="support-box-wrapper">
+                <div
+                  className="support-box"
+                  onClick={ () => this.openExternalWindow('http://slackinvite.supernet.org/') }>
+                  <img
+                    src="assets/images/support/slack-invite-icon.png"
+                    alt={ translate('SETTINGS.GET_SLACK_INVITE') } />
+                  <div className="support-box-title">{ translate('SETTINGS.GET_SLACK_INVITE') }</div>
+                  <div className="support-box-link">slackinvite.supernet.org</div>
+                </div>
+              </div>
+              <div className="support-box-wrapper">
+                <div
+                  className="support-box"
+                  onClick={ () => this.openExternalWindow('https://github.com/KomodoPlatform/Agama') }>
+                  <img
+                    src="assets/images/support/github-icon.png"
+                    alt="Github" />
+                  <div className="support-box-title">Github</div>
+                  <div className="support-box-link">github.com/KomodoPlatform/Agama</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="row margin-top-30">
+            <div className="col-sm-12">
+              <p>
+                For guides & FAQ please go to <a onClick={ () => this.openExternalWindow('https://support.komodoplatform.com/support/home') }>https://support.komodoplatform.com/support/home</a>
+              </p>
+              <p>
+                To send feedback please open a ticket at <a onClick={ () => this.openExternalWindow('https://support.komodoplatform.com/support/tickets/new') }>https://support.komodoplatform.com/support/tickets/new</a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Support;
\ No newline at end of file
diff --git a/react/src/components/overrides.scss b/react/src/components/overrides.scss
index fd30097..97cd760 100644
--- a/react/src/components/overrides.scss
+++ b/react/src/components/overrides.scss
@@ -683,4 +683,17 @@ select{
   > .row {
     background: #f3f4f5;
   }
+}
+
+.navbar-nav > li > a.navbar-avatar,
+.navbar-toolbar > li > a.navbar-avatar {
+  &.dropdown-toggle {
+    font-size: 24px;
+    padding-top: 24px;
+
+    i {
+      position: relative;
+      top: -2px;
+    }
+  }
 }
\ No newline at end of file