Page MenuHomePhabricator
Files F3522765

D7210.id24629.diff
No OneTemporary
Actions

D7210.id24629.diff
View Options

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
@@ -17,6 +17,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 ThreadAvatar from '../components/thread-avatar.react.js';
import { useSelector } from '../redux/redux-utils.js';
import {
useOnClickThread,
@@ -82,12 +83,6 @@
unreadDot = <div className={css.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 +123,14 @@
});
const { uiName } = useResolvedThreadInfo(threadInfo);
+
return (
<>
<a className={containerClassName} onClick={selectItemIfNotActiveCreation}>
<div className={css.colorContainer}>
<div className={css.colorSplotchContainer}>
<div className={css.dotContainer}>{unreadDot}</div>
- <div className={css.colorSplotch} style={colorSplotchStyle} />
+ <ThreadAvatar size="large" threadInfo={threadInfo} />
</div>
</div>
<div className={css.threadButton}>
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
@@ -8,18 +8,13 @@
import ThreadMenu from './thread-menu.react.js';
import css from './thread-top-bar.css';
+import ThreadAvatar from '../components/thread-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 +22,11 @@
}
const { uiName } = useResolvedThreadInfo(threadInfo);
+
return (
<div className={css.topBarContainer}>
<div className={css.topBarThreadInfo}>
- <div
- className={css.threadColorSquare}
- style={threadBackgroundColorStyle}
- />
+ <ThreadAvatar size="small" threadInfo={threadInfo} />
<div className={css.threadTitle}>{uiName}</div>
</div>
{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
@@ -7,6 +7,7 @@
import ThreadAncestors from './chat-thread-ancestors.react.js';
import css from './nav-state-info-bar.css';
+import ThreadAvatar from '../components/thread-avatar.react.js';
type NavStateInfoBarProps = {
+threadInfo: ThreadInfo,
@@ -14,19 +15,11 @@
function NavStateInfoBar(props: NavStateInfoBarProps): React.Node {
const { threadInfo } = props;
- const threadBackgroundColorStyle = React.useMemo(
- () => ({
- background: `#${threadInfo.color}`,
- }),
- [threadInfo.color],
- );
-
return (
<>
- <div
- className={css.threadColorSquare}
- style={threadBackgroundColorStyle}
- />
+ <div className={css.avatarContainer}>
+ <ThreadAvatar size="small" threadInfo={threadInfo} />
+ </div>
<ThreadAncestors threadInfo={threadInfo} />
</>
);

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 24, 7:35 AM (19 h, 23 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2698230
Default Alt Text
D7210.id24629.diff (4 KB)

Event Timeline