Paid Reaction Modal: Fix send as peer menu (#5704)

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,
+  &:global(.active),
-  :hover {
+  &:active,
-    background-color: var(--color-interactive-element-hover) !important;
+  &: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 {

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"

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;

src/components/modals/paidReaction/StarSlider.tsx

@@ -100,8 +100,9 @@ const StarSlider = ({
           </svg>
         </div>
       </div>
-      <div className={styles.progress} />
+      <div className={styles.progress}>
-      <Sparkles preset="progress" className={styles.sparkles} />
+        <Sparkles preset="progress" className={styles.sparkles} />
+      </div>
       <input
         className={styles.slider}
         type="range"