Fix: #885 テーマをハイコントラストにしているとリアクションのボタンが背景と同化する

kmycode · Oct 20, 2024 · 3b1a59c · 3b1a59c
1 parent e3863b4
commit 3b1a59c
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 14 deletions.
diff --git a/app/javascript/mastodon/components/status_action_bar.jsx b/app/javascript/mastodon/components/status_action_bar.jsx
@@ -11,7 +11,6 @@ import { connect } from 'react-redux';
 
 import BookmarkIcon from '@/material-icons/400-24px/bookmark-fill.svg';
 import BookmarkBorderIcon from '@/material-icons/400-24px/bookmark.svg?react';
-import EmojiReactionIcon from '@/material-icons/400-24px/mood.svg?react';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
@@ -166,8 +165,6 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   };
 
-  handleEmojiPickInnerButton = () => {};
-
   handleReblogClick = e => {
     const { signedIn } = this.props.identity;
 
@@ -485,9 +482,7 @@ class StatusActionBar extends ImmutablePureComponent {
     const denyFromAll = emojiReactionPolicy !== 'block' && emojiReactionPolicy !== 'block';
     const emojiPickerDropdown = (enableEmojiReaction && emojiReactionAvailableServer && denyFromAll && (writtenByMe || (following && followed && mutual && outside)) && (
       <div className='status__action-bar__button-wrapper'>
-        <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={(
-          <IconButton icon='smile-o' iconComponent={EmojiReactionIcon} onClick={this.handleEmojiPickInnerButton} />
-        )} />
+        <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} inverted={false} />
       </div>
     )) || (enableEmojiReaction && (
       <div className='status__action-bar__button-wrapper status__action-bar__button-wrapper__blank' />

diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx
@@ -325,6 +325,7 @@ class EmojiPickerDropdown extends PureComponent {
     onPickEmoji: PropTypes.func.isRequired,
     onSkinTone: PropTypes.func.isRequired,
     skinTone: PropTypes.number.isRequired,
+    inverted: PropTypes.bool,
   };
 
   state = {
@@ -387,7 +388,7 @@ class EmojiPickerDropdown extends PureComponent {
   };
 
   render () {
-    const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
+    const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis, inverted } = this.props;
     const title = intl.formatMessage(messages.emoji);
     const { active, loading, placement } = this.state;
 
@@ -399,7 +400,7 @@ class EmojiPickerDropdown extends PureComponent {
           active={active}
           iconComponent={MoodIcon}
           onClick={this.onToggle}
-          inverted
+          inverted={typeof(inverted) === 'undefined' || inverted}
         />
 
         <Overlay show={active} placement={placement} flip target={this.findTarget} popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}>

diff --git a/app/javascript/mastodon/features/status/components/action_bar.jsx b/app/javascript/mastodon/features/status/components/action_bar.jsx
@@ -11,7 +11,6 @@ import { connect } from 'react-redux';
 
 import BookmarkIcon from '@/material-icons/400-24px/bookmark-fill.svg?react';
 import BookmarkBorderIcon from '@/material-icons/400-24px/bookmark.svg?react';
-import EmojiReactionIcon from '@/material-icons/400-24px/mood.svg?react';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
@@ -232,8 +231,6 @@ class ActionBar extends PureComponent {
     this.props.onEmojiReact(this.props.status, data);
   };
 
-  handleEmojiPickInnerButton = () => {};
-
   render () {
     const { status, relationship, intl } = this.props;
     const { signedIn, permissions } = this.props.identity;
@@ -401,9 +398,7 @@ class ActionBar extends PureComponent {
     const denyFromAll = emojiReactionPolicy !== 'block' && emojiReactionPolicy !== 'block';
     const emojiPickerDropdown = (enableEmojiReaction && emojiReactionAvailableServer && denyFromAll && (writtenByMe || (following && followed && mutual && outside)) && (
       <div className='detailed-status__button'>
-        <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={(
-          <IconButton title={intl.formatMessage(messages.pickEmoji)} icon='smile-o' iconComponent={EmojiReactionIcon} onClick={this.handleEmojiPickInnerButton} />
-        )} />
+        <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} inverted={false} />
       </div>
     )) || (enableEmojiReaction && (
       <div className='detailed-status__button__blank' />