ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Star Transactions: Redesign (#6662)

Browse Source
This commit is contained in:
Alexander Zinchuk 2026-02-22 23:43:22 +01:00
parent 20a8120174
commit fd5bcf6851
6 changed files with 45 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/modals/stars/StarsBalanceModal.module.scss
View File

@ -300,7 +300,24 @@
z-index: 1; z-index: 1;
top: 3.5rem; top: 3.5rem;
padding-inline: 0; padding-inline: 0;
border-bottom: 0.0625rem solid var(--color-light-shadow);
box-shadow: none;
transition: box-shadow 0.2s;
&.pinned {
box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
}
:global(.Tab) {
padding: 0.75rem 1.125rem;
:global(.platform) {
bottom: -0.75rem;
}
}
} }
.disclaimer { .disclaimer {

2
src/components/modals/stars/StarsBalanceModal.tsx
View File

@ -428,7 +428,7 @@ const StarsBalanceModal = ({
</div> </div>
<TabList <TabList
ref={tabsRef} ref={tabsRef}
className={styles.tabs} className={buildClassName(styles.tabs, areTabsPinned && styles.pinned)}
tabClassName={styles.tab} tabClassName={styles.tab}
activeTab={selectedTabIndex} activeTab={selectedTabIndex}
tabs={transactionTabs} tabs={transactionTabs}

18
src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss
View File

@ -6,7 +6,7 @@
display: flex; display: flex;
gap: 0.75rem; gap: 0.75rem;
padding: 0.5rem 0.75rem 0.5rem 0.5rem; padding: 0.5rem 0.75rem 0.4375rem 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
transition: background-color 0.25s ease-out; transition: background-color 0.25s ease-out;
@ -42,22 +42,27 @@
.title, .description, .subtitle { .title, .description, .subtitle {
margin-bottom: 0; margin-bottom: 0;
line-height: 1.25; line-height: 1.25rem;
} }
.title { .title {
font-size: 0.9375rem; font-size: 1rem;
font-weight: var(--font-weight-semibold);
line-height: 1.3125rem;
}
.subtitle,
.description {
font-size: 0.875rem;
} }
.subtitle { .subtitle {
display: flex; display: flex;
gap: 0.125rem; gap: 0.125rem;
align-items: center; align-items: center;
font-size: 0.8125rem;
} }
.description, .statusPeriod, .statusEnded { .description, .statusPeriod, .statusEnded {
font-size: 0.8125rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }
@ -67,7 +72,8 @@
.preview { .preview {
position: relative; position: relative;
align-self: center; width: 2.625rem;
height: 2.625rem;
} }
.subscriptionStar { .subscriptionStar {

4
src/components/modals/stars/subscription/StarsSubscriptionItem.tsx
View File

@ -21,6 +21,8 @@ import StarIcon from '../../../common/icons/StarIcon';
import styles from './StarsSubscriptionItem.module.scss'; import styles from './StarsSubscriptionItem.module.scss';
const AVATAR_SIZE = 42;
type OwnProps = { type OwnProps = {
subscription: ApiStarsSubscription; subscription: ApiStarsSubscription;
}; };
@ -54,7 +56,7 @@ const StarsSubscriptionItem = ({ subscription }: OwnProps) => {
return ( return (
<div className={styles.root} onClick={handleClick}> <div className={styles.root} onClick={handleClick}>
<div className={styles.preview}> <div className={styles.preview}>
<Avatar size="medium" peer={peer} /> <Avatar size={AVATAR_SIZE} peer={peer} />
<StarIcon className={styles.subscriptionStar} type="gold" size="small" /> <StarIcon className={styles.subscriptionStar} type="gold" size="small" />
</div> </div>
<div className={styles.info}> <div className={styles.info}>

16
src/components/modals/stars/transaction/StarsTransactionItem.module.scss
View File

@ -6,7 +6,7 @@
display: flex; display: flex;
gap: 0.75rem; gap: 0.75rem;
padding: 0.5rem 0.75rem 0.5rem 0.5rem; padding: 0.5rem 0.75rem 0.4375rem 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
transition: background-color 0.25s ease-out; transition: background-color 0.25s ease-out;
@ -35,15 +35,18 @@
.title, .description, .date { .title, .description, .date {
margin-bottom: 0; margin-bottom: 0;
line-height: 1.25; line-height: 1.25rem;
} }
.title { .title {
font-size: 0.9375rem; font-size: 1rem;
font-weight: var(--font-weight-semibold);
line-height: 1.3125rem;
} }
.description, .date { .date,
font-size: 0.8125rem; .description {
font-size: 0.875rem;
} }
.date { .date {
@ -60,7 +63,8 @@
.preview { .preview {
position: relative; position: relative;
align-self: center; width: 2.625rem;
height: 2.625rem;
} }
.subscriptionStar { .subscriptionStar {

3
src/components/modals/stars/transaction/StarsTransactionItem.tsx
View File

@ -41,6 +41,7 @@ type OwnProps = {
}; };
const GIFT_STICKER_SIZE = 36; const GIFT_STICKER_SIZE = 36;
const AVATAR_SIZE = 42;
const StarsTransactionItem = ({ transaction, className }: OwnProps) => { const StarsTransactionItem = ({ transaction, className }: OwnProps) => {
const { openStarsTransactionModal } = getActions(); const { openStarsTransactionModal } = getActions();
@ -157,7 +158,7 @@ const StarsTransactionItem = ({ transaction, className }: OwnProps) => {
return ( return (
<> <>
<Avatar size="medium" webPhoto={photo} peer={data.avatarPeer} /> <Avatar size={AVATAR_SIZE} webPhoto={photo} peer={data.avatarPeer} />
{Boolean(subscriptionPeriod) && ( {Boolean(subscriptionPeriod) && (
<StarIcon className={styles.subscriptionStar} type="gold" size="small" /> <StarIcon className={styles.subscriptionStar} type="gold" size="small" />
)} )}