From c20d97a635c133a43e0085726c73a1ab72ec316a Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 15 Aug 2025 18:25:26 +0200
Subject: [PATCH] Saved Gift: Fix price badge (#6104)

---
 src/components/common/gift/SavedGift.module.scss |  2 ++
 src/components/common/gift/SavedGift.tsx         | 13 +++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/common/gift/SavedGift.module.scss b/src/components/common/gift/SavedGift.module.scss
index 39fa978f8..cd4638ab6 100644
--- a/src/components/common/gift/SavedGift.module.scss
+++ b/src/components/common/gift/SavedGift.module.scss
@@ -44,6 +44,8 @@
   position: absolute;
   bottom: 0.5rem;
 
+  overflow: visible;
+
   height: 1.5rem !important;
   margin-top: 0.625rem;
 
diff --git a/src/components/common/gift/SavedGift.tsx b/src/components/common/gift/SavedGift.tsx
index e90984532..7542bf320 100644
--- a/src/components/common/gift/SavedGift.tsx
+++ b/src/components/common/gift/SavedGift.tsx
@@ -7,6 +7,7 @@ import { STARS_CURRENCY_CODE, TON_CURRENCY_CODE } from '../../../config';
 import { getHasAdminRight } from '../../../global/helpers';
 import { selectChat, selectPeer, selectUser } from '../../../global/selectors';
 import buildClassName from '../../../util/buildClassName';
+import buildStyle from '../../../util/buildStyle';
 import { formatStarsAsIcon, formatTonAsIcon } from '../../../util/localization/format';
 import { CUSTOM_PEER_HIDDEN } from '../../../util/objects/customPeer';
 import { formatIntegerCompact } from '../../../util/textFormat';
@@ -119,9 +120,10 @@ const SavedGift = ({
 
   const sticker = getStickerFromGift(gift.gift);
 
-  const radialPatternBackdrop = useMemo(() => {
-    const { backdrop, pattern } = getGiftAttributes(gift.gift) || {};
+  const giftAttributes = useMemo(() => getGiftAttributes(gift.gift), [gift.gift]);
+  const { backdrop, pattern } = giftAttributes || {};
 
+  const radialPatternBackdrop = useMemo(() => {
     if (!backdrop || !pattern) {
       return undefined;
     }
@@ -137,7 +139,7 @@ const SavedGift = ({
         patternIcon={pattern.sticker}
       />
     );
-  }, [gift.gift]);
+  }, [backdrop, pattern]);
 
   if (!sticker) return undefined;
 
@@ -178,9 +180,12 @@ const SavedGift = ({
       {resellPrice && (
         <Button
           className={styles.priceBadge}
+          style={buildStyle(
+            backdrop?.edgeColor && `background-color: ${backdrop.edgeColor} !important`,
+            backdrop?.centerColor && `box-shadow: 0 0.25rem 1rem ${backdrop.centerColor}`,
+          )}
           nonInteractive
           size="tiny"
-          color="bluredStarsBadge"
           withSparkleEffect={true}
           pill
           fluid