runfix: re-implement indicator on settings button when a new device i…

…s added (WPB-9542) (#17763)
wireapp · Jul 16, 2024 · 5b451a1 · 5b451a1
1 parent 662e10f
commit 5b451a1
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 27 deletions.
diff --git a/src/script/page/LeftSidebar/panels/Conversations/ConversationTab/ConversationTab.tsx b/src/script/page/LeftSidebar/panels/Conversations/ConversationTab/ConversationTab.tsx
@@ -31,7 +31,7 @@ interface ConversationTabProps {
   unreadConversations?: number;
   dataUieName: string;
   isActive?: boolean;
-  showNotificationBadge?: boolean;
+  showNotificationsBadge?: boolean;
 }
 
 export const ConversationTab = ({
@@ -44,7 +44,7 @@ export const ConversationTab = ({
   unreadConversations = 0,
   dataUieName,
   isActive = false,
-  showNotificationBadge = false,
+  showNotificationsBadge = false,
 }: ConversationTabProps) => {
   return (
     <button
@@ -60,10 +60,10 @@ export const ConversationTab = ({
     >
       <span className="conversations-sidebar-btn--text-wrapper">
         {Icon}
-        {(unreadConversations > 0 || showNotificationBadge) && (
+        {(unreadConversations > 0 || showNotificationsBadge) && (
           <span
             className={cx('conversations-sidebar-btn--badge', {active: isActive})}
-            data-uie-name={showNotificationBadge ? 'notification-badge' : 'unread-badge'}
+            data-uie-name={showNotificationsBadge ? 'notification-badge' : 'unread-badge'}
           />
         )}
         <span className="conversations-sidebar-btn--text">{label || title}</span>

diff --git a/src/script/page/LeftSidebar/panels/Conversations/ConversationTabs/ConversationTabs.tsx b/src/script/page/LeftSidebar/panels/Conversations/ConversationTabs/ConversationTabs.tsx
@@ -184,7 +184,7 @@ export const ConversationTabs = ({
           }}
           conversationTabIndex={1}
           dataUieName="go-preferences"
-          showNotificationBadge={showNotificationsBadge}
+          showNotificationsBadge={showNotificationsBadge}
           isActive={currentTab === SidebarTabs.PREFERENCES}
         />
 

diff --git a/src/script/page/LeftSidebar/panels/Conversations/Conversations.tsx b/src/script/page/LeftSidebar/panels/Conversations/Conversations.tsx
@@ -109,6 +109,7 @@ const Conversations: React.FC<ConversationsProps> = ({
   const [conversationsFilter, setConversationsFilter] = useState<string>('');
   const {classifiedDomains, isTeam} = useKoSubscribableChildren(teamState, ['classifiedDomains', 'isTeam']);
   const {connectRequests} = useKoSubscribableChildren(userState, ['connectRequests']);
+  const {notifications} = useKoSubscribableChildren(preferenceNotificationRepository, ['notifications']);
 
   const {isTemporaryGuest} = useKoSubscribableChildren(selfUser, ['isTemporaryGuest']);
 
@@ -264,6 +265,7 @@ const Conversations: React.FC<ConversationsProps> = ({
           archivedConversations={archivedConversations}
           conversationRepository={conversationRepository}
           onClickPreferences={() => onClickPreferences(ContentState.PREFERENCES_ACCOUNT)}
+          showNotificationsBadge={notifications.length > 0}
         />
       </FadingScrollbar>
 

diff --git a/src/style/list/conversations.less b/src/style/list/conversations.less
@@ -292,28 +292,6 @@
   }
 }
 
-.conversations-settings-button {
-  .button-reset-default;
-  .button-icon-large;
-  .focus-border-radius;
-  position: relative;
-  outline-offset: 0.2rem;
-}
-
-.conversations-settings {
-  position: relative;
-
-  &--badge::after {
-    .dot-md;
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background-color: currentColor;
-    color: inherit;
-    content: '';
-  }
-}
-
 .conversations-hint {
   position: absolute;
   bottom: 0;