Saved Gift: Fix price badge (#6104)

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;
 

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