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
@@ -1,11 +1,9 @@
div.topBarContainer {
display: flex;
- background-color: var(--bg);
align-items: center;
justify-content: space-between;
padding: 16px;
- color: var(--thread-top-bar-color);
- border-bottom: 1px solid var(--border);
+ color: var(--text-background-primary-default);
}
div.topBarThreadInfo {
@@ -25,7 +23,7 @@
}
.searchButtonIcon {
- color: var(--thread-top-bar-search-button-color);
+ color: var(--button-label-tertiary-default);
}
.buttons {
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,13 +8,13 @@
import type { ThreadInfo } from 'lib/types/thread-types.js';
import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
-import PinnedMessagesBanner from './pinned-messages-banner.react.js';
import ThreadMenu from './thread-menu.react.js';
import css from './thread-top-bar.css';
import ThreadAvatar from '../avatars/thread-avatar.react.js';
import Button from '../components/button.react.js';
import { InputStateContext } from '../input/input-state.js';
import MessageSearchModal from '../modals/search/message-search-modal.react.js';
+import { useInfosForPendingThread } from '../utils/thread-utils.js';
type ThreadTopBarProps = {
+threadInfo: ThreadInfo,
@@ -42,27 +42,41 @@
const { uiName } = useResolvedThreadInfo(threadInfo);
- return (
- <>
-
-
-
-
- {threadMenu}
-
+ const { isChatCreation, selectedUserInfos } = useInfosForPendingThread();
+
+ const threadTopBarButtons = React.useMemo(() => {
+ if (isChatCreation && selectedUserInfos.length === 0) {
+ return null;
+ }
+ return (
+
+
+ {threadMenu}
-
- >
- );
+ );
+ }, [isChatCreation, onClickSearch, selectedUserInfos, threadMenu]);
+
+ const threadTopBar = React.useMemo(() => {
+ return (
+ <>
+
+
+ {threadTopBarButtons}
+
+ >
+ );
+ }, [threadInfo, threadTopBarButtons, uiName]);
+
+ return threadTopBar;
}
export default ThreadTopBar;
diff --git a/web/community-header/community-header-button.css b/web/community-header/community-header-button.css
--- a/web/community-header/community-header-button.css
+++ b/web/community-header/community-header-button.css
@@ -4,7 +4,7 @@
.addButton {
background-color: var(--button-background-tertiary-default);
- color: var(--button-label-tertiary-default);
+ color: var(--button-label-secondary-default);
border-radius: 8px;
padding: 6px 10px;
}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -282,7 +282,7 @@
--button-border-outline-default: var(--shades-black-50);
--button-label-primary-default: var(--shades-white-100);
--button-label-secondary-default: var(--shades-white-60);
- --button-label-tertiary-default: var(--shades-white-60);
+ --button-label-tertiary-default: var(--shades-black-50);
--button-label-primary-hover: var(--shades-white-90);
--button-label-primary-disabled: var(--shades-black-50);
--button-label-tertiary-hover: var(--shades-white-80);
@@ -383,7 +383,7 @@
--button-border-outline-default: var(--shades-black-50);
--button-label-primary-default: var(--shades-white-100);
--button-label-secondary-default: var(--shades-white-90);
- --button-label-tertiary-default: var(--shades-white-90);
+ --button-label-tertiary-default: var(--shades-black-60);
--button-label-primary-hover: var(--shades-white-90);
--button-label-primary-disabled: var(--shades-black-50);
--button-label-tertiary-hover: var(--shades-white-80);