feat(ui): add tabs to the modal

ui/src/Components/MainModal/Help.js

@@ -53,7 +53,7 @@ const FilterExample = ({ example, children }) => (
 );
 FilterExample.propTypes = {
   example: PropTypes.string.isRequired,
-  children: PropTypes.array
+  children: PropTypes.node
 };
 
 const Help = () => (

ui/src/Components/MainModal/index.css

@@ -0,0 +1,3 @@
+.modal-header .close {
+  line-height: 1.6;
+}

ui/src/Components/MainModal/index.js

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import PropTypes from "prop-types";
 
 import { observer } from "mobx-react";
 import { observable, action } from "mobx";
@@ -8,6 +9,27 @@ import { faCog } from "@fortawesome/free-solid-svg-icons/faCog";
 
 import { Help } from "./Help";
 
+import "./index.css";
+
+const Tab = ({ title, active, onClick }) => (
+  <a
+    className={`nav-item nav-link cursor-pointer ${active ? "active" : ""}`}
+    onClick={onClick}
+  >
+    {title}
+  </a>
+);
+Tab.propTypes = {
+  title: PropTypes.string.isRequired,
+  active: PropTypes.bool,
+  onClick: PropTypes.func.isRequired
+};
+
+const TabNames = Object.freeze({
+  Settings: "settings",
+  Help: "help"
+});
+
 const MainModal = observer(
   class MainModal extends Component {
     toggle = observable(
@@ -23,6 +45,16 @@ const MainModal = observer(
       { toggle: action.bound, hide: action.bound }
     );
 
+    tab = observable(
+      {
+        current: TabNames.Settings,
+        setTab(newTab) {
+          this.current = newTab;
+        }
+      },
+      { setTab: action.bound }
+    );
+
     componentDidUpdate() {
       document.body.classList.toggle("modal-open", this.toggle.show);
     }
@@ -39,8 +71,6 @@ const MainModal = observer(
               <a
                 className="nav-link mx-1 cursor-pointer"
                 data-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="true"
                 onClick={this.toggle.toggle}
               >
                 <FontAwesomeIcon icon={faCog} />
@@ -50,25 +80,33 @@ const MainModal = observer(
           {this.toggle.show ? (
             <div
               className="modal d-block bg-primary-transparent-80"
-              tabIndex="-1"
               role="dialog"
             >
               <div className="modal-dialog modal-lg" role="document">
                 <div className="modal-content">
-                  <div className="modal-header">
-                    <h5 className="modal-title">Help</h5>
+                  <div className="modal-header py-2">
+                    <nav className="nav nav-pills nav-justified w-100">
+                      <Tab
+                        title="Settings"
+                        active={this.tab.current === TabNames.Settings}
+                        onClick={() => this.tab.setTab(TabNames.Settings)}
+                      />
+                      <Tab
+                        title="Help"
+                        active={this.tab.current === TabNames.Help}
+                        onClick={() => this.tab.setTab(TabNames.Help)}
+                      />
+                    </nav>
                     <button
                       type="button"
                       className="close"
-                      data-dismiss="modal"
-                      aria-label="Close"
                       onClick={this.toggle.hide}
                     >
-                      <span aria-hidden="true">&times;</span>
+                      <span>&times;</span>
                     </button>
                   </div>
                   <div className="modal-body">
-                    <Help />
+                    {this.tab.current === TabNames.Help ? <Help /> : null}
                   </div>
                 </div>
               </div>