Various UI fixes (#6123)

src/components/modals/common/SpeedingDiamond.module.scss

@@ -7,7 +7,6 @@
   align-items: center;
   justify-content: center;
 
-  width: 100%;
   height: 14.375rem;
 }
 

src/components/modals/common/SwayingStar.module.scss

@@ -7,7 +7,6 @@
   align-items: center;
   justify-content: center;
 
-  width: 100%;
   height: 14.375rem;
 }
 

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

src/components/modals/stars/StarsBalanceModal.tsx

@@ -199,6 +199,7 @@ const StarsBalanceModal = ({
           <Button
             className={styles.starButton}
             onClick={showBuyOptions}
+            fluid
           >
             {oldLang('Star.List.BuyMoreStars')}
           </Button>
@@ -208,6 +209,7 @@ const StarsBalanceModal = ({
             isText
             noForcedUpperCase
             className={styles.starButton}
+            fluid
             onClick={openStarsGiftingPickerModalHandler}
           >
             {oldLang('TelegramStarsGift')}
@@ -253,6 +255,7 @@ const StarsBalanceModal = ({
         <Button
           className={styles.topUpButton}
           onClick={handleTonTopUp}
+          fluid
         >
           {lang('ButtonTopUpViaFragment')}
         </Button>
@@ -319,7 +322,7 @@ const StarsBalanceModal = ({
             {oldLang('TelegramStars')}
           </h2>
         </div>
-        <div className={styles.topSection}>
+        <div className={styles.section}>
           {currency === TON_CURRENCY_CODE ? renderTonHeaderSection() : renderStarsHeaderSection()}
         </div>
         {areBuyOptionsShown && (

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;

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

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<OwnProps & StateProps> = ({
   modal, peer,
 }) => {
@@ -52,6 +53,15 @@ const StarsSubscriptionModal: FC<OwnProps & StateProps> = ({
   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<OwnProps & StateProps> = ({
     const header = (
       <div className={styles.header}>
         <div className={styles.avatarWrapper}>
-          <Avatar peer={!photo ? peer : undefined} webPhoto={photo} size="giant" />
+          <Avatar
+            peer={!photo ? peer : undefined}
+            webPhoto={photo}
+            size="giant"
+            onMouseMove={handleAvatarMouseMove}
+          />
           <StarIcon className={styles.subscriptionStar} type="gold" size="adaptive" />
         </div>
-        <img
+        <InteractiveSparkles
           className={buildClassName(styles.starsBackground)}
-          src={StarsBackground}
+          color="gold"
-          alt=""
+          onRequestAnimation={handleRequestAnimation}
-          draggable={false}
+          centerShift={AVATAR_SPARKLES_CENTER_SHIFT}
         />
         <h1 className={styles.title}>{title || oldLang('StarsSubscriptionTitle')}</h1>
         <p className={styles.amount}>

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;

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;