diff --git a/css/emoji-mart.css b/css/emoji-mart.css index 93e62d7..255cf44 100644 --- a/css/emoji-mart.css +++ b/css/emoji-mart.css @@ -87,17 +87,29 @@ .emoji-mart-search { margin-top: 6px; padding: 0 6px; + position: relative; } + .emoji-mart-search input { font-size: 16px; display: block; width: 100%; - padding: .2em .6em; + padding: .2em 1.6em .2em .6em; border-radius: 25px; border: 1px solid #d9d9d9; outline: 0; } +.emoji-mart-search-icon { + position: absolute; + top: 5px; + right: 13px; + z-index: 2; + padding: 0; + border: none; + background: none; +} + .emoji-mart-category .emoji-mart-emoji span { z-index: 1; position: relative; diff --git a/src/components/anchors.js b/src/components/anchors.js index e620387..13a484b 100644 --- a/src/components/anchors.js +++ b/src/components/anchors.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import SVGs from '../svgs' +import { categories as icons } from '../svgs' export default class Anchors extends React.PureComponent { constructor(props) { @@ -18,21 +18,6 @@ export default class Anchors extends React.PureComponent { this.handleClick = this.handleClick.bind(this) } - getSVG(id) { - this.SVGs || (this.SVGs = {}) - - if (this.SVGs[id]) { - return this.SVGs[id] - } else { - let svg = ` - ${SVGs[id]} - ` - - this.SVGs[id] = svg - return svg - } - } - handleClick(e) { var index = e.currentTarget.getAttribute('data-index') var { categories, onAnchorClick } = this.props @@ -65,7 +50,7 @@ export default class Anchors extends React.PureComponent { }`} style={{ color: isSelected ? color : null }} > -
+
@@ -47,6 +76,13 @@ export default class Search extends React.PureComponent { placeholder={i18n.search} autoFocus={autoFocus} /> +
) } diff --git a/src/svgs/index.js b/src/svgs/index.js index 877ce15..b6a7f74 100644 --- a/src/svgs/index.js +++ b/src/svgs/index.js @@ -1,23 +1,29 @@ -const SVGs = { - activity: ``, +const categories = { + activity: ``, - custom: ``, + custom: ``, - flags: ``, + flags: ``, - foods: ``, + foods: ``, - nature: ``, + nature: ``, - objects: ``, + objects: ``, - people: ``, + people: ``, - places: ``, + places: ``, - recent: ``, + recent: ``, - symbols: ``, + symbols: ``, } -export default SVGs +const search = { + search: ``, + + delete: ``, +} + +export { categories, search }