OpenCloud
/
mastodon
mirror of https://github.com/tootsuite/mastodon
1
1
Fork 0
Code Issues Releases Wiki Activity

Fix wrong background on unread conversations in web UI

fix-conversations-background
Eugen Rochko 2024-03-22 23:03:05 +01:00
parent 05eda8d193
commit 4dacefc32a
2 changed files with 13 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/javascript/mastodon/features/direct_timeline/components/conversation.jsx
View File

@ -49,7 +49,7 @@ const getAccounts = createSelector(
const getStatus = makeGetStatus(); const getStatus = makeGetStatus();
export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown }) => { export const Conversation = ({ conversation, onMoveUp, onMoveDown }) => {
const id = conversation.get('id'); const id = conversation.get('id');
const unread = conversation.get('unread'); const unread = conversation.get('unread');
const lastStatusId = conversation.get('last_status'); const lastStatusId = conversation.get('last_status');
@ -183,7 +183,7 @@ export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown })
return ( return (
<HotKeys handlers={handlers}> <HotKeys handlers={handlers}>
<div className={classNames('conversation focusable muted', { 'conversation--unread': unread })} tabIndex={0}> <div className={classNames('conversation focusable', { 'conversation--unread': unread })} tabIndex={0}>
<div className='conversation__avatar' onClick={handleClick} role='presentation'> <div className='conversation__avatar' onClick={handleClick} role='presentation'>
<AvatarComposite accounts={accounts} size={48} /> <AvatarComposite accounts={accounts} size={48} />
</div> </div>
@ -217,9 +217,7 @@ export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown })
<div className='status__action-bar'> <div className='status__action-bar'>
<IconButton className='status__action-bar-button' title={intl.formatMessage(messages.reply)} icon='reply' iconComponent={ReplyIcon} onClick={handleReply} /> <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.reply)} icon='reply' iconComponent={ReplyIcon} onClick={handleReply} />
<div className='status__action-bar-dropdown'>
<DropdownMenuContainer <DropdownMenuContainer
scrollKey={scrollKey}
status={lastStatus} status={lastStatus}
items={menu} items={menu}
icon='ellipsis-h' icon='ellipsis-h'
@ -231,14 +229,12 @@ export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown })
</div> </div>
</div> </div>
</div> </div>
</div>
</HotKeys> </HotKeys>
); );
}; };
Conversation.propTypes = { Conversation.propTypes = {
conversation: ImmutablePropTypes.map.isRequired, conversation: ImmutablePropTypes.map.isRequired,
scrollKey: PropTypes.string,
onMoveUp: PropTypes.func, onMoveUp: PropTypes.func,
onMoveDown: PropTypes.func, onMoveDown: PropTypes.func,
}; };

21
app/javascript/styles/mastodon/components.scss
View File

@ -8183,11 +8183,6 @@ noscript {
padding: 5px; padding: 5px;
padding-bottom: 0; padding-bottom: 0;
&:focus {
background: lighten($ui-base-color, 2%);
outline: 0;
}
&__avatar { &__avatar {
flex: 0 0 auto; flex: 0 0 auto;
padding: 10px; padding: 10px;
@ -8235,7 +8230,7 @@ noscript {
flex-grow: 1; flex-grow: 1;
a { a {
color: $primary-text-color; color: inherit;
text-decoration: none; text-decoration: none;
&:hover, &:hover,
@ -8252,19 +8247,7 @@ noscript {
} }
&--unread { &--unread {
background: lighten($ui-base-color, 2%); background: rgba($ui-highlight-color, 0.05);
&:focus {
background: lighten($ui-base-color, 4%);
}
.conversation__content__info {
font-weight: 700;
}
.conversation__content__relative-time {
color: $primary-text-color;
}
} }
} }