diff --git a/app/soapbox/components/autosuggest_input.js b/app/soapbox/components/autosuggest_input.js index 54ad6d264..cf5c8f04b 100644 --- a/app/soapbox/components/autosuggest_input.js +++ b/app/soapbox/components/autosuggest_input.js @@ -7,6 +7,7 @@ import { isRtl } from '../rtl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import classNames from 'classnames'; import { List as ImmutableList } from 'immutable'; +import Icon from 'soapbox/components/icon'; const textAtCursorMatchesToken = (str, caretPosition, searchTokens) => { let word; @@ -231,7 +232,11 @@ export default class AutosuggestInput extends ImmutablePureComponent { onMouseDown={this.handleMenuItemClick(item)} key={i} > - {item.text} + {item.icon && ( + + )} + + {item.text} )); }; diff --git a/app/soapbox/features/compose/components/search.js b/app/soapbox/features/compose/components/search.js index 063e3f939..f14f79a84 100644 --- a/app/soapbox/features/compose/components/search.js +++ b/app/soapbox/features/compose/components/search.js @@ -90,7 +90,7 @@ class Search extends React.PureComponent { const { intl, value } = this.props; return [ - { text: intl.formatMessage(messages.action, { query: value }), action: this.handleSubmit }, + { text: intl.formatMessage(messages.action, { query: value }), icon: require('@tabler/icons/icons/search.svg'), action: this.handleSubmit }, ]; } diff --git a/app/styles/autosuggest.scss b/app/styles/autosuggest.scss index 8bf4b39dd..33a8f062d 100644 --- a/app/styles/autosuggest.scss +++ b/app/styles/autosuggest.scss @@ -104,7 +104,8 @@ } .autosuggest-input__action { - display: block; + display: flex; + align-items: center; padding: 10px; border-radius: 4px; font-weight: bold; @@ -115,4 +116,9 @@ &.selected { background-color: var(--brand-color--med); } + + .svg-icon { + margin-right: 8px; + transform: translateY(-1px); + } }