settings support tab

assets/mainWindow/css/loading.css

@@ -109,4 +109,9 @@ body.agamaMode {
 
 .btn.btn-primary.btn-close-app {
   margin: 0;
+}
+
+.app-closing {
+  position: relative;
+  top: 50px;
 }

react/src/actions/actions/nativeSend.js

@@ -176,8 +176,8 @@ export function getKMDOPIDState(json) {
 }
 
 export function getKMDOPID(opid, coin) {
-  let tmpopidOutput = '',
-      ajaxDataToHex;
+  let tmpopidOutput = '';
+  let ajaxDataToHex;
 
   if (opid === undefined) {
     ajaxDataToHex = null;

react/src/components/dashboard/receiveCoin/receiveCoin.render.js

@@ -54,7 +54,7 @@ export const AddressItemRender = function(address, type) {
       { this.renderAddressActions(address.address, type) }
       <td>{ type === 'public' ? address.address : `${address.address.substring(0, 34)}...` }</td>
       <td>{ address.amount }</td>
-      {!this.isNativeMode() &&
+      { !this.isNativeMode() &&
         <td>{ address.interest ? address.interest : 'N/A' }</td>
       }
     </tr>
@@ -175,5 +175,4 @@ export const ReceiveCoinRender = function() {
       </div>
     );
   }
-};
-
+};

react/src/components/dashboard/settings/settings.js

@@ -79,14 +79,27 @@ class Settings extends React.Component {
     this.toggleSeedInputVisibility = this.toggleSeedInputVisibility.bind(this);
     this._checkForUpdateUIPromise = this._checkForUpdateUIPromise.bind(this);
     this._updateUIPromise = this._updateUIPromise.bind(this);
+    this.updateTabDimensions = this.updateTabDimensions.bind(this);
+  }
+
+  updateTabDimensions() {
+    setTimeout(() => {
+      const _height = document.querySelector(`#${this.state.tabElId} .panel-collapse .panel-body`).offsetHeight;
+
+      this.setState(Object.assign({}, this.state, {
+        activeTabHeight: _height,
+      }));
+    }, 100);
   }
 
   componentWillMount() {
     socket.on('patch', msg => this.updateSocketsData(msg));
+    window.addEventListener('resize', this.updateTabDimensions);
   }
 
   componentWillUnmount() {
     socket.removeAllListeners('patch', msg => this.updateSocketsData(msg));
+    window.removeEventListener('resize', this.updateTabDimensions);
 
     if (!this.state.disableWalletSpecificUI) {
       document.documentElement.style.height = '100%';
@@ -115,6 +128,25 @@ class Settings extends React.Component {
     }
   }
 
+  openExternalWindow(url) {
+    const remote = window.require('electron').remote;
+    const BrowserWindow = remote.BrowserWindow;
+
+    const externalWindow = new BrowserWindow({
+      width: 1280,
+      height: 800,
+      title: 'Loading...',
+      icon: remote.getCurrentWindow().iguanaIcon,
+    });
+
+    externalWindow.loadURL(url);
+    externalWindow.webContents.on('did-finish-load', function() {
+      setTimeout(function() {
+        externalWindow.show();
+      }, 40);
+    });
+  }
+
   _resetAppConfig() {
     Store.dispatch(resetAppConfig());
   }

react/src/components/dashboard/settings/settings.render.js

@@ -12,7 +12,7 @@ export const AppUpdateTabRender = function() {
       onClick={ () => this.openTab('AppUpdate', 10) }>
       <div className="panel-heading">
         <a className={ 'panel-title' + (this.state.activeTab === 10 ? '' : ' collapsed') }>
-          <i className="icon fa fa-life-ring"></i> { translate('INDEX.UPDATE') }
+          <i className="icon fa fa-cloud-download"></i> { translate('INDEX.UPDATE') }
         </a>
       </div>
       <div
@@ -620,6 +620,61 @@ export const SettingsRender = function() {
                   }
 
                   { this.renderAppUpdateTab() }
+
+                  <div
+                    className="panel"
+                    id="Support"
+                    onClick={ () => this.openTab('Support', 11) }>
+                    <div className="panel-heading">
+                      <a className={ 'panel-title' + (this.state.activeTab === 11 ? '' : ' collapsed') }>
+                        <i className="icon fa fa-life-ring"></i> Support
+                      </a>
+                    </div>
+                    <div
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 11 ? ' in' : '') }
+                      style={{ height: this.state.activeTab === 11 ? `${this.state.activeTabHeight}px` : '0' }}>
+                      <div className="panel-body">
+                        <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="Support tickets" />
+                              <div className="support-box-title">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="Slack invite" />
+                              <div className="support-box-title">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/SuperNETorg/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/SuperNETorg/Agama</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>

react/src/components/dashboard/walletsProgress/walletsProgress.render.js

@@ -76,7 +76,6 @@ export const WalletsProgressRender = function() {
     <div
       id="edex-footer"
       className="margin-bottom-20">
-
       { !this.isNativeMode() &&
         this.props.Dashboard.progress &&
         <div className="row no-space">

react/src/components/overrides.scss

@@ -996,4 +996,62 @@ select{
     padding: 38px;
     background: rgba(255, 255, 255, 0.85);
   }
+}
+
+.support-box {
+  padding: 15px 20px;
+  width: 220px;
+  display: inline-block;
+  cursor: pointer;
+
+  &-title {
+    font-weight: bold;
+    padding-top: 12px;
+    padding-bottom: 3px;
+  }
+  img {
+    height: 50px;
+  }
+}
+
+.support-box-wrapper {
+  display: inline-block;
+  margin-right: 50px;
+
+  &:last-child, {
+    margin-right: 0;
+  }
+}
+
+.support-box:hover {
+  .support-box-link {
+    color: #5683ad;
+    font-weight: 500;
+  }
+}
+
+.login-settings-modal {
+  #AppUpdate {
+    .col-sm-4 {
+      width: 100%;
+    }
+  }
+  .modal-dialog {
+    width: 80%;
+  }
+  .modal-body {
+    background: #f3f4f5;
+  }
+  .modal-footer {
+    margin-top: 15px;
+  }
+  .page-content {
+    padding-top: 0;
+  }
+  .support-box-wrapper {
+    .support-box {
+      margin: 0;
+      margin-bottom: 20px;
+    }
+  }
 }