fixes for the look of the react-jsonschema forms

package.json

@@ -6,6 +6,7 @@
     "@babel/core": "^7.0.0",
     "@types/d3-array": "^1.2.6",
     "@types/roslib": "^0.18.3",
+    "bootstrap": "^4.3.1",
     "d3": "^5.8.0",
     "d3-scale": "^2.2.2",
     "flexlayout-react": "^0.3.3",

src/Common.css

@@ -28,3 +28,10 @@ h2 {
 .about {
   margin: 10px 10px 10px 10px;
 }
+
+/* For the forms generated by react-jsonschema-form */
+i.glyphicon { display: none; }
+.btn-add::after { content: 'Add'; }
+.array-item-move-up::after { content: 'Move Up'; }
+.array-item-move-down::after { content: 'Move Down'; }
+.array-item-remove::after { content: 'Remove'; }
\ No newline at end of file

src/index.js

@@ -6,6 +6,8 @@ import RosLib from 'roslib';
 import {Board} from './Board';
 import { Header } from "./Header";
 
+import 'bootstrap/dist/css/bootstrap.min.css'
+
 class Main extends React.Component {
   constructor(props) {
     super(props);

src/utils/modeHandler.js

@@ -94,6 +94,7 @@ export class Modal extends Component {
             if (config.configurable && config.displayMode === "settings") {
                 return (
                 <Form
+                    className = "container"
                     schema={this.modes.settingsSchema}
                     onSubmit={this.handleSettingsChange.bind(this)}
                     formData={config} />);

yarn.lock

@@ -1948,6 +1948,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
+bootstrap@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.3.1.tgz#280ca8f610504d99d7b6b4bfc4b68cec601704ac"
+  integrity sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"