port help element

src/ui/components/common/HelpButton.css

@@ -9,7 +9,22 @@
   filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 20%));
 }
 
+.HelpButton:hover {
+  cursor: pointer;
+}
+
 .HelpButton img {
   height: 100%;
   filter: invert(100%) sepia(2%) saturate(201%) hue-rotate(47deg) brightness(117%) contrast(100%);
+}
+
+.HelpContents {
+  text-align: center;
+}
+
+.HelpContents .MiniDialog {
+  bottom: 80%;
+  left: 35%;
+  width: 60%;
+  height: 60%;
 }

src/ui/components/common/HelpButton.tsx

@@ -2,8 +2,10 @@ import React from 'react'
 
 import './HelpButton.css'
 import Help from '../../../resources/icons/help.svg'
+import MiniDialog from '../MiniDialog'
 
 interface IProps {
+  contents: string
   id?: string
 }
 
@@ -14,14 +16,37 @@ interface IState {
 export default class HelpButton extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props)
+
+    this.state = {
+      opened: false
+    }
+
+    this.setOpen = this.setOpen.bind(this)
+    this.setClosed = this.setClosed.bind(this)
+  }
+
+  setOpen() {
+    this.setState({ opened: true })
+  }
+
+  setClosed() {
+    this.setState({ opened: false })
   }
 
   render() {
     return (
       <div className="HelpSection">
-        <div className="HelpButton">
+        <div className="HelpButton" onMouseEnter={this.setOpen} onMouseLeave={this.setClosed}>
           <img src={Help} />
         </div>
+
+        <div className="HelpContents" style={{
+          display: this.state.opened ? 'block' : 'none'
+        }}>
+          <MiniDialog closeFn={this.setClosed}>
+            {this.props.contents}
+          </MiniDialog>
+        </div>
       </div>
     )
   }