diff --git a/src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss b/src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss index 0962d7b11..96234b862 100644 --- a/src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss +++ b/src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss @@ -39,6 +39,7 @@ .title, .description, .subtitle { margin-bottom: 0; + line-height: 1.25; } .title { @@ -50,12 +51,10 @@ align-items: center; gap: 0.125rem; font-size: 0.8125rem; - line-height: 1rem; } .description, .statusPeriod, .statusEnded { font-size: 0.8125rem; - line-height: 1rem; color: var(--color-text-secondary); } diff --git a/src/components/modals/stars/transaction/StarsTransactionItem.module.scss b/src/components/modals/stars/transaction/StarsTransactionItem.module.scss index 490fa1145..0dd933428 100644 --- a/src/components/modals/stars/transaction/StarsTransactionItem.module.scss +++ b/src/components/modals/stars/transaction/StarsTransactionItem.module.scss @@ -32,6 +32,7 @@ .title, .description, .date { margin-bottom: 0; + line-height: 1.25; } .title { @@ -40,7 +41,6 @@ .description, .date { font-size: 0.8125rem; - line-height: 1rem; } .date { @@ -78,7 +78,7 @@ border-radius: 0.25rem; } -.uniqueGift { +.giftSticker { margin-inline: 0.25rem; margin-top: 0.25rem; } diff --git a/src/components/modals/stars/transaction/StarsTransactionItem.tsx b/src/components/modals/stars/transaction/StarsTransactionItem.tsx index d7b3cf479..ab0766967 100644 --- a/src/components/modals/stars/transaction/StarsTransactionItem.tsx +++ b/src/components/modals/stars/transaction/StarsTransactionItem.tsx @@ -36,7 +36,7 @@ type OwnProps = { className?: string; }; -const UNIQUE_GIFT_STICKER_SIZE = 36; +const GIFT_STICKER_SIZE = 36; function selectOptionalPeer(peerId?: string) { return (global: GlobalState) => ( @@ -59,8 +59,9 @@ const StarsTransactionItem = ({ transaction, className }: OwnProps) => { const peerId = transactionPeer.type === 'peer' ? transactionPeer.id : undefined; const peer = useSelector(selectOptionalPeer(peerId)); - const uniqueGift = transaction.starGift?.type === 'starGiftUnique' ? transaction.starGift : undefined; - const uniqueGiftSticker = uniqueGift && getStickerFromGift(uniqueGift); + const starGift = transaction.starGift; + const isUniqueGift = starGift?.type === 'starGiftUnique'; + const giftSticker = starGift && getStickerFromGift(starGift); const data = useMemo(() => { let title = getTransactionTitle(oldLang, transaction); @@ -107,8 +108,8 @@ const StarsTransactionItem = ({ transaction, className }: OwnProps) => { }, [oldLang, peer, transaction]); const previewContent = useMemo(() => { - if (uniqueGiftSticker) { - const { backdrop } = getGiftAttributes(uniqueGift)!; + if (isUniqueGift) { + const { backdrop } = getGiftAttributes(starGift)!; const backgroundColors = [backdrop!.centerColor, backdrop!.edgeColor]; return ( @@ -118,15 +119,26 @@ const StarsTransactionItem = ({ transaction, className }: OwnProps) => { backgroundColors={backgroundColors} /> ); } + if (giftSticker) { + return ( + + ); + } + if (extendedMedia) { return ; } @@ -139,7 +151,7 @@ const StarsTransactionItem = ({ transaction, className }: OwnProps) => { )} ); - }, [extendedMedia, photo, uniqueGiftSticker, subscriptionPeriod, data.avatarPeer, uniqueGift]); + }, [isUniqueGift, extendedMedia, photo, data.avatarPeer, subscriptionPeriod, starGift, giftSticker]); const handleClick = useLastCallback(() => { openStarsTransactionModal({ transaction });