From f5cd803a758e78503f26417f5327b9a643d33539 Mon Sep 17 00:00:00 2001
From: Matheus Degiovani <opensource@matheusd.com>
Date: Fri, 30 Nov 2018 10:20:39 -0200
Subject: [PATCH] Fix vertical accordion activation

---
 app/components/SideBar/MenuLinks/index.js     |  2 +-
 .../views/TrezorPage/ChangeLabel.js           | 34 +++++++++++--------
 .../views/TrezorPage/ConfigButtons.js         |  9 ++++-
 .../views/TrezorPage/FirmwareUpdate.js        |  8 ++++-
 .../views/TrezorPage/RecoveryButtons.js       |  7 ++++
 5 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/app/components/SideBar/MenuLinks/index.js b/app/components/SideBar/MenuLinks/index.js
index c6e2cf6e49..bee0f83a9d 100644
--- a/app/components/SideBar/MenuLinks/index.js
+++ b/app/components/SideBar/MenuLinks/index.js
@@ -92,7 +92,7 @@ class MenuLinks extends React.Component {
 
     return (
       <Aux>
-        {linkList.map(link => this.getMenuLink(link))}
+        {this.links.map(link => this.getMenuLink(link))}
         {caret}
       </Aux>
     );
diff --git a/app/components/views/TrezorPage/ChangeLabel.js b/app/components/views/TrezorPage/ChangeLabel.js
index 99c628f9ca..711458e4aa 100644
--- a/app/components/views/TrezorPage/ChangeLabel.js
+++ b/app/components/views/TrezorPage/ChangeLabel.js
@@ -7,7 +7,7 @@ import { KeyBlueButton } from "buttons";
 class ChangeLabel extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { newLabel: "" };
+    this.state = { newLabel: "", show: false };
   }
 
   onChangeLabelClicked() {
@@ -18,6 +18,10 @@ class ChangeLabel extends React.Component {
     this.setState({ newLabel: e.target.value });
   }
 
+  onToggleAccordion() {
+    this.setState({ show: !this.state.show });
+  }
+
   render() {
 
     const changeLabelHeader = (
@@ -32,22 +36,22 @@ class ChangeLabel extends React.Component {
       <VerticalAccordion
         height={100}
         header={changeLabelHeader}
+        show={this.state.show}
+        onToggleAccordion={this.onToggleAccordion}
         className="trezor-config-accordion"
       >
-        <Aux>
-          <div><T id="trezor.changeLabel.description" m="New Label" /></div>
-          <div>
-            <TextInput
-              value={this.state.newLabel}
-              onChange={this.onNewLabelChanged}
-            />
-          </div>
-          <div>
-            <KeyBlueButton onClick={this.onChangeLabelClicked} disabled={loading} loading={loading} >
-              <T id="trezor.changeLabel.changeButton" m="Change" />
-            </KeyBlueButton>
-          </div>
-        </Aux>
+        <div><T id="trezor.changeLabel.description" m="New Label" /></div>
+        <div>
+          <TextInput
+            value={this.state.newLabel}
+            onChange={this.onNewLabelChanged}
+          />
+        </div>
+        <div>
+          <KeyBlueButton onClick={this.onChangeLabelClicked} disabled={loading} loading={loading} >
+            <T id="trezor.changeLabel.changeButton" m="Change" />
+          </KeyBlueButton>
+        </div>
       </VerticalAccordion>
 
     );
diff --git a/app/components/views/TrezorPage/ConfigButtons.js b/app/components/views/TrezorPage/ConfigButtons.js
index 6661c1d81d..ad630f380c 100644
--- a/app/components/views/TrezorPage/ConfigButtons.js
+++ b/app/components/views/TrezorPage/ConfigButtons.js
@@ -6,6 +6,11 @@ import { KeyBlueButton } from "buttons";
 class ConfigButtons extends React.Component {
   constructor(props) {
     super(props);
+    this.state = { show: false };
+  }
+
+  onToggleAccordion() {
+    this.setState({ show: !this.state.show });
   }
 
   render() {
@@ -21,8 +26,10 @@ class ConfigButtons extends React.Component {
 
     return (
       <VerticalAccordion
-        height={75}
+        height={105}
         header={ConfigButtonsHeader}
+        show={this.state.show}
+        onToggleAccordion={this.onToggleAccordion}
         className="trezor-config-accordion trezor-config-regular-buttons"
       >
         <KeyBlueButton onClick={onTogglePinProtection} loading={loading} disabled={loading}>
diff --git a/app/components/views/TrezorPage/FirmwareUpdate.js b/app/components/views/TrezorPage/FirmwareUpdate.js
index abd3f8a274..7828c0d4a2 100644
--- a/app/components/views/TrezorPage/FirmwareUpdate.js
+++ b/app/components/views/TrezorPage/FirmwareUpdate.js
@@ -8,7 +8,7 @@ import { PathBrowseInput } from "inputs";
 class FirmwareUpdate extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { path: "" };
+    this.state = { path: "", show: false };
   }
 
   onChangePath(path) {
@@ -19,6 +19,10 @@ class FirmwareUpdate extends React.Component {
     this.props.onUpdateFirmware(this.state.path);
   }
 
+  onToggleAccordion() {
+    this.setState({ show: !this.state.show });
+  }
+
   render() {
 
     const header = (
@@ -33,6 +37,8 @@ class FirmwareUpdate extends React.Component {
       <VerticalAccordion
         height={250}
         header={header}
+        show={this.state.show}
+        onToggleAccordion={this.onToggleAccordion}
         className="trezor-config-accordion trezor-config-regular-buttons"
       >
         <div className="trezor-wipe-warning">
diff --git a/app/components/views/TrezorPage/RecoveryButtons.js b/app/components/views/TrezorPage/RecoveryButtons.js
index 28696cee0a..c95a93bf6d 100644
--- a/app/components/views/TrezorPage/RecoveryButtons.js
+++ b/app/components/views/TrezorPage/RecoveryButtons.js
@@ -7,6 +7,11 @@ import { Documentation } from "shared";
 class RecoveryButtons extends React.Component {
   constructor(props) {
     super(props);
+    this.state = { show: false };
+  }
+
+  onToggleAccordion() {
+    this.setState({ show: !this.state.show });
   }
 
   render() {
@@ -23,6 +28,8 @@ class RecoveryButtons extends React.Component {
       <VerticalAccordion
         height={250}
         header={header}
+        show={this.state.show}
+        onToggleAccordion={this.onToggleAccordion}
         className="trezor-config-accordion trezor-config-regular-buttons"
       >
         <div className="trezor-wipe-warning">