diff --git a/src/components/modals/common/SpeedingDiamond.module.scss b/src/components/modals/common/SpeedingDiamond.module.scss
index 5628dc0e8..76cd02223 100644
--- a/src/components/modals/common/SpeedingDiamond.module.scss
+++ b/src/components/modals/common/SpeedingDiamond.module.scss
@@ -7,7 +7,6 @@
align-items: center;
justify-content: center;
- width: 100%;
height: 14.375rem;
}
diff --git a/src/components/modals/common/SwayingStar.module.scss b/src/components/modals/common/SwayingStar.module.scss
index fc48e9ba9..ee04e10ab 100644
--- a/src/components/modals/common/SwayingStar.module.scss
+++ b/src/components/modals/common/SwayingStar.module.scss
@@ -7,7 +7,6 @@
align-items: center;
justify-content: center;
- width: 100%;
height: 14.375rem;
}
diff --git a/src/components/modals/stars/StarsBalanceModal.module.scss b/src/components/modals/stars/StarsBalanceModal.module.scss
index ac9ae5f18..d4edcfec9 100644
--- a/src/components/modals/stars/StarsBalanceModal.module.scss
+++ b/src/components/modals/stars/StarsBalanceModal.module.scss
@@ -37,7 +37,6 @@
@include mixins.side-panel-section;
}
-.topSection,
.lastSection,
.section {
position: relative;
@@ -47,14 +46,6 @@
align-items: center;
padding: 0.5rem;
-}
-
-.topSection {
- padding-inline: 1.5rem;
-}
-
-.lastSection,
-.section {
@include mixins.adapt-padding-to-scrollbar(0.5rem);
}
@@ -235,7 +226,11 @@
.starButton {
grid-column: 1/-1;
gap: 0.5rem;
+ align-self: stretch;
+
margin-top: 0.5rem;
+ margin-inline: 0.5rem;
+
font-weight: var(--font-weight-medium);
}
diff --git a/src/components/modals/stars/StarsBalanceModal.tsx b/src/components/modals/stars/StarsBalanceModal.tsx
index 598cdb73b..63db577f0 100644
--- a/src/components/modals/stars/StarsBalanceModal.tsx
+++ b/src/components/modals/stars/StarsBalanceModal.tsx
@@ -199,6 +199,7 @@ const StarsBalanceModal = ({
@@ -208,6 +209,7 @@ const StarsBalanceModal = ({
isText
noForcedUpperCase
className={styles.starButton}
+ fluid
onClick={openStarsGiftingPickerModalHandler}
>
{oldLang('TelegramStarsGift')}
@@ -253,6 +255,7 @@ const StarsBalanceModal = ({
@@ -319,7 +322,7 @@ const StarsBalanceModal = ({
{oldLang('TelegramStars')}
-
+
{currency === TON_CURRENCY_CODE ? renderTonHeaderSection() : renderStarsHeaderSection()}
{areBuyOptionsShown && (
diff --git a/src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss b/src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss
index 09aee64b9..6e3e855b0 100644
--- a/src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss
+++ b/src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss
@@ -6,7 +6,7 @@
display: flex;
gap: 0.75rem;
- padding: 0.25rem 0.75rem 0.25rem 0.25rem;
+ padding: 0.5rem 0.75rem 0.5rem 0.5rem;
border-radius: 0.5rem;
transition: background-color 0.25s ease-out;
diff --git a/src/components/modals/stars/subscription/StarsSubscriptionModal.module.scss b/src/components/modals/stars/subscription/StarsSubscriptionModal.module.scss
index cd61b7557..a5d548023 100644
--- a/src/components/modals/stars/subscription/StarsSubscriptionModal.module.scss
+++ b/src/components/modals/stars/subscription/StarsSubscriptionModal.module.scss
@@ -37,7 +37,7 @@
}
.footer {
- margin-block: 0.5rem;
+ margin-top: 0.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary);
text-align: center;
@@ -53,10 +53,6 @@
height: 7rem;
}
-.avatarWrapper {
- position: relative;
-}
-
.subscriptionStar {
position: absolute;
z-index: 1;
@@ -79,3 +75,13 @@
.danger {
color: var(--color-error);
}
+
+.avatarWrapper {
+ position: relative;
+ z-index: 2;
+ transition: transform 0.25s ease-out;
+
+ &:hover {
+ transform: scale(1.1);
+ }
+}
diff --git a/src/components/modals/stars/subscription/StarsSubscriptionModal.tsx b/src/components/modals/stars/subscription/StarsSubscriptionModal.tsx
index 12fc1b33f..6d65f42e7 100644
--- a/src/components/modals/stars/subscription/StarsSubscriptionModal.tsx
+++ b/src/components/modals/stars/subscription/StarsSubscriptionModal.tsx
@@ -1,5 +1,5 @@
import type { FC } from '../../../../lib/teact/teact';
-import { memo, useMemo } from '../../../../lib/teact/teact';
+import { memo, useMemo, useRef } from '../../../../lib/teact/teact';
import { getActions, withGlobal } from '../../../../global';
import type {
@@ -22,14 +22,13 @@ import usePrevious from '../../../../hooks/usePrevious';
import Avatar from '../../../common/Avatar';
import StarIcon from '../../../common/icons/StarIcon';
+import InteractiveSparkles from '../../../common/InteractiveSparkles';
import SafeLink from '../../../common/SafeLink';
import Button from '../../../ui/Button';
import TableInfoModal, { type TableData } from '../../common/TableInfoModal';
import styles from './StarsSubscriptionModal.module.scss';
-import StarsBackground from '../../../../assets/stars-bg.png';
-
export type OwnProps = {
modal: TabState['starsSubscriptionModal'];
};
@@ -38,6 +37,8 @@ type StateProps = {
peer?: ApiPeer;
};
+const AVATAR_SPARKLES_CENTER_SHIFT = [0, -50] as const;
+
const StarsSubscriptionModal: FC
= ({
modal, peer,
}) => {
@@ -52,6 +53,15 @@ const StarsSubscriptionModal: FC = ({
const oldLang = useOldLang();
const lang = useLang();
const { subscription } = modal || {};
+ const triggerSparklesRef = useRef<(() => void) | undefined>();
+
+ const handleAvatarMouseMove = useLastCallback(() => {
+ triggerSparklesRef.current?.();
+ });
+
+ const handleRequestAnimation = useLastCallback((animate: NoneToVoidFunction) => {
+ triggerSparklesRef.current = animate;
+ });
const buttonState = useMemo(() => {
if (!subscription) {
@@ -127,14 +137,19 @@ const StarsSubscriptionModal: FC = ({
const header = (
-
{title || oldLang('StarsSubscriptionTitle')}
diff --git a/src/components/modals/stars/transaction/StarsTransactionItem.module.scss b/src/components/modals/stars/transaction/StarsTransactionItem.module.scss
index 902d3a829..e36084c50 100644
--- a/src/components/modals/stars/transaction/StarsTransactionItem.module.scss
+++ b/src/components/modals/stars/transaction/StarsTransactionItem.module.scss
@@ -6,7 +6,7 @@
display: flex;
gap: 0.75rem;
- padding: 0.25rem 0.75rem 0.25rem 0.25rem;
+ padding: 0.5rem 0.75rem 0.5rem 0.5rem;
border-radius: 0.5rem;
transition: background-color 0.25s ease-out;
diff --git a/src/components/modals/stars/transaction/StarsTransactionModal.module.scss b/src/components/modals/stars/transaction/StarsTransactionModal.module.scss
index c3a606b0c..18c1036dd 100644
--- a/src/components/modals/stars/transaction/StarsTransactionModal.module.scss
+++ b/src/components/modals/stars/transaction/StarsTransactionModal.module.scss
@@ -70,6 +70,7 @@
}
.refunded {
+ margin-bottom: 0;
padding: 0.25em 0.5em;
border-radius: var(--border-radius-messages-small);
@@ -91,7 +92,7 @@
}
.footer {
- margin-block: 0.5rem;
+ margin-top: 0.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary);
text-align: center;