From 98b1302589f7a482b86a605e6e3148bf5061db0e Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Thu, 25 Aug 2022 10:24:57 +1000 Subject: [PATCH] fix: rounded corners around messages looks like node-sass tries to be too clever --- stylesheets/_session.scss | 8 --- stylesheets/_session_theme.scss | 26 --------- stylesheets/_variables.scss | 1 - .../message-content/MessageContent.tsx | 57 +++++++++++++++---- .../MessageContentWithStatus.tsx | 9 ++- .../message-item/GenericReadableMessage.tsx | 2 +- 6 files changed, 54 insertions(+), 49 deletions(-) diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 17051f731..fe23d4724 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -352,14 +352,6 @@ label { border-bottom-right-radius: 5px; } -.module-message__container--outgoing--first-of-series { - border-top-right-radius: $session_message-container-border-radius; -} - -.module-message__container--outgoing--last-of-series { - border-bottom-right-radius: $session_message-container-border-radius; -} - .conversation-header { .module-avatar img { box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.2); diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index bbefc6e32..9bb593b5e 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -40,19 +40,6 @@ background: none; } - border-top-right-radius: $message-container-border-radius; - border-bottom-right-radius: $message-container-border-radius; - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; - - &--first-of-series { - border-top-left-radius: $message-container-border-radius; - } - - &--last-of-series { - border-bottom-left-radius: $message-container-border-radius; - } - .module-message__text { color: var(--color-received-message-text); display: flex; @@ -71,11 +58,6 @@ } &__container--outgoing { - border-top-left-radius: $message-container-border-radius; - border-bottom-left-radius: $message-container-border-radius; - - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; &--opaque { background: var(--color-sent-message-background); } @@ -84,14 +66,6 @@ background: none; } - &--first-of-series { - border-top-right-radius: $message-container-border-radius; - } - - &--last-of-series { - border-bottom-right-radius: $message-container-border-radius; - } - .module-message__text { color: var(--color-sent-message-text); diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss index ce82c3227..16064e7b6 100644 --- a/stylesheets/_variables.scss +++ b/stylesheets/_variables.scss @@ -74,7 +74,6 @@ $header-height: 55px; $button-height: 24px; $border-radius: 5px; -$message-container-border-radius: 16px; $font-size: 14px; $font-size-small: calc(13 / 14) + em; diff --git a/ts/components/conversation/message/message-content/MessageContent.tsx b/ts/components/conversation/message/message-content/MessageContent.tsx index 559cb6602..ac7074e9a 100644 --- a/ts/components/conversation/message/message-content/MessageContent.tsx +++ b/ts/components/conversation/message/message-content/MessageContent.tsx @@ -28,6 +28,7 @@ import { MessagePreview } from './MessagePreview'; import { MessageQuote } from './MessageQuote'; import { MessageText } from './MessageText'; import { ScrollToLoadedMessageContext } from '../../SessionMessagesListContainer'; +import styled, { CSSProperties } from 'styled-components'; export type MessageContentSelectorProps = Pick< MessageRenderingProps, @@ -95,6 +96,37 @@ function onClickOnMessageInnerContainer(event: React.MouseEvent) } } +const StyledMessageContent = styled.div<{ + isOutgoing: boolean; + firstOfSeries: boolean; + lastOfSeries: boolean; +}>` + border-top-right-radius: ${props => + props.isOutgoing + ? props.firstOfSeries + ? 'var(--radius-lg)' + : 'var(--radius-sm)' + : 'var(--radius-lg)'}; + border-bottom-right-radius: ${props => + props.isOutgoing + ? props.lastOfSeries + ? 'var(--radius-lg)' + : 'var(--radius-sm)' + : 'var(--radius-lg)'}; + border-top-left-radius: ${props => + !props.isOutgoing + ? props.firstOfSeries + ? 'var(--radius-lg)' + : 'var(--radius-sm)' + : 'var(--radius-lg)'}; + border-bottom-left-radius: ${props => + !props.isOutgoing + ? props.lastOfSeries + ? 'var(--radius-lg)' + : 'var(--radius-sm)' + : 'var(--radius-lg)'}; +`; + export const IsMessageVisibleContext = createContext(false); export const MessageContent = (props: Props) => { @@ -181,26 +213,29 @@ export const MessageContent = (props: Props) => { const bgShouldBeTransparent = isShowingImage && !hasText && !hasQuote; const toolTipTitle = moment(serverTimestamp || timestamp).format('llll'); + // tslint:disable: use-simple-attributes return ( -
{ ) : null} -
+ ); }; diff --git a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx index a069e5983..46e390525 100644 --- a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx +++ b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx @@ -44,6 +44,11 @@ const StyledMessageContentContainer = styled.div<{ direction: 'left' | 'right' } } `; +const StyledMessageContentWithAuthor = styled.div` + display: flex; + flex-direction: column; +`; + export const MessageContentWithStatuses = (props: Props) => { const contentProps = useSelector(state => getMessageContentWithStatusesSelectorProps(state as any, props.messageId) @@ -122,11 +127,11 @@ export const MessageContentWithStatuses = (props: Props) => { messageId={messageId} isCorrectSide={isIncoming} /> -
+ -
+