diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index dcb3ca23a..d0cf549a3 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -18,28 +18,6 @@ } } -// TODO move this into the right panel as Styled container component -.conversation-item__options-pane { - position: absolute; - height: var(--right-panel-height); - right: 0vw; - - transition: transform 0.3s ease-in-out; - transform: translateX(100%); - will-change: transform; - width: var(--right-panel-width); - z-index: 5; - - background-color: var(--background-primary-color); - border-left: 1px solid var(--border-color); - - &.show { - transform: none; - transition: transform 0.3s ease-in-out; - z-index: 3; - } -} - .conversation-header { .message-selection-overlay { position: absolute; diff --git a/ts/components/conversation/SessionConversation.tsx b/ts/components/conversation/SessionConversation.tsx index 77dfe2865..42981e5e5 100644 --- a/ts/components/conversation/SessionConversation.tsx +++ b/ts/components/conversation/SessionConversation.tsx @@ -57,7 +57,7 @@ import { isAudio } from '../../types/MIME'; import { HTMLDirection } from '../../util/i18n'; import { NoticeBanner } from '../NoticeBanner'; import { SessionSpinner } from '../basic/SessionSpinner'; -import { RightPanel } from './right-panel/RightPanel'; +import { RightPanel, StyledRightPanelContainer } from './right-panel/RightPanel'; const DEFAULT_JPEG_QUALITY = 0.85; @@ -311,14 +311,9 @@ export class SessionConversation extends React.Component { htmlDirection={this.props.htmlDirection} /> -
+ -
+ )} diff --git a/ts/components/conversation/message/message-content/MessageContextMenu.tsx b/ts/components/conversation/message/message-content/MessageContextMenu.tsx index f12aad99d..044184561 100644 --- a/ts/components/conversation/message/message-content/MessageContextMenu.tsx +++ b/ts/components/conversation/message/message-content/MessageContextMenu.tsx @@ -378,8 +378,8 @@ export const MessageContextMenu = (props: Props) => { {window.i18n('replyToMessage')} )} { - await showMessageInfoOverlay({ messageId, dispatch }); + onClick={() => { + void showMessageInfoOverlay({ messageId, dispatch }); }} > {window.i18n('moreInformation')} diff --git a/ts/components/conversation/right-panel/RightPanel.tsx b/ts/components/conversation/right-panel/RightPanel.tsx index 4173b37da..e164c0fb2 100644 --- a/ts/components/conversation/right-panel/RightPanel.tsx +++ b/ts/components/conversation/right-panel/RightPanel.tsx @@ -7,6 +7,27 @@ import { OverlayRightPanelSettings } from './overlay/OverlayRightPanelSettings'; import { OverlayDisappearingMessages } from './overlay/disappearing-messages/OverlayDisappearingMessages'; import { OverlayMessageInfo } from './overlay/message-info/OverlayMessageInfo'; +export const StyledRightPanelContainer = styled.div` + position: absolute; + height: var(--right-panel-height); + right: 0vw; + + transition: transform 0.3s ease-in-out; + transform: translateX(100%); + will-change: transform; + width: var(--right-panel-width); + z-index: 5; + + background-color: var(--background-primary-color); + border-left: 1px solid var(--border-color); + + &.show { + transform: none; + transition: transform 0.3s ease-in-out; + z-index: 3; + } +`; + const StyledRightPanel = styled(Flex)` h2 { word-break: break-word; diff --git a/ts/components/conversation/right-panel/overlay/message-info/components/MessageFrom.tsx b/ts/components/conversation/right-panel/overlay/message-info/components/MessageFrom.tsx index 74a944df4..61db093c5 100644 --- a/ts/components/conversation/right-panel/overlay/message-info/components/MessageFrom.tsx +++ b/ts/components/conversation/right-panel/overlay/message-info/components/MessageFrom.tsx @@ -10,6 +10,7 @@ const StyledFromContainer = styled.div` align-items: center; padding: var(--margins-xs) var(--margins-xs) var(--margins-xs) 0; `; + const StyledAuthorNamesContainer = styled.div` display: flex; flex-direction: column; @@ -18,6 +19,7 @@ const StyledAuthorNamesContainer = styled.div` const Name = styled.span` font-weight: bold; `; + const Pubkey = styled.span` font-family: var(--font-mono); font-size: var(--font-size-md);