From 1f029966ae4796ea72ef9b97ba67b1ddad8e1350 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 12 Jan 2024 12:59:57 +0100
Subject: [PATCH] WebPage: Show user background icon (#4128)

---
 src/components/middle/message/Message.tsx  |  2 +-
 src/components/middle/message/WebPage.scss |  6 ++++++
 src/components/middle/message/WebPage.tsx  | 10 +++++++++-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx
index 59607c2a5..de860d127 100644
--- a/src/components/middle/message/Message.tsx
+++ b/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}
           />
diff --git a/src/components/middle/message/WebPage.scss b/src/components/middle/message/WebPage.scss
index b8f25c67a..0cd76b077 100644
--- a/src/components/middle/message/WebPage.scss
+++ b/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 {
diff --git a/src/components/middle/message/WebPage.tsx b/src/components/middle/message/WebPage.tsx
index b11656fd5..b147d5309 100644
--- a/src/components/middle/message/WebPage.tsx
+++ b/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>