move help buttons to alerts

src/ui/components/common/HelpButton.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import './HelpButton.css'
 import Help from '../../../resources/icons/help.svg'
 import MiniDialog from '../MiniDialog'
+import { translate } from '../../../utils/language'
 
 interface IProps {
   children?: React.ReactNode[] | React.ReactNode
@@ -10,45 +11,23 @@ interface IProps {
   id?: string
 }
 
-interface IState {
-  opened: boolean
-}
-
-export default class HelpButton extends React.Component<IProps, IState> {
+export default class HelpButton extends React.Component<IProps, never> {
   constructor(props: IProps) {
     super(props)
 
-    this.state = {
-      opened: false,
-    }
-
-    this.setOpen = this.setOpen.bind(this)
-    this.setClosed = this.setClosed.bind(this)
+    this.showAlert = this.showAlert.bind(this)
   }
 
-  setOpen() {
-    this.setState({ opened: true })
-  }
-
-  setClosed() {
-    this.setState({ opened: false })
+  async showAlert() {
+    if (this.props.contents) alert(await translate(this.props.contents))
   }
 
   render() {
     return (
       <div className="HelpSection">
-        <div className="HelpButton" onMouseEnter={this.setOpen} onMouseLeave={this.setClosed}>
+        <div className="HelpButton" onClick={this.showAlert}>
           <img src={Help} />
         </div>
-
-        <div
-          className="HelpContents"
-          style={{
-            display: this.state.opened ? 'block' : 'none',
-          }}
-        >
-          <MiniDialog closeFn={this.setClosed}>{this.props.contents || this.props.children}</MiniDialog>
-        </div>
       </div>
     )
   }

src/ui/components/menu/Downloads.tsx

@@ -199,9 +199,7 @@ export default class Downloads extends React.Component<IProps, IState> {
             <Tr
               text={this.state.grasscutter_set ? 'downloads.grasscutter_stable' : 'downloads.grasscutter_stable_update'}
             />
-            <HelpButton>
-              <Tr text="help.gc_stable_jar" />
-            </HelpButton>
+            <HelpButton contents="help.gc_stable_jar" />
           </div>
           <div className="DownloadValue" id="downloadMenuButtonGCStable">
             <BigButton
@@ -218,9 +216,7 @@ export default class Downloads extends React.Component<IProps, IState> {
             <Tr
               text={this.state.grasscutter_set ? 'downloads.grasscutter_latest' : 'downloads.grasscutter_latest_update'}
             />
-            <HelpButton>
-              <Tr text="help.gc_dev_jar" />
-            </HelpButton>
+            <HelpButton contents="help.gc_dev_jar" />
           </div>
           <div className="DownloadValue" id="downloadMenuButtonGCDev">
             <BigButton
@@ -244,9 +240,7 @@ export default class Downloads extends React.Component<IProps, IState> {
                   : 'downloads.grasscutter_stable_data_update'
               }
             />
-            <HelpButton>
-              <Tr text="help.gc_stable_data" />
-            </HelpButton>
+            <HelpButton contents="help.gc_stable_data" />
           </div>
           <div className="DownloadValue" id="downloadMenuButtonGCStableData">
             <BigButton
@@ -267,9 +261,7 @@ export default class Downloads extends React.Component<IProps, IState> {
                   : 'downloads.grasscutter_latest_data_update'
               }
             />
-            <HelpButton>
-              <Tr text="help.gc_dev_data" />
-            </HelpButton>
+            <HelpButton contents="help.gc_dev_data" />
           </div>
           <div className="DownloadValue" id="downloadMenuButtonGCDevData">
             <BigButton
@@ -287,9 +279,7 @@ export default class Downloads extends React.Component<IProps, IState> {
         <div className="DownloadMenuSection" id="downloadMenuContainerResources">
           <div className="DownloadLabel" id="downloadMenuLabelResources">
             <Tr text="downloads.resources" />
-            <HelpButton>
-              <Tr text="help.resources" />
-            </HelpButton>
+            <HelpButton contents="help.resources" />
           </div>
           <div className="DownloadValue" id="downloadMenuButtonResources">
             <BigButton

src/ui/components/menu/Game.tsx

@@ -71,9 +71,7 @@ export default class Downloads extends React.Component<IProps, IState> {
               Download Game
             </BigButton>
           )}
-          <HelpButton>
-            <Tr text="main.game_help_text" />
-          </HelpButton>
+          <HelpButton contents="main.game_help_text" />
         </div>
 
         <div className="GameDownloadDir">