diff --git a/web/chat/chat-message-list.react.js b/web/chat/chat-message-list.react.js --- a/web/chat/chat-message-list.react.js +++ b/web/chat/chat-message-list.react.js @@ -45,6 +45,7 @@ MessagePositionInfo, } from './position-types'; import RelationshipPrompt from './relationship-prompt/relationship-prompt'; +import ThreadTopBar from './thread-top-bar.react'; type BaseProps = { +setModal: (modal: ?React.Node) => void, @@ -284,6 +285,7 @@ }); return connectDropTarget(
+
{relationshipPrompt}
diff --git a/web/chat/thread-top-bar.css b/web/chat/thread-top-bar.css new file mode 100644 --- /dev/null +++ b/web/chat/thread-top-bar.css @@ -0,0 +1,34 @@ +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); +} + +div.topBarThreadInfo { + height: 24px; + display: flex; + align-items: center; + column-gap: 8px; +} + +div.threadColorSquare { + width: 24px; + height: 24px; + border-radius: 4px; +} + +p.threadTitle { + font-size: var(--m-font-16); + font-weight: var(--bold); +} + +button.topBarMenu { + background-color: transparent; + border: none; + cursor: pointer; + color: var(--thread-top-bar-menu-color); +} diff --git a/web/chat/thread-top-bar.react.js b/web/chat/thread-top-bar.react.js new file mode 100644 --- /dev/null +++ b/web/chat/thread-top-bar.react.js @@ -0,0 +1,38 @@ +// @flow + +import * as React from 'react'; + +import type { ThreadInfo } from 'lib/types/thread-types'; + +import SWMansionIcon from '../SWMansionIcon.react'; +import css from './thread-top-bar.css'; + +type threadTopBarProps = { + +threadInfo: ThreadInfo, +}; +function ThreadTopBar(props: threadTopBarProps): React.Node { + const { threadInfo } = props; + const threadBackgroundColorStyle = React.useMemo( + () => ({ + background: `#${threadInfo.color}`, + }), + [threadInfo.color], + ); + + return ( +
+
+
+

{threadInfo.uiName}

+
+ +
+ ); +} + +export default ThreadTopBar; diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -95,4 +95,6 @@ --disconnected-bar-alert-color: var(--shades-white-100); --disconnected-bar-connecting-bg: var(--shades-white-70); --disconnected-bar-connecting-color: var(--shades-black-100); + --thread-top-bar-color: var(--shades-white-100); + --thread-top-bar-menu-color: var(--shades-white-70); }