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>
     )
   }