diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 3fd5ceafe..a171b06c1 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -2228,7 +2228,6 @@ flex-shrink: 0; height: 52px; width: 100%; - padding: 8px; justify-content: center; display: inline-flex; @@ -2240,6 +2239,29 @@ .module-caption-editor__input-container { display: flex; + + .session-input-with-label-container { + @include themify($themes) { + color: themed('textColor'); + background-color: themed('inputBackground'); + } + border-radius: 100px; + @include themify($themes) { + padding: $session-margin-sm; + } + label.session-input-with-label-container.filled { + visibility: hidden; + } + + hr { + visibility: hidden; + } + } + + .session-button { + height: 90%; + padding: 10px; + } } .module-caption-editor { @@ -2252,24 +2274,10 @@ height: 36px; font-size: 14px; - @include themify($themes) { - color: themed('textColor'); - border: 1px solid themed('textColor'); - background-color: themed('inputBackground'); - } border-radius: 18px; padding: 9px; padding-inline-start: 12px; padding-inline-end: 65px; - - &::placeholder { - color: $color-white-07; - @include themify($themes) { - color: subtle(themed('textColor')); - border: 1px solid themed('textColor'); - background-color: themed('inputBackground'); - } - } } // Module: Staged Placeholder Attachment diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index fc8a22eac..ee3e54b6e 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -150,7 +150,7 @@ align-items: center; height: 100%; width: 100%; - z-index: 10; + z-index: 1; background-color: inherit; display: none; padding: 20px; diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index 0dcae69a5..d18e3614b 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -760,20 +760,6 @@ background-color: $color-black; } - .module-caption-editor__caption-input { - border: 1px solid $color-white; - color: $color-white; - background-color: $color-black; - - &::placeholder { - color: $color-white-07; - } - &:focus { - border: 1px solid $color-loki-green; - outline: none; - } - } - // Module: Search Results .module-search-results__conversations-header { diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx index 2f1b0157a..cb807604d 100644 --- a/ts/components/conversation/ConversationHeader.tsx +++ b/ts/components/conversation/ConversationHeader.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { Avatar } from '../Avatar'; -import { LocalizerType } from '../../types/Util'; import { SessionIconButton, @@ -92,12 +91,10 @@ interface Props { } class ConversationHeader extends React.Component { - public onAvatarClickBound: (userPubKey: string) => void; - public constructor(props: Props) { super(props); - this.onAvatarClickBound = this.onAvatarClick.bind(this); + this.onAvatarClick = this.onAvatarClick.bind(this); } public renderBackButton() { @@ -190,7 +187,7 @@ class ConversationHeader extends React.Component { name={userName} size={36} onAvatarClick={() => { - this.onAvatarClickBound(phoneNumber); + this.onAvatarClick(phoneNumber); }} memberAvatars={memberAvatars} pubkey={phoneNumber} @@ -287,7 +284,8 @@ class ConversationHeader extends React.Component { } public onAvatarClick(userPubKey: string) { - if (this.props.onAvatarClick) { + // do not allow right panel to appear if another button is shown on the SessionConversation + if (this.props.onAvatarClick && !this.props.showBackButton) { this.props.onAvatarClick(userPubKey); } } diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx index e874aa75b..4a994132e 100644 --- a/ts/components/session/conversation/SessionCompositionBox.tsx +++ b/ts/components/session/conversation/SessionCompositionBox.tsx @@ -117,6 +117,7 @@ const getDefaultState = () => { showEmojiPanel: false, ignoredLink: undefined, stagedLinkPreview: undefined, + showCaptionEditor: undefined, }; }; @@ -595,7 +596,7 @@ export class SessionCompositionBox extends React.Component { }); }) .catch(err => { - console.warn('fetch link preview: ', err); + window.log.warn('fetch link preview: ', err); abortController.abort(); this.setState({ stagedLinkPreview: { diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx index f33535191..38d45ce16 100644 --- a/ts/components/session/conversation/SessionConversation.tsx +++ b/ts/components/session/conversation/SessionConversation.tsx @@ -216,6 +216,7 @@ export class SessionConversation extends React.Component { stagedAttachments: [], isDraggingFile: false, messageDetailShowProps: undefined, + quotedMessageProps: undefined, }); } } @@ -835,7 +836,11 @@ export class SessionConversation extends React.Component { this.deleteMessage(id); this.setState({ messageDetailShowProps: undefined }); }; - this.setState({ messageDetailShowProps: messageProps }); + + this.setState({ + messageDetailShowProps: messageProps, + showOptionsPane: false, + }); } private onClickAttachment(attachment: any, message: any) {