From 6aa8e78006833405dcb37631e58d87ea8e40522e Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Tue, 7 Apr 2020 18:53:18 -0230
Subject: [PATCH] Make ConnectedStatusIndicator clickable (#8297)

---
 .../connected-status-indicator.component.js                 | 6 ++++--
 ui/app/components/app/connected-status-indicator/index.scss | 4 ++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/ui/app/components/app/connected-status-indicator/connected-status-indicator.component.js b/ui/app/components/app/connected-status-indicator/connected-status-indicator.component.js
index ddae6353d..88dad4968 100644
--- a/ui/app/components/app/connected-status-indicator/connected-status-indicator.component.js
+++ b/ui/app/components/app/connected-status-indicator/connected-status-indicator.component.js
@@ -14,10 +14,12 @@ export default class ConnectedStatusIndicator extends Component {
 
   static propTypes = {
     status: PropTypes.oneOf([ STATUS_CONNECTED, STATUS_CONNECTED_TO_ANOTHER_ACCOUNT, STATUS_NOT_CONNECTED ]),
+    onClick: PropTypes.func,
   }
 
   static defaultProps = {
     status: STATUS_NOT_CONNECTED,
+    onClick: null,
   }
 
   renderStatusCircle = () => {
@@ -49,10 +51,10 @@ export default class ConnectedStatusIndicator extends Component {
 
   render () {
     return (
-      <div className="connected-status-indicator">
+      <button className="connected-status-indicator" onClick={this.props.onClick}>
         { this.renderStatusCircle() }
         { this.renderStatusText() }
-      </div>
+      </button>
     )
   }
 }
diff --git a/ui/app/components/app/connected-status-indicator/index.scss b/ui/app/components/app/connected-status-indicator/index.scss
index 4f063cfad..506e410ec 100644
--- a/ui/app/components/app/connected-status-indicator/index.scss
+++ b/ui/app/components/app/connected-status-indicator/index.scss
@@ -3,6 +3,10 @@
   align-items: center;
   place-self: center start;
 
+  background: none;
+  font-size: inherit;
+  padding: 8px 0;
+
   &__green-circle, &__yellow-circle, &__grey-circle {
     border-radius: 4px;
     height: 8px;