diff --git a/src/components/common/PeerColorWrapper.module.scss b/src/components/common/PeerColorWrapper.module.scss index 0f4334267..97398ace9 100644 --- a/src/components/common/PeerColorWrapper.module.scss +++ b/src/components/common/PeerColorWrapper.module.scss @@ -10,6 +10,8 @@ background-color: var(--accent-background-color); color: var(--accent-color); + --peer-color-wrapper-bar-color: var(--bar-gradient, var(--accent-color)); + &::before { content: ""; display: block; @@ -18,6 +20,6 @@ bottom: 0; inset-inline-start: 0; width: 0.1875rem; - background: var(--bar-gradient, var(--accent-color)); + background: var(--peer-color-wrapper-bar-color); } } diff --git a/src/components/common/PeerColorWrapper.tsx b/src/components/common/PeerColorWrapper.tsx index 4515803f8..02ba2b233 100644 --- a/src/components/common/PeerColorWrapper.tsx +++ b/src/components/common/PeerColorWrapper.tsx @@ -10,25 +10,29 @@ import EmojiIconBackground from './embedded/EmojiIconBackground'; import styles from './PeerColorWrapper.module.scss'; interface OwnProps extends React.HTMLAttributes { + ref?: React.RefObject; peer?: ApiPeer; peerColor?: ApiPeerColor; noUserColors?: boolean; - shoudReset?: boolean; + shouldReset?: boolean; className?: string; emojiIconClassName?: string; children: React.ReactNode; } function PeerColorWrapper({ - peer, peerColor, noUserColors, shoudReset, className, emojiIconClassName, children, ...otherProps + peer, ref, peerColor, noUserColors, + shouldReset, className, emojiIconClassName, + children, ...otherProps }: OwnProps) { const color = peerColor || peer?.color; return (
= ({ text, language, noCopy }) => { ); return ( -
+ {language && (

{getPrettyCodeLanguageName(language)}

)}
         {highlighted ?? text}
@@ -48,7 +51,7 @@ const CodeBlock: FC = ({ text, language, noCopy }) => {
           noCopy={noCopy}
         />
       
-
+ ); }; diff --git a/src/components/common/embedded/EmbeddedMessage.scss b/src/components/common/embedded/EmbeddedMessage.scss index c215d19c5..6cd6a21a3 100644 --- a/src/components/common/embedded/EmbeddedMessage.scss +++ b/src/components/common/embedded/EmbeddedMessage.scss @@ -5,13 +5,14 @@ .EmbeddedMessage { --hover-opacity: 0; --hover-background-color: white; + color: var(--color-text); display: flex; align-items: center; font-size: calc(var(--message-text-size, 1rem) - 0.125rem); line-height: 1.125rem; margin-bottom: 0.0625rem; - padding: 0.1875rem 0.375rem 0.1875rem 0.1875rem; + padding-block: 0.1875rem; border-radius: var(--border-radius-messages-small); position: relative; overflow: hidden; @@ -61,6 +62,7 @@ } .custom-shape & { + --peer-color-wrapper-bar-color: var(--accent-color); --accent-color: white; max-width: 15rem; margin: 0; @@ -73,21 +75,6 @@ } } - &::before { - content: ""; - display: block; - position: absolute; - top: 0; - bottom: 0; - inset-inline-start: 0; - width: 3px; - background: var(--bar-gradient, var(--accent-color)); - - .custom-shape & { - background: var(--accent-color); - } - } - &.is-quote { .message-title { padding-inline-end: 0.75rem; @@ -111,12 +98,13 @@ } &.with-thumb { + padding-inline-start: 0.5rem; .message-title { - padding-inline-start: 2.25rem; + padding-inline-start: 2.375rem; } .embedded-text-wrapper { - text-indent: 2.25rem; + text-indent: 2.375rem; } } @@ -137,7 +125,6 @@ .message-text { overflow: hidden; - margin-inline-start: 0.5rem; display: flex; flex-direction: column-reverse; @@ -201,11 +188,9 @@ .embedded-thumb { position: absolute; top: 0.375rem; - inset-inline-start: 0.375rem; width: 2rem; height: 2rem; border-radius: 0.25rem; - margin-left: 0.25rem; flex-shrink: 0; overflow: hidden; @@ -226,12 +211,7 @@ margin: 0; border-radius: 0.25rem; - .embedded-thumb { - margin-left: 0.125rem; - } - .message-text { - margin-inline-start: 0.375rem; flex-grow: 1; } diff --git a/src/components/common/embedded/EmbeddedMessage.tsx b/src/components/common/embedded/EmbeddedMessage.tsx index 76493739e..5c6df6eff 100644 --- a/src/components/common/embedded/EmbeddedMessage.tsx +++ b/src/components/common/embedded/EmbeddedMessage.tsx @@ -25,7 +25,6 @@ import { getMediaContentTypeDescription } from '../../../global/helpers/messageS import buildClassName from '../../../util/buildClassName'; import freezeWhenClosed from '../../../util/hoc/freezeWhenClosed'; import { getPictogramDimensions } from '../helpers/mediaDimensions'; -import { getPeerColorClass } from '../helpers/peerColor'; import renderText from '../helpers/renderText'; import { renderTextWithEntities } from '../helpers/renderTextWithEntities'; @@ -41,7 +40,7 @@ import RippleEffect from '../../ui/RippleEffect'; import Icon from '../icons/Icon'; import MediaSpoiler from '../MediaSpoiler'; import MessageSummary from '../MessageSummary'; -import EmojiIconBackground from './EmojiIconBackground'; +import PeerColorWrapper from '../PeerColorWrapper'; import './EmbeddedMessage.scss'; @@ -223,12 +222,15 @@ const EmbeddedMessage: FC = ({ } return ( -
= ({ {mediaThumbnail && renderPictogram( mediaThumbnail, mediaBlobUrl, isVideoThumbnail, isRoundVideo, isProtected, isSpoiler, )} - {sender?.color?.backgroundEmojiId && ( - - )}

{renderTextContent()} @@ -261,7 +257,7 @@ const EmbeddedMessage: FC = ({ )}

-
+ ); }; diff --git a/src/components/common/embedded/EmbeddedStory.tsx b/src/components/common/embedded/EmbeddedStory.tsx index 8d5a532ad..f45941fec 100644 --- a/src/components/common/embedded/EmbeddedStory.tsx +++ b/src/components/common/embedded/EmbeddedStory.tsx @@ -11,7 +11,6 @@ import { } from '../../../global/helpers'; import buildClassName from '../../../util/buildClassName'; import { getPictogramDimensions } from '../helpers/mediaDimensions'; -import { getPeerColorClass } from '../helpers/peerColor'; import renderText from '../helpers/renderText'; import { useFastClick } from '../../../hooks/useFastClick'; @@ -21,6 +20,7 @@ import useMedia from '../../../hooks/useMedia'; import useOldLang from '../../../hooks/useOldLang'; import Icon from '../icons/Icon'; +import PeerColorWrapper from '../PeerColorWrapper'; import './EmbeddedMessage.scss'; @@ -73,11 +73,13 @@ const EmbeddedStory: FC = ({ const { handleClick, handleMouseDown } = useFastClick(handleFastClick); return ( -
= ({

{renderText(senderTitle || NBSP)}
- + ); }; diff --git a/src/components/common/embedded/EmbeddedStoryForward.tsx b/src/components/common/embedded/EmbeddedStoryForward.tsx index 4bc008bac..4f6f3a9be 100644 --- a/src/components/common/embedded/EmbeddedStoryForward.tsx +++ b/src/components/common/embedded/EmbeddedStoryForward.tsx @@ -24,6 +24,7 @@ import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; import Icon from '../icons/Icon'; +import PeerColorWrapper from '../PeerColorWrapper'; import EmojiIconBackground from './EmojiIconBackground'; import './EmbeddedMessage.scss'; @@ -108,7 +109,7 @@ const EmbeddedStoryForward: FC = ({ } return ( -
= ({ {renderSender()}
- + ); }; diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss index 83e062fa5..6d8633c32 100644 --- a/src/components/middle/message/_message-content.scss +++ b/src/components/middle/message/_message-content.scss @@ -699,8 +699,8 @@ &.has-subheader .media-inner, &.has-subheader .Album, &.force-sender-name .Album, - &.is-forwarded .media-inner, - &.is-forwarded .Album, + &.is-forwarded:not(.is-inverted-media) .media-inner, + &.is-forwarded:not(.is-inverted-media) .Album, .message-title ~ .media-inner { margin-top: 0.25rem; margin-bottom: -0.375rem; diff --git a/src/components/middle/message/reactions/Reactions.scss b/src/components/middle/message/reactions/Reactions.scss index 234ff4ba7..9ff0c0dcf 100644 --- a/src/components/middle/message/reactions/Reactions.scss +++ b/src/components/middle/message/reactions/Reactions.scss @@ -13,6 +13,11 @@ margin-top: 0.25rem; } + .is-forwarded.is-inverted-media & { + margin-top: 0.5rem; + margin-bottom: 0.125rem; + } + &.is-service { justify-content: center; max-width: 19rem;