feat(qna): slightly more aesthetic UI

packages/core/botpress/src/web/react-bootstrap.scss

@@ -6,8 +6,8 @@
     font-size: 14px;
     color: $btn-text-color;
     background-color: $btn-bg-color;
+    border-color: $btn-bg-color;
     opacity: 0.75;
-    border: none;
     text-align: center;
     padding-left: 20px;
     padding-right: 20px;
@@ -16,24 +16,29 @@
 
     &:hover {
       background-color: $btn-bg-color-hover;
+      border-color: $btn-bg-color-hover;
       opacity: 1;
       color: $btn-text-color;
     }
   }
 
   :global(.btn-danger) {
     background-color: #af4f4b;
+    border-color: #af4f4b;
 
     &:hover {
       background-color: #b13434;
+      border-color: #b13434;
     }
   }
 
   :global(.btn-default) {
     background-color: #b1b1b1;
+    border-color: #b1b1b1;
 
     &:hover {
       background-color: #a5a5a5;
+      border-color: #a5a5a5;
     }
   }
 

packages/functionals/botpress-qna/src/views/ArrayEditor.js

@@ -115,7 +115,6 @@ export default class ArrayEditor extends Component {
     return (
       <Fragment>
         {this.renderItemForm(newItem, null)}
-        <hr />
         {items && items.map(this.renderItemForm)}
       </Fragment>
     )

packages/functionals/botpress-qna/src/views/QuestionsEditor.js

@@ -1,18 +1,18 @@
-import React, { Component, Fragment } from 'react'
+import React, { Component } from 'react'
 
-import { FormGroup, FormControl, Panel, ButtonToolbar, Button } from 'react-bootstrap'
+import { FormGroup, FormControl, ButtonToolbar, Button, InputGroup, Glyphicon } from 'react-bootstrap'
+
+import classnames from 'classnames'
 
 import ArrayEditor from './ArrayEditor'
+import style from './style.scss'
 
 export default class QuestionsEditor extends Component {
   onQuestionChange = (index, onChange) => event => {
     onChange(event.target.value, index)
   }
 
   updateState = newState => {
-    if (newState.newItem != null) {
-      this.setState({ newItem: newState.newItem })
-    }
     if (newState.items != null) {
       this.props.onChange(newState.items)
     }
@@ -25,46 +25,39 @@ export default class QuestionsEditor extends Component {
   renderForm = (data, index, { onDelete, onChange }) => {
     if (index == null) {
       return (
-        <ButtonToolbar>
-          <Button type="button" bsStyle="success" onClick={this.addEmptyQuestion}>
-            Add another question
-          </Button>
-        </ButtonToolbar>
+        <div className={classnames(style.paddedRow, style.questionToolbar)}>
+          <ButtonToolbar>
+            <Button type="button" bsStyle="success" onClick={this.addEmptyQuestion}>
+              <Glyphicon glyph="plus-sign" />&nbsp; Add another question
+            </Button>
+          </ButtonToolbar>
+        </div>
       )
     }
 
     return (
-      <Fragment>
-        <FormGroup>
-          <FormControl
-            componentClass="textarea"
-            placeholder="Question"
-            value={data}
-            onChange={this.onQuestionChange(index, onChange)}
-          />
-        </FormGroup>
-
-        <ButtonToolbar>
-          <Button type="button" bsSize="sm" bsStyle="danger" onClick={() => onDelete(index)}>
-            Delete
-          </Button>
-        </ButtonToolbar>
-      </Fragment>
+      <FormGroup>
+        <InputGroup>
+          <FormControl placeholder="Question" value={data} onChange={this.onQuestionChange(index, onChange)} />
+
+          <InputGroup.Button>
+            <Button type="button" bsStyle="danger" onClick={() => onDelete(index)}>
+              <Glyphicon glyph="remove-circle" />
+            </Button>
+          </InputGroup.Button>
+        </InputGroup>
+      </FormGroup>
     )
   }
 
   render() {
     return (
-      <Panel>
-        <Panel.Body>
-          <ArrayEditor
-            items={this.props.items}
-            renderItem={this.renderForm}
-            updateState={this.updateState}
-            createNewItem={() => ''}
-          />
-        </Panel.Body>
-      </Panel>
+      <ArrayEditor
+        items={this.props.items}
+        renderItem={this.renderForm}
+        updateState={this.updateState}
+        createNewItem={() => ''}
+      />
     )
   }
 }

packages/functionals/botpress-qna/src/views/index.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react'
+import React, { Component } from 'react'
 
 import {
   Row,
@@ -10,16 +10,17 @@ import {
   Radio,
   Panel,
   ButtonToolbar,
-  Button
+  Button,
+  Well
 } from 'react-bootstrap'
 import Select from 'react-select'
 
-// import classnames from 'classnames'
+import classnames from 'classnames'
 import find from 'lodash/find'
 
 import ArrayEditor from './ArrayEditor'
 import QuestionsEditor from './QuestionsEditor'
-// import style from './style.scss'
+import style from './style.scss'
 
 const getInputValue = input => {
   switch (input.type) {
@@ -161,37 +162,43 @@ export default class QnaAdmin extends Component {
       : find(flows, { name: redirectFlow }).nodes.map(({ name }) => ({ label: name, value: name }))
 
     return (
-      <Row>
-        <Col sm={6} md={2}>
-          Flow:
-        </Col>
-        <Col sm={6} md={4}>
-          <Select
-            value={redirectFlow}
-            options={flowOptions}
-            onChange={this.onSelectChange(index, 'redirectFlow', onChange)}
-          />
-        </Col>
-
-        <Col sm={6} md={2}>
-          Node:
-        </Col>
-        <Col sm={6} md={4}>
-          <Select
-            value={data.redirectNode}
-            options={nodeOptions}
-            onChange={this.onSelectChange(index, 'redirectNode', onChange)}
-          />
-        </Col>
-      </Row>
+      <div className={style.paddedRow}>
+        <Row>
+          <Col sm={6} md={2}>
+            Flow:
+          </Col>
+          <Col sm={6} md={4}>
+            <Select
+              value={redirectFlow}
+              options={flowOptions}
+              onChange={this.onSelectChange(index, 'redirectFlow', onChange)}
+            />
+          </Col>
+
+          <Col sm={6} md={2}>
+            Node:
+          </Col>
+          <Col sm={6} md={4}>
+            <Select
+              value={data.redirectNode}
+              options={nodeOptions}
+              onChange={this.onSelectChange(index, 'redirectNode', onChange)}
+            />
+          </Col>
+        </Row>
+      </div>
     )
   }
 
   renderForm = ({ data }, index, { isDirty, onCreate, onEdit, onReset, onDelete, onChange }) => (
-    <Fragment>
-      {index == null && <h3>New Q&amp;A</h3>}
-
-      <Checkbox checked={data.enabled} onChange={this.onInputChange(index, 'enabled', onChange)}>
+    <Well bsSize="small" bsClass={classnames('well', style.qna, { [style.pale]: !data.enabled })}>
+      {index == null && <h4>New Q&amp;A</h4>}
+
+      <Checkbox
+        checked={data.enabled}
+        onChange={this.onInputChange(index, 'enabled', onChange)}
+        bsClass={classnames('checkbox', { [style.strong]: data.enabled })}
+      >
         Enabled
       </Checkbox>
 
@@ -256,7 +263,7 @@ export default class QnaAdmin extends Component {
           {index != null ? `${isDirty ? '* ' : ''}Save` : 'Create'}
         </Button>
       </ButtonToolbar>
-    </Fragment>
+    </Well>
   )
 
   render() {

packages/functionals/botpress-qna/src/views/style.scss

@@ -1 +1,36 @@
+.qna {
+  h4 {
+    margin-top: 0;
+    font-weight: bold;
+  }
 
+  :global(.panel-heading) {
+    padding: 5px 10px;
+  }
+
+  :global(.panel-body) {
+    padding: 10px;
+  }
+}
+
+.paddedRow {
+  padding-bottom: 10px;
+}
+
+.questionToolbar {
+  :global(.btn) {
+    float: right;
+  }
+}
+
+.pale {
+  opacity: 0.8;
+}
+
+.strong {
+  &,
+  & *,
+  label {
+    font-weight: bold;
+  }
+}