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 ( - <> -
-
- -
{uiName}
-
-
- - {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 ( + <> +
+
+ +
{uiName}
+
+ {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);