Merge pull request #1680 from botpress/ya-flow-ux

fix(ux): minor ux fix when editing a node on flow editor
botpress · Apr 12, 2019 · 3506554 · 3506554
2 parents 7dcc043 + 24eaf6e
commit 3506554
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 22 deletions.
diff --git a/src/bp/ui-studio/src/web/components/Content/Select/Widget.js b/src/bp/ui-studio/src/web/components/Content/Select/Widget.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
-import { FormGroup, InputGroup, FormControl, Glyphicon } from 'react-bootstrap'
+import { FormGroup, InputGroup, FormControl } from 'react-bootstrap'
+import { IoIosFolderOpen, IoMdCreate } from 'react-icons/io'
 
 import store from '~/store'
 import { upsertContentItem, fetchContentItem } from '~/actions'
@@ -52,15 +53,18 @@ class ContentPickerWidget extends Component {
       <FormGroup>
         <InputGroup>
           <FormControl placeholder={placeholder} value={textContent} disabled id={inputId || ''} />
-          <InputGroup.Addon>
+          <InputGroup.Addon style={{ padding: 0 }}>
             {contentItem && (
-              <a onClick={this.editItem} style={{ marginRight: '8px' }}>
-                <Glyphicon glyph="pencil" />
-              </a>
+              <div className={style.actionBtn} style={{ marginRight: '3px' }} onClick={this.editItem}>
+                <IoMdCreate size={20} color={'#0078cf'} />
+              </div>
             )}
-            <a onClick={() => window.botpress.pickContent({ contentType }, this.onChange)}>
-              <Glyphicon glyph="folder-open" />
-            </a>
+            <div
+              className={style.actionBtn}
+              onClick={() => window.botpress.pickContent({ contentType }, this.onChange)}
+            >
+              <IoIosFolderOpen size={20} color={'#0078cf'} />
+            </div>
           </InputGroup.Addon>
           <CreateOrEditModal
             show={this.state.showItemEdit}

diff --git a/src/bp/ui-studio/src/web/components/Content/Select/style.scss b/src/bp/ui-studio/src/web/components/Content/Select/style.scss
@@ -10,3 +10,17 @@
   border-radius: 0;
   margin-left: -1px;
 }
+
+.actionBtn {
+  display: inline-block;
+  padding: 5px 5px;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--c-neutral--light-1);
+  }
+
+  svg {
+    color: var(--c-brand);
+  }
+}
diff --git a/src/bp/ui-studio/src/web/views/FlowBuilder/nodeProps/ActionModalForm.jsx b/src/bp/ui-studio/src/web/views/FlowBuilder/nodeProps/ActionModalForm.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Modal, Button, Radio, OverlayTrigger, Tooltip, Glyphicon } from 'react-bootstrap'
+import { Modal, Button, Radio, OverlayTrigger, Tooltip } from 'react-bootstrap'
 import Markdown from 'react-markdown'
 import axios from 'axios'
 import _ from 'lodash'
@@ -158,23 +158,11 @@ export default class ActionModalForm extends Component {
       this.setState({ messageValue: `say #!${item.id}` })
     }
 
-    const tooltip = (
-      <Tooltip id="howMessageWorks">
-        You can type a regular message here or you can also provide a valid UMM bloc, for example &quot;#help&quot;.
-      </Tooltip>
-    )
-
-    const help = (
-      <OverlayTrigger placement="bottom" overlay={tooltip}>
-        <i className="material-icons">help</i>
-      </OverlayTrigger>
-    )
-
     const itemId = this.textToItemId(this.state.messageValue)
 
     return (
       <div>
-        <h5>Message {help}:</h5>
+        <h5>Message:</h5>
         <div className={style.section}>
           <ContentPickerWidget itemId={itemId} onChange={handleChange} placeholder="Message to send" />
         </div>