Peer Color Wrapper: Reuse in specific message type (#5640)

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);
   }
 }

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<HTMLDivElement> {
+  ref?: React.RefObject<HTMLDivElement>;
   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 (
     <div
+      ref={ref}
       className={buildClassName(
         styles.root,
-        peer && getPeerColorClass(peer, noUserColors, shoudReset),
+        peer && getPeerColorClass(peer, noUserColors, shouldReset),
         peerColor && getApiPeerColorClass(peerColor),
         className,
       )}

src/components/common/code/CodeBlock.scss

@@ -1,23 +1,13 @@
 .CodeBlock {
   background-color: var(--color-code-bg);
+  color: var(--color-text);
   margin: 0;
-  padding: 0.1875rem 0.375rem 0.1875rem 0.6875rem;
+  padding-block: 0.1875rem;
   margin-block: 0.25rem;
   border-radius: 0.25rem;
   position: relative;
   overflow: hidden;
 
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    inset-inline-start: 0;
-    bottom: 0;
-    width: 0.1875rem;
-    background: var(--bar-gradient, var(--accent-color));
-  }
-
   .code-title {
     white-space: nowrap;
     overflow: hidden;

src/components/common/code/CodeBlock.tsx

@@ -8,6 +8,7 @@ import { getPrettyCodeLanguageName } from '../../../util/prettyCodeLanguageNames
 
 import useAsync from '../../../hooks/useAsync';
 
+import PeerColorWrapper from '../PeerColorWrapper';
 import CodeOverlay from './CodeOverlay';
 
 import './CodeBlock.scss';
@@ -37,7 +38,9 @@ const CodeBlock: FC<OwnProps> = ({ text, language, noCopy }) => {
   );
 
   return (
-    <div className="CodeBlock">
+    <PeerColorWrapper
+      className="CodeBlock"
+    >
       {language && (<p className="code-title">{getPrettyCodeLanguageName(language)}</p>)}
       <pre className={blockClass} data-entity-type={ApiMessageEntityTypes.Pre} data-language={language}>
         {highlighted ?? text}
@@ -48,7 +51,7 @@ const CodeBlock: FC<OwnProps> = ({ text, language, noCopy }) => {
           noCopy={noCopy}
         />
       </pre>
-    </div>
+    </PeerColorWrapper>
   );
 };
 

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;
     }
 

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<OwnProps> = ({
   }
 
   return (
-    <div
+    <PeerColorWrapper
+      peer={sender}
+      emojiIconClassName=' className="EmbeddedMessage--background-icons"'
       ref={ref}
+      shouldReset
+      noUserColors={noUserColors}
       className={buildClassName(
         'EmbeddedMessage',
         className,
-        getPeerColorClass(sender, noUserColors, true),
         isQuote && 'is-quote',
         mediaThumbnail && 'with-thumb',
       )}
@@ -241,12 +243,6 @@ const EmbeddedMessage: FC<OwnProps> = ({
       {mediaThumbnail && renderPictogram(
         mediaThumbnail, mediaBlobUrl, isVideoThumbnail, isRoundVideo, isProtected, isSpoiler,
       )}
-      {sender?.color?.backgroundEmojiId && (
-        <EmojiIconBackground
-          emojiDocumentId={sender.color.backgroundEmojiId}
-          className="EmbeddedMessage--background-icons"
-        />
-      )}
       <div className="message-text">
         <p className={buildClassName('embedded-text-wrapper', isQuote && 'multiline')}>
           {renderTextContent()}
@@ -261,7 +257,7 @@ const EmbeddedMessage: FC<OwnProps> = ({
           )}
         </div>
       </div>
-    </div>
+    </PeerColorWrapper>
   );
 };
 

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<OwnProps> = ({
   const { handleClick, handleMouseDown } = useFastClick(handleFastClick);
 
   return (
-    <div
+    <PeerColorWrapper
       ref={ref}
+      peerColor={sender?.color}
+      noUserColors={noUserColors}
+      shouldReset
       className={buildClassName(
         'EmbeddedMessage',
-        getPeerColorClass(sender, noUserColors, true),
         pictogramUrl && 'with-thumb',
       )}
       onClick={handleClick}
@@ -96,7 +98,7 @@ const EmbeddedStory: FC<OwnProps> = ({
         </p>
         <div className="message-title">{renderText(senderTitle || NBSP)}</div>
       </div>
-    </div>
+    </PeerColorWrapper>
   );
 };
 

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<OwnProps & StateProps> = ({
   }
 
   return (
-    <div
+    <PeerColorWrapper
       ref={ref}
       className={buildClassName(
         'EmbeddedMessage',
@@ -131,7 +132,7 @@ const EmbeddedStoryForward: FC<OwnProps & StateProps> = ({
           {renderSender()}
         </div>
       </div>
-    </div>
+    </PeerColorWrapper>
   );
 };
 

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:not(.is-inverted-media) .media-inner,
-  &.is-forwarded .Album,
+  &.is-forwarded:not(.is-inverted-media) .Album,
   .message-title ~ .media-inner {
     margin-top: 0.25rem;
     margin-bottom: -0.375rem;

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;