From cebc6ccab9df8644ff30945b6aa75fae6383c796 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 6 Aug 2024 20:06:45 +0200
Subject: [PATCH] Reply: Fix background in custom shape (#4826)

---
 .../common/embedded/EmbeddedMessage.scss      | 45 ++++++++++++++++---
 .../common/embedded/EmbeddedMessage.tsx       |  2 +
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/components/common/embedded/EmbeddedMessage.scss b/src/components/common/embedded/EmbeddedMessage.scss
index e81f8cd12..52b9ff0e1 100644
--- a/src/components/common/embedded/EmbeddedMessage.scss
+++ b/src/components/common/embedded/EmbeddedMessage.scss
@@ -3,6 +3,9 @@
 @use "../../../styles/icons";
 
 .EmbeddedMessage {
+  --hover-opacity: 0;
+  --hover-background-color: black;
+
   display: flex;
   align-items: center;
   font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
@@ -16,7 +19,35 @@
 
   background-color: var(--accent-background-color);
 
-  transition: background-color 0.2s ease-in;
+  --ripple-color: rgba(0, 0, 0, 0.08);
+
+  html.theme-dark & {
+    --ripple-color: rgba(255, 255, 255, 0.08);
+    --hover-background-color: white;
+  }
+
+  &:hover {
+    --hover-opacity: 0.04;
+
+    html.theme-dark & {
+      --hover-opacity: 0.08;
+    }
+  }
+
+  &::after {
+    transition: opacity 0.2s ease-in;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--hover-background-color);
+
+    opacity: var(--hover-opacity);
+
+    pointer-events: none;
+  }
 
   body.no-page-transitions & {
     .ripple-container {
@@ -29,11 +60,17 @@
   }
 
   .custom-shape & {
+    --accent-color: white;
     max-width: 15rem;
     margin: 0;
-    background-color: var(--color-reply-active);
+    color: white !important;
+    background-color: var(--pattern-color);
     box-shadow: 0 1px 2px var(--color-default-shadow);
 
+    &::before {
+      background: var(--accent-color);
+    }
+
     &:dir(rtl) {
       padding: 0.5rem;
     }
@@ -50,10 +87,6 @@
     background: var(--bar-gradient, var(--accent-color));
   }
 
-  &:active {
-    background-color: var(--background-active-color);
-  }
-
   &.is-quote {
     .message-title {
       padding-inline-end: 0.75rem;
diff --git a/src/components/common/embedded/EmbeddedMessage.tsx b/src/components/common/embedded/EmbeddedMessage.tsx
index 2d6888c04..793cac735 100644
--- a/src/components/common/embedded/EmbeddedMessage.tsx
+++ b/src/components/common/embedded/EmbeddedMessage.tsx
@@ -37,6 +37,7 @@ import useThumbnail from '../../../hooks/useThumbnail';
 import useMessageTranslation from '../../middle/message/hooks/useMessageTranslation';
 
 import ActionMessage from '../../middle/ActionMessage';
+import RippleEffect from '../../ui/RippleEffect';
 import Icon from '../icons/Icon';
 import MediaSpoiler from '../MediaSpoiler';
 import MessageSummary from '../MessageSummary';
@@ -232,6 +233,7 @@ const EmbeddedMessage: FC<OwnProps> = ({
       onClick={handleClick}
       onMouseDown={handleMouseDown}
     >
+      <RippleEffect />
       {mediaThumbnail && renderPictogram(mediaThumbnail, mediaBlobUrl, isRoundVideo, isProtected, isSpoiler)}
       {sender?.color?.backgroundEmojiId && (
         <EmojiIconBackground