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 });