[MM-43601] Switch upgrade button to an actual button and moved onClick event (#2080)

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;

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;