diff --git a/app/javascript/flavours/glitch/features/emoji_picker/index.js b/app/javascript/flavours/glitch/features/emoji_picker/index.js index d963039dc..a78117971 100644 --- a/app/javascript/flavours/glitch/features/emoji_picker/index.js +++ b/app/javascript/flavours/glitch/features/emoji_picker/index.js @@ -129,7 +129,6 @@ class ModifierPickerMenu extends React.PureComponent { active: PropTypes.bool, onSelect: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired, - modifier: PropTypes.number, }; handleClick = e => { @@ -166,36 +165,20 @@ class ModifierPickerMenu extends React.PureComponent { setRef = c => { this.node = c; - if (this.node) { - this.node.querySelector('li:first-child button').focus(); // focus the first element when opened - } } render () { - const { active, modifier } = this.props; + const { active } = this.props; return ( - +
+ + + + + + +
); } @@ -227,22 +210,10 @@ class ModifierPicker extends React.PureComponent { render () { const { active, modifier } = this.props; - function setRef(ref) { - if (!ref) { - return; - } - // TODO: It would be nice if we could pass props directly to emoji-mart's buttons. - const button = ref.querySelector('button'); - button.setAttribute('aria-haspopup', 'true'); - button.setAttribute('aria-expanded', active); - } - return (
-
- -
- + +
); } diff --git a/app/javascript/flavours/glitch/styles/components/emoji.scss b/app/javascript/flavours/glitch/styles/components/emoji.scss index ccfd42f28..dd386d698 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji.scss @@ -44,11 +44,11 @@ box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); overflow: hidden; - li { + button { display: block; cursor: pointer; border: 0; - padding: 3px 8px; + padding: 4px 8px; background: transparent; &:hover, diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss index 171623352..dcc551c5b 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss @@ -1,5 +1,3 @@ -@import '~emoji-mart/css/emoji-mart.css'; - .emoji-mart { &, * { @@ -53,14 +51,6 @@ &:hover { color: darken($lighter-text-color, 4%); - - svg { - fill: darken($lighter-text-color, 4%); - } - } - - svg { - fill: $lighter-text-color; } } @@ -69,19 +59,11 @@ &:hover { color: darken($highlight-text-color, 4%); - - svg { - fill: darken($highlight-text-color, 4%); - } } .emoji-mart-anchor-bar { bottom: 0; } - - svg { - fill: $highlight-text-color; - } } .emoji-mart-anchor-bar { @@ -101,6 +83,7 @@ } svg { + fill: currentColor; max-height: 18px; } } @@ -120,14 +103,15 @@ } .emoji-mart-search { - margin: 10px 40px 10px 5px; + padding: 10px; + padding-right: 45px; background: $simple-background-color; input { font-size: 14px; font-weight: 400; padding: 7px 9px; - font-family: $font-sans-serif; + font-family: inherit; display: block; width: 100%; background: rgba($ui-secondary-color, 0.3); @@ -182,7 +166,6 @@ font-weight: 500; padding: 5px 6px; background: $simple-background-color; - font-family: $font-sans-serif; } } diff --git a/app/javascript/flavours/glitch/util/emoji/emoji_picker.js b/app/javascript/flavours/glitch/util/emoji/emoji_picker.js index 73fcaa8c8..044d38cb2 100644 --- a/app/javascript/flavours/glitch/util/emoji/emoji_picker.js +++ b/app/javascript/flavours/glitch/util/emoji/emoji_picker.js @@ -1,5 +1,5 @@ -import Picker from 'emoji-mart/dist-modern/components/picker/picker'; -import Emoji from 'emoji-mart/dist-modern/components/emoji/emoji'; +import Picker from 'emoji-mart/dist-es/components/picker/picker'; +import Emoji from 'emoji-mart/dist-es/components/emoji/emoji'; export { Picker,