1 files changed, 20 insertions, 10 deletions
diff --git a/diplomacy/web/src/gui/components/help.jsx b/diplomacy/web/src/gui/components/help.jsx
index 1ec1a54..f3f469f 100644
--- a/diplomacy/web/src/gui/components/help.jsx
+++ b/diplomacy/web/src/gui/components/help.jsx
@@ -1,13 +1,23 @@
 import React from "react";
+import PropTypes from 'prop-types';
+import {FancyBox} from "./fancyBox";
 
-export function Help() {
-    return (
-        <div>
-            <p>When building an order, press <strong>ESC</strong> to reset build.</p>
-            <p>Press letter associated to an order type to start building an order of this type.
-                <br/> Order type letter is indicated in order type name after order type radio button.
-            </p>
-            <p>In Phase History tab, use keyboard left and right arrows to navigate in past phases.</p>
-        </div>
-    );
+export class Help extends React.Component {
+    render() {
+        return (
+            <FancyBox title={'Help'} onClose={this.props.onClose}>
+                <div>
+                    <p>When building an order, press <strong>ESC</strong> to reset build.</p>
+                    <p>Press letter associated to an order type to start building an order of this type.
+                        <br/> Order type letter is indicated in order type name after order type radio button.
+                    </p>
+                    <p>In Phase History tab, use keyboard left and right arrows to navigate in past phases.</p>
+                </div>
+            </FancyBox>
+        );
+    }
 }
+
+Help.propTypes = {
+    onClose: PropTypes.func.isRequired
+};