From e31a36c41d55e01f1df203f6091f4c9656d8775a Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 21 Mar 2025 14:02:04 +0400
Subject: [PATCH] Paid Reaction Modal: Fix send as peer menu (#5704)

---
 .../PaidReactionModal.module.scss             | 22 ++++++++++++++++---
 .../modals/paidReaction/PaidReactionModal.tsx |  3 ++-
 .../paidReaction/StarSlider.module.scss       |  2 +-
 .../modals/paidReaction/StarSlider.tsx        |  5 +++--
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/modals/paidReaction/PaidReactionModal.module.scss b/src/components/modals/paidReaction/PaidReactionModal.module.scss
index 7553eea83..45a96663e 100644
--- a/src/components/modals/paidReaction/PaidReactionModal.module.scss
+++ b/src/components/modals/paidReaction/PaidReactionModal.module.scss
@@ -49,7 +49,12 @@
   margin-right: 0 !important;
 }
 
+.sendAsPeerButtonAvatar {
+  pointer-events: none;
+}
+
 .sendAsPeerMenuButton {
+  transition: background-color 0.15s;
   margin-right: 0.25rem;
   border-radius: 1.5rem;
   padding: 0.25rem !important;
@@ -57,9 +62,10 @@
   height: auto !important;
   background-color: var(--color-background-secondary) !important;
 
-  :active,
-  :hover {
-    background-color: var(--color-interactive-element-hover) !important;
+  &:global(.active),
+  &:active,
+  &:hover {
+    background-color: rgba(var(--color-text-secondary-rgb), 0.15) !important;
   }
 }
 
@@ -69,7 +75,17 @@
 }
 
 .sendAsPeerMenuBubble {
+  max-height: 15rem;
+  overflow-y: auto !important;
+  right: auto !important;
+  left: 50%;
+  transform: translateX(-50%) scale(0.85) !important;
+  transform-origin: center !important;
   max-width: 16rem;
+
+  &:global(.open) {
+    transform: translateX(-50%) scale(1) !important;
+  }
 }
 
 .sendAsPeerMenu {
diff --git a/src/components/modals/paidReaction/PaidReactionModal.tsx b/src/components/modals/paidReaction/PaidReactionModal.tsx
index ebdf02860..57070a2b6 100644
--- a/src/components/modals/paidReaction/PaidReactionModal.tsx
+++ b/src/components/modals/paidReaction/PaidReactionModal.tsx
@@ -211,6 +211,7 @@ const PaidReactionModal = ({
         ariaLabel={lang('AccDescrOpenMenu2')}
       >
         <Avatar
+          className={styles.sendAsPeerButtonAvatar}
           size="mini"
           peer={shouldSendAsAnonymous ? ANONYMOUS_PEER : senderPeer}
         />
@@ -226,7 +227,7 @@ const PaidReactionModal = ({
     if (!canChangeSendAsPeer) return undefined;
     return (
       <DropdownMenu
-        className={styles.sendAsPeerMenu}
+        className={buildClassName(styles.sendAsPeerMenu, 'with-menu-transitions')}
         bubbleClassName={styles.sendAsPeerMenuBubble}
         trigger={SendAsPeerMenuButton}
         positionX="right"
diff --git a/src/components/modals/paidReaction/StarSlider.module.scss b/src/components/modals/paidReaction/StarSlider.module.scss
index ef305d29e..f199f0ae0 100644
--- a/src/components/modals/paidReaction/StarSlider.module.scss
+++ b/src/components/modals/paidReaction/StarSlider.module.scss
@@ -53,7 +53,7 @@
   height: var(--_size);
   pointer-events: none;
 
-  --_width: calc(var(--progress) * 100% - 1rem);
+  --_width: calc(100% - 1rem);
   mask-image: linear-gradient(to right, black var(--_width), transparent calc(var(--_width) + 0.5rem));
 
   color: white;
diff --git a/src/components/modals/paidReaction/StarSlider.tsx b/src/components/modals/paidReaction/StarSlider.tsx
index a0fd9f2e0..a826bb9cc 100644
--- a/src/components/modals/paidReaction/StarSlider.tsx
+++ b/src/components/modals/paidReaction/StarSlider.tsx
@@ -100,8 +100,9 @@ const StarSlider = ({
           </svg>
         </div>
       </div>
-      <div className={styles.progress} />
-      <Sparkles preset="progress" className={styles.sparkles} />
+      <div className={styles.progress}>
+        <Sparkles preset="progress" className={styles.sparkles} />
+      </div>
       <input
         className={styles.slider}
         type="range"