From 4dacefc32a8cdc79d98e759efd2f55d4fb2f7e50 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Fri, 22 Mar 2024 23:03:05 +0100
Subject: [PATCH] Fix wrong background on unread conversations in web UI

---
 .../components/conversation.jsx               | 26 ++++++++-----------
 .../styles/mastodon/components.scss           | 21 ++-------------
 2 files changed, 13 insertions(+), 34 deletions(-)

diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx b/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx
index 3af89f9974..5608529b19 100644
--- a/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx
+++ b/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx
@@ -49,7 +49,7 @@ const getAccounts = createSelector(
 
 const getStatus = makeGetStatus();
 
-export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown }) => {
+export const Conversation = ({ conversation, onMoveUp, onMoveDown }) => {
   const id = conversation.get('id');
   const unread = conversation.get('unread');
   const lastStatusId = conversation.get('last_status');
@@ -183,7 +183,7 @@ export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown })
 
   return (
     <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'>
           <AvatarComposite accounts={accounts} size={48} />
         </div>
@@ -217,18 +217,15 @@ export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown })
           <div className='status__action-bar'>
             <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.reply)} icon='reply' iconComponent={ReplyIcon} onClick={handleReply} />
 
-            <div className='status__action-bar-dropdown'>
-              <DropdownMenuContainer
-                scrollKey={scrollKey}
-                status={lastStatus}
-                items={menu}
-                icon='ellipsis-h'
-                iconComponent={MoreHorizIcon}
-                size={18}
-                direction='right'
-                title={intl.formatMessage(messages.more)}
-              />
-            </div>
+            <DropdownMenuContainer
+              status={lastStatus}
+              items={menu}
+              icon='ellipsis-h'
+              iconComponent={MoreHorizIcon}
+              size={18}
+              direction='right'
+              title={intl.formatMessage(messages.more)}
+            />
           </div>
         </div>
       </div>
@@ -238,7 +235,6 @@ export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown })
 
 Conversation.propTypes = {
   conversation: ImmutablePropTypes.map.isRequired,
-  scrollKey: PropTypes.string,
   onMoveUp: PropTypes.func,
   onMoveDown: PropTypes.func,
 };
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index c2a968aec3..f858458ccb 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -8183,11 +8183,6 @@ noscript {
   padding: 5px;
   padding-bottom: 0;
 
-  &:focus {
-    background: lighten($ui-base-color, 2%);
-    outline: 0;
-  }
-
   &__avatar {
     flex: 0 0 auto;
     padding: 10px;
@@ -8235,7 +8230,7 @@ noscript {
       flex-grow: 1;
 
       a {
-        color: $primary-text-color;
+        color: inherit;
         text-decoration: none;
 
         &:hover,
@@ -8252,19 +8247,7 @@ noscript {
   }
 
   &--unread {
-    background: lighten($ui-base-color, 2%);
-
-    &:focus {
-      background: lighten($ui-base-color, 4%);
-    }
-
-    .conversation__content__info {
-      font-weight: 700;
-    }
-
-    .conversation__content__relative-time {
-      color: $primary-text-color;
-    }
+    background: rgba($ui-highlight-color, 0.05);
   }
 }