Fix reactionpicker for fedibird

app/javascript/mastodon/components/reaction_picker_dropdown.js

@@ -269,7 +269,7 @@ class ReactionPickerDropdownMenu extends React.PureComponent {
           // It should not be transformed when mounting because the resulting
           // size will be used to determine the coordinate of the menu by
           // react-overlays
-          <div className={`dropdown-menu ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : null }} ref={this.setRef}>
+          <div className={`dropdown-menu dropdown-menu-reaction ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : null }} ref={this.setRef}>
             <div className={`dropdown-menu__arrow ${placement}`} style={{ left: arrowOffsetLeft, top: arrowOffsetTop }} />
             <ReactionPicker
               custom_emojis={custom_emojis}
@@ -297,6 +297,7 @@ export default class ReactionPickerDropdown extends React.PureComponent {
   static propTypes = {
     icon: PropTypes.string.isRequired,
     size: PropTypes.number.isRequired,
+    title: PropTypes.string.isRequired,
     active: PropTypes.bool,
     pressed: PropTypes.bool,
     iconButtonClass: PropTypes.string,
@@ -393,7 +394,7 @@ export default class ReactionPickerDropdown extends React.PureComponent {
     const open = this.state.id === openDropdownId;
 
     return (
-      <div>
+      <div className='emoji-picker-dropdown'>
         <IconButton
           icon={icon}
           title={title}

app/javascript/mastodon/components/status_action_bar.js

@@ -32,6 +32,7 @@ const messages = defineMessages({
   favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
   bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
   removeBookmark: { id: 'status.remove_bookmark', defaultMessage: 'Remove bookmark' },
+  emoji_reaction: { id: 'status.emoji_reaction', defaultMessage: 'Emoji reaction' },
   open: { id: 'status.open', defaultMessage: 'Expand this status' },
   report: { id: 'status.report', defaultMessage: 'Report @{name}' },
   muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
@@ -390,6 +391,7 @@ class StatusActionBar extends ImmutablePureComponent {
             className='status__action-bar-button'
             disabled={anonymousAccess}
             status={status}
+            title={intl.formatMessage(messages.emoji_reaction)}
             icon='smile-o'
             size={18}
             direction='right'

app/javascript/mastodon/containers/reaction_picker_dropdown_container.js

@@ -101,6 +101,9 @@ const mapDispatchToProps = (dispatch, { status, onPickEmoji, scrollKey }) => ({
       dispatch(isUserTouching() ? openModal('REACTION', {
         status: status,
         onPickEmoji: onPickEmoji,
+        onSkinTone: skinTone => {
+          dispatch(changeSetting(['skinTone'], skinTone));
+        },
         custom_emojis: getCustomEmojis(state),
         skinTone: state.getIn(['settings', 'skinTone']),
         frequentlyUsedEmojis: getFrequentlyUsedEmojis(state),

app/javascript/mastodon/features/status/components/action_bar.js

@@ -24,6 +24,7 @@ const messages = defineMessages({
   quote: { id: 'status.quote', defaultMessage: 'Quote' },
   favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
   bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
+  emoji_reaction: { id: 'status.emoji_reaction', defaultMessage: 'Emoji reaction' },
   more: { id: 'status.more', defaultMessage: 'More' },
   mute: { id: 'status.mute', defaultMessage: 'Mute @{name}' },
   muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
@@ -327,13 +328,15 @@ class ActionBar extends React.PureComponent {
         {show_quote_button && <div className='detailed-status__button'><IconButton disabled={!publicStatus || expired} title={!publicStatus ? intl.formatMessage(messages.cannot_quote) : intl.formatMessage(messages.quote)} icon='quote-right' onClick={this.handleQuoteClick} /></div>}
         {shareButton}
         <div className='detailed-status__button'><IconButton className='bookmark-icon' active={status.get('bookmarked')} disabled={!status.get('bookmarked') && expired} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
-        {enableReaction && <div className='status__action-bar-dropdown'>
+
+        {enableReaction && <div className='detailed-status__action-bar-dropdown'>
           <ReactionPickerDropdownContainer
             disabled={expired}
             active={status.get('emoji_reactioned')}
             pressed={status.get('emoji_reactioned')}
             className='status__action-bar-button'
             status={status}
+            title={intl.formatMessage(messages.emoji_reaction)}
             icon='smile-o'
             size={18}
             direction='right'
@@ -341,6 +344,7 @@ class ActionBar extends React.PureComponent {
             onRemoveEmoji={this.handleEmojiRemove}
           />
         </div>}
+
         <div className='detailed-status__action-bar-dropdown'>
           <DropdownMenuContainer size={18} icon='ellipsis-h' status={status} items={menu} direction='left' title={intl.formatMessage(messages.more)} />
         </div>

app/javascript/mastodon/features/ui/components/modal_root.js

@@ -76,7 +76,7 @@ export default class ModalRoot extends React.PureComponent {
   }
 
   renderLoading = modalId => () => {
-    return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS', 'CALENDAR', 'REACTON'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
+    return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS', 'CALENDAR', 'REACTION'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
   }
 
   renderError = (props) => {

app/javascript/mastodon/features/ui/components/reaction_modal.js

@@ -6,14 +6,11 @@ import StatusContent from '../../../components/status_content';
 import Avatar from '../../../components/avatar';
 import RelativeTimestamp from '../../../components/relative_timestamp';
 import DisplayName from '../../../components/display_name';
-import IconButton from '../../../components/icon_button';
-import classNames from 'classnames';
 
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import { EmojiPicker as EmojiPickerAsync } from '../util/async-components';
 import { buildCustomEmojis, categoriesFromEmojis } from '../../emoji/emoji';
-import { assetHost } from 'mastodon/utils/config';
 
 const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
@@ -188,7 +185,6 @@ class ReactionPicker extends React.PureComponent {
           showPreview={false}
           showSkinTones={false}
           notFound={notFoundFn}
-          autoFocus
           emojiTooltip
           style={{width: '100%'}}
         />

app/javascript/mastodon/locales/en.json

@@ -494,6 +494,7 @@
   "status.detailed_status": "Detailed conversation view",
   "status.direct": "Direct message @{name}",
   "status.embed": "Embed",
+  "status.emoji_reaction": "Emoji reaction",
   "status.favourite": "Favourite",
   "status.filtered": "Filtered",
   "status.load_more": "Load more",

app/javascript/mastodon/locales/ja.json

@@ -495,6 +495,7 @@
   "status.detailed_status": "詳細な会話ビュー",
   "status.direct": "@{name}さんにダイレクトメッセージ",
   "status.embed": "埋め込み",
+  "status.emoji_reaction": "絵文字リアクション",
   "status.favourite": "お気に入り",
   "status.filtered": "フィルターされました",
   "status.load_more": "もっと見る",

app/javascript/styles/mastodon-light/diff.scss

@@ -362,6 +362,7 @@ html {
 
 // Change the background colors of modals
 .actions-modal,
+.reaction-modal,
 .boost-modal,
 .confirmation-modal,
 .mute-modal,

app/javascript/styles/mastodon/components.scss

@@ -5430,7 +5430,31 @@ a.status-card.compact:hover {
   }
 }
 
-.reaction-modal,
+.dropdown-menu.dropdown-menu-reaction {
+  padding: 0;
+  background-color: $white;
+  .emoji-mart {
+    border-radius: 4px;
+  }
+}
+
+.reaction-modal {
+  max-height: 80vh;
+  max-width: 80vw;
+
+  .status {
+    overflow-y: auto;
+    max-height: 300px;
+    border-bottom-width: 0;
+  }
+
+  .status + .emoji-mart .emoji-mart-bar:first-child {
+    border-top-width: 1px;
+    border-top-left-radius: unset;
+    border-top-right-radius: unset;
+  }
+}
+
 .actions-modal {
   max-height: 80vh;
   max-width: 80vw;