diff --git a/web/chat/chat-thread-list-item.react.js b/web/chat/chat-thread-list-item.react.js --- a/web/chat/chat-thread-list-item.react.js +++ b/web/chat/chat-thread-list-item.react.js @@ -6,6 +6,7 @@ import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; import type { ChatThreadItem } from 'lib/selectors/chat-selectors.js'; import { useAncestorThreads } from 'lib/shared/ancestor-threads.js'; +import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js'; import { shortAbsoluteDate } from 'lib/utils/date-utils.js'; import { useResolvedThreadInfo, @@ -17,6 +18,7 @@ import ChatThreadListSidebar from './chat-thread-list-sidebar.react.js'; import css from './chat-thread-list.css'; import MessagePreview from './message-preview.react.js'; +import Avatar from '../components/avatar.react.js'; import { useSelector } from '../redux/redux-utils.js'; import { useOnClickThread, @@ -82,12 +84,6 @@ unreadDot =
; } - const { color } = item.threadInfo; - const colorSplotchStyle = React.useMemo( - () => ({ backgroundColor: `#${color}` }), - [color], - ); - const sidebars = item.sidebars.map((sidebarItem, index) => { if (sidebarItem.type === 'sidebar') { const { type, ...sidebarInfo } = sidebarItem; @@ -128,13 +124,15 @@ }); const { uiName } = useResolvedThreadInfo(threadInfo); + const avatarInfo = useGetAvatarForThread(threadInfo); + return ( <>
{unreadDot}
-
+
diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css --- a/web/chat/chat-thread-list.css +++ b/web/chat/chat-thread-list.css @@ -89,8 +89,7 @@ padding-top: 8px; } -div.spacer, -div.colorSplotch { +div.spacer { width: 42px; border-radius: 1.68px; } diff --git a/web/chat/thread-top-bar.css b/web/chat/thread-top-bar.css --- a/web/chat/thread-top-bar.css +++ b/web/chat/thread-top-bar.css @@ -16,13 +16,6 @@ overflow: hidden; } -div.threadColorSquare { - width: 24px; - height: 24px; - border-radius: 4px; - flex: 0 0 auto; -} - .threadTitle { font-size: var(--m-font-16); font-weight: var(--bold); diff --git a/web/chat/thread-top-bar.react.js b/web/chat/thread-top-bar.react.js --- a/web/chat/thread-top-bar.react.js +++ b/web/chat/thread-top-bar.react.js @@ -2,24 +2,20 @@ import * as React from 'react'; +import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js'; import { threadIsPending } from 'lib/shared/thread-utils.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js'; import ThreadMenu from './thread-menu.react.js'; import css from './thread-top-bar.css'; +import Avatar from '../components/avatar.react.js'; type ThreadTopBarProps = { +threadInfo: ThreadInfo, }; function ThreadTopBar(props: ThreadTopBarProps): React.Node { const { threadInfo } = props; - const threadBackgroundColorStyle = React.useMemo( - () => ({ - background: `#${threadInfo.color}`, - }), - [threadInfo.color], - ); let threadMenu = null; if (!threadIsPending(threadInfo.id)) { @@ -27,13 +23,12 @@ } const { uiName } = useResolvedThreadInfo(threadInfo); + const avatarInfo = useGetAvatarForThread(threadInfo); + return (
-
+
{uiName}
{threadMenu} diff --git a/web/navigation-panels/nav-state-info-bar.css b/web/navigation-panels/nav-state-info-bar.css --- a/web/navigation-panels/nav-state-info-bar.css +++ b/web/navigation-panels/nav-state-info-bar.css @@ -7,11 +7,7 @@ overflow: hidden; } -div.threadColorSquare { - width: 24px; - height: 24px; - border-radius: 4px; - flex: 0 0 auto; +div.avatarContainer { margin: 0 12px 0 16px; } diff --git a/web/navigation-panels/nav-state-info-bar.react.js b/web/navigation-panels/nav-state-info-bar.react.js --- a/web/navigation-panels/nav-state-info-bar.react.js +++ b/web/navigation-panels/nav-state-info-bar.react.js @@ -3,10 +3,12 @@ import classnames from 'classnames'; import * as React from 'react'; +import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; import ThreadAncestors from './chat-thread-ancestors.react.js'; import css from './nav-state-info-bar.css'; +import Avatar from '../components/avatar.react.js'; type NavStateInfoBarProps = { +threadInfo: ThreadInfo, @@ -14,19 +16,13 @@ function NavStateInfoBar(props: NavStateInfoBarProps): React.Node { const { threadInfo } = props; - const threadBackgroundColorStyle = React.useMemo( - () => ({ - background: `#${threadInfo.color}`, - }), - [threadInfo.color], - ); + const avatarInfo = useGetAvatarForThread(threadInfo); return ( <> -
+
+ +
);