refactor(redesign-chat-header): update positioning and styles of mess…

…enger chat header (#2260)
zer0-os · Sep 12, 2024 · d1bf6b9 · d1bf6b9
1 parent 37c65b1
commit d1bf6b9
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 26 deletions.
diff --git a/src/apps/messenger/Main.module.scss b/src/apps/messenger/Main.module.scss
@@ -2,16 +2,7 @@
  position: relative;
  display: flex;
  width: 100%;
- gap: 8px;
-}
-
-.Header {
- left: 0;
- pointer-events: all !important;
- position: absolute;
- top: 16px;
- width: calc(100% - 16px) !important;
- z-index: 1000;
+ gap: 45px;
 }
 
 .Actions {

diff --git a/src/apps/messenger/Main.tsx b/src/apps/messenger/Main.tsx
@@ -10,7 +10,6 @@ import { DevPanelContainer } from '../../components/dev-panel/container';
 import { FeatureFlag } from '../../components/feature-flag';
 
 import styles from './Main.module.scss';
-import { ConversationHeaderContainer as ConversationHeader } from '../../components/messenger/conversation-header/container';
 import { denormalize } from '../../store/channels';
 import { ConversationActionsContainer as ConversationActions } from '../../components/messenger/conversation-actions/container';
 
@@ -50,8 +49,6 @@ export class Container extends React.Component<Properties> {
  <Sidekick />
 
  <div className={styles.Split}>
- {!this.props.isSocialChannel && <ConversationHeader className={styles.Header} />}
-
  <ConversationActions className={styles.Actions} />
 
  {this.props.isSocialChannel && !this.props.isJoiningConversation && this.props.isValidConversation && (

diff --git a/src/components/header/index.module.scss b/src/components/header/index.module.scss
@@ -1,17 +1,14 @@
 @use '~@zero-tech/zui/styles/theme' as theme;
 @import '../../glass';
 
-$header-height: 66px;
-
 .Header {
- border-radius: 16px;
  box-sizing: border-box;
  display: flex;
  gap: 8px;
- height: $header-height;
- padding: 16px;
+ padding: 12px 18px;
  width: 100%;
- @include flat-thick;
+ border-bottom: 1px solid rgba(52, 56, 60, 0.24);
+ backdrop-filter: blur(64px);
 
  .Avatar {
  pointer-events: none;

diff --git a/src/components/messenger/chat/index.tsx b/src/components/messenger/chat/index.tsx
@@ -19,6 +19,7 @@ import { JoiningConversationDialog } from '../../joining-conversation-dialog';
 import { MessageInput } from '../../message-input/container';
 import { searchMentionableUsersForChannel } from '../../../platform-apps/channels/util/api';
 import { Media } from '../../message-input/utils';
+import { ConversationHeaderContainer as ConversationHeader } from '../conversation-header/container';
 
 import './styles.scss';
 import { rawChannelSelector } from '../../../store/channels/saga';
@@ -156,13 +157,17 @@ export class Container extends React.Component<Properties> {
  <div className={classNames('direct-message-chat', 'direct-message-chat--full-screen')}>
  <div className='direct-message-chat__content'>
  {!this.props.isJoiningConversation && (
- <ChatViewContainer
- key={this.props.directMessage.optimisticId || this.props.directMessage.id} // Render new component for a new chat
- channelId={this.props.activeConversationId}
- className='direct-message-chat__channel'
- showSenderAvatar={!this.isOneOnOne()}
- ref={this.chatViewContainerRef}
- />
+ <>
+ {!this.props.directMessage.isSocialChannel && <ConversationHeader />}
+
+ <ChatViewContainer
+ key={this.props.directMessage.optimisticId || this.props.directMessage.id} // Render new component for a new chat
+ channelId={this.props.activeConversationId}
+ className='direct-message-chat__channel'
+ showSenderAvatar={!this.isOneOnOne()}
+ ref={this.chatViewContainerRef}
+ />
+ </>
  )}
 
  <div className='direct-message-chat__footer-position'>