From d1ca1188b42de69c92dbba65d7edc1f513ab80c2 Mon Sep 17 00:00:00 2001
From: Devin Binnie <52460000+devinbinnie@users.noreply.github.com>
Date: Tue, 26 Apr 2022 09:17:01 -0400
Subject: [PATCH] [MM-43601] Switch upgrade button to an actual button and
 moved onClick event (#2080)

---
 src/renderer/components/MainPage.tsx          | 21 +++++++++++--------
 .../css/components/UpgradeButton.scss         |  3 ++-
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/MainPage.tsx b/src/renderer/components/MainPage.tsx
index 57538d37..11eab2e0 100644
--- a/src/renderer/components/MainPage.tsx
+++ b/src/renderer/components/MainPage.tsx
@@ -426,19 +426,21 @@ export default class MainPage extends React.PureComponent<Props, State> {
         let upgradeIcon;
         if (this.state.upgradeStatus !== UpgradeStatus.NONE) {
             upgradeIcon = (
-                <span className={classNames('upgrade-btns', {darkMode: this.state.darkMode})}>
+                <button
+                    className={classNames('upgrade-btns', {darkMode: this.state.darkMode})}
+                    onClick={() => {
+                        if (this.state.upgradeStatus === UpgradeStatus.DOWNLOADING) {
+                            return;
+                        }
+
+                        window.ipcRenderer.send(this.state.upgradeStatus === UpgradeStatus.DOWNLOADED ? START_UPGRADE : START_DOWNLOAD);
+                    }}
+                >
                     <div
                         className={classNames('button upgrade-button', {
                             rotate: this.state.upgradeStatus === UpgradeStatus.DOWNLOADING,
                         })}
                         title={upgradeTooltip}
-                        onClick={() => {
-                            if (this.state.upgradeStatus === UpgradeStatus.DOWNLOADING) {
-                                return;
-                            }
-
-                            window.ipcRenderer.send(this.state.upgradeStatus === UpgradeStatus.DOWNLOADED ? START_UPGRADE : START_DOWNLOAD);
-                        }}
                     >
                         <i
                             className={classNames({
@@ -449,7 +451,8 @@ export default class MainPage extends React.PureComponent<Props, State> {
                         />
                         {(this.state.upgradeStatus !== UpgradeStatus.DOWNLOADING) && <div className={'circle'}/>}
                     </div>
-                </span>);
+                </button>
+            );
         }
 
         let titleBarButtons;
diff --git a/src/renderer/css/components/UpgradeButton.scss b/src/renderer/css/components/UpgradeButton.scss
index d6341d37..7999d8ee 100644
--- a/src/renderer/css/components/UpgradeButton.scss
+++ b/src/renderer/css/components/UpgradeButton.scss
@@ -8,6 +8,8 @@
   margin-right: 4px;
   text-align: center;
   color: rgba(63, 67, 80, 0.56);
+  background: none;
+  border: none;
 
   &:hover {
     background-color: rgba(63, 67, 80, 0.08);
@@ -15,7 +17,6 @@
 }
 
 .upgrade-button {
-  margin: 7px;
   height: 18px;
   cursor: pointer;