improve caption editor, and disable right panel if messagedetails shown

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

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;

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 {

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<Props> {
-  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<Props> {
           name={userName}
           size={36}
           onAvatarClick={() => {
-            this.onAvatarClickBound(phoneNumber);
+            this.onAvatarClick(phoneNumber);
           }}
           memberAvatars={memberAvatars}
           pubkey={phoneNumber}
@@ -287,7 +284,8 @@ class ConversationHeader extends React.Component<Props> {
   }
 
   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);
     }
   }

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<Props, State> {
         });
       })
       .catch(err => {
-        console.warn('fetch link preview: ', err);
+        window.log.warn('fetch link preview: ', err);
         abortController.abort();
         this.setState({
           stagedLinkPreview: {

ts/components/session/conversation/SessionConversation.tsx

@@ -216,6 +216,7 @@ export class SessionConversation extends React.Component<Props, State> {
         stagedAttachments: [],
         isDraggingFile: false,
         messageDetailShowProps: undefined,
+        quotedMessageProps: undefined,
       });
     }
   }
@@ -835,7 +836,11 @@ export class SessionConversation extends React.Component<Props, State> {
       this.deleteMessage(id);
       this.setState({ messageDetailShowProps: undefined });
     };
-    this.setState({ messageDetailShowProps: messageProps });
+
+    this.setState({
+      messageDetailShowProps: messageProps,
+      showOptionsPane: false,
+    });
   }
 
   private onClickAttachment(attachment: any, message: any) {