WebPage: Show user background icon (#4128)

src/components/middle/message/Message.tsx

@@ -1204,7 +1204,7 @@ const Message: FC<OwnProps & StateProps> = ({
             theme={theme}
             story={webPageStory}
             isConnected={isConnected}
-            noUserColors={isOwn}
+            backgroundEmojiId={sender?.color?.backgroundEmojiId}
             onMediaClick={handleMediaClick}
             onCancelMediaTransfer={handleCancelUpload}
           />

src/components/middle/message/WebPage.scss

@@ -59,10 +59,16 @@
     }
   }
 
+  &--background-icons {
+    color: var(--accent-color);
+  }
+
   &-text {
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
     align-items: flex-start;
+    position: relative;
   }
 
   .media-inner {

src/components/middle/message/WebPage.tsx

@@ -18,6 +18,7 @@ import useEnsureStory from '../../../hooks/useEnsureStory';
 import useLang from '../../../hooks/useLang';
 import useLastCallback from '../../../hooks/useLastCallback';
 
+import EmojiIconBackground from '../../common/embedded/EmojiIconBackground';
 import SafeLink from '../../common/SafeLink';
 import Button from '../../ui/Button';
 import BaseStory from './BaseStory';
@@ -40,7 +41,7 @@ type OwnProps = {
   isDownloading?: boolean;
   isProtected?: boolean;
   isConnected?: boolean;
-  noUserColors?: boolean;
+  backgroundEmojiId?: string;
   theme: ISettings['theme'];
   story?: ApiTypeStory;
   onMediaClick?: () => void;
@@ -60,6 +61,7 @@ const WebPage: FC<OwnProps> = ({
   isConnected,
   story,
   theme,
+  backgroundEmojiId,
   onMediaClick,
   onCancelMediaTransfer,
 }) => {
@@ -162,6 +164,12 @@ const WebPage: FC<OwnProps> = ({
         )}
         {isArticle && (
           <div className="WebPage-text">
+            {backgroundEmojiId && (
+              <EmojiIconBackground
+                emojiDocumentId={backgroundEmojiId}
+                className="WebPage--background-icons"
+              />
+            )}
             <SafeLink className="site-name" url={url} text={siteName || displayUrl} />
             {!inPreview && title && (
               <p className="site-title">{renderText(title)}</p>